1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
| $(function () {
| 'use strict'
|
| var ticksStyle = {
| fontColor: '#495057',
| fontStyle: 'bold'
| }
|
| var mode = 'index'
| var intersect = true
|
| var $salesChart = $('#sales-chart')
| var salesChart = new Chart($salesChart, {
| type : 'bar',
| data : {
| labels : ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
| datasets: [
| {
| backgroundColor: '#007bff',
| borderColor : '#007bff',
| data : [1000, 2000, 3000, 2500, 2700, 2500, 3000]
| },
| {
| backgroundColor: '#ced4da',
| borderColor : '#ced4da',
| data : [700, 1700, 2700, 2000, 1800, 1500, 2000]
| }
| ]
| },
| options: {
| maintainAspectRatio: false,
| tooltips : {
| mode : mode,
| intersect: intersect
| },
| hover : {
| mode : mode,
| intersect: intersect
| },
| legend : {
| display: false
| },
| scales : {
| yAxes: [{
| // display: false,
| gridLines: {
| display : true,
| lineWidth : '4px',
| color : 'rgba(0, 0, 0, .2)',
| zeroLineColor: 'transparent'
| },
| ticks : $.extend({
| beginAtZero: true,
|
| // Include a dollar sign in the ticks
| callback: function (value, index, values) {
| if (value >= 1000) {
| value /= 1000
| value += 'k'
| }
| return '$' + value
| }
| }, ticksStyle)
| }],
| xAxes: [{
| display : true,
| gridLines: {
| display: false
| },
| ticks : ticksStyle
| }]
| }
| }
| })
|
| var $visitorsChart = $('#visitors-chart')
| var visitorsChart = new Chart($visitorsChart, {
| data : {
| labels : ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
| datasets: [{
| type : 'line',
| data : [100, 120, 170, 167, 180, 177, 160],
| backgroundColor : 'transparent',
| borderColor : '#007bff',
| pointBorderColor : '#007bff',
| pointBackgroundColor: '#007bff',
| fill : false
| // pointHoverBackgroundColor: '#007bff',
| // pointHoverBorderColor : '#007bff'
| },
| {
| type : 'line',
| data : [60, 80, 70, 67, 80, 77, 100],
| backgroundColor : 'tansparent',
| borderColor : '#ced4da',
| pointBorderColor : '#ced4da',
| pointBackgroundColor: '#ced4da',
| fill : false
| // pointHoverBackgroundColor: '#ced4da',
| // pointHoverBorderColor : '#ced4da'
| }]
| },
| options: {
| maintainAspectRatio: false,
| tooltips : {
| mode : mode,
| intersect: intersect
| },
| hover : {
| mode : mode,
| intersect: intersect
| },
| legend : {
| display: false
| },
| scales : {
| yAxes: [{
| // display: false,
| gridLines: {
| display : true,
| lineWidth : '4px',
| color : 'rgba(0, 0, 0, .2)',
| zeroLineColor: 'transparent'
| },
| ticks : $.extend({
| beginAtZero : true,
| suggestedMax: 200
| }, ticksStyle)
| }],
| xAxes: [{
| display : true,
| gridLines: {
| display: false
| },
| ticks : ticksStyle
| }]
| }
| }
| })
| })
|
|
