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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
| $(document).ready(function() {
|
| Morris.Bar({
| element: 'morris2',
| data: [
| { year: '2010', a: 30, b: 25 },
| { year: '2011', a: 60, b: 40 },
| { year: '2012', a: 85, b: 65 },
| { year: '2013', a: 100, b: 90 },
| { year: '2014', a: 60, b: 50 },
| { year: '2015', a: 75, b: 65 },
| { year: '2016', a: 100, b: 90 }
| ],
| xkey: 'year',
| ykeys: ['a', 'b'],
| labels: ['Section A', 'Section B'],
| barRatio: 0.4,
| xLabelAngle: 0,
| hideHover: 'auto',
| barColors: ['#03A9F3','#FFAA00'],
| resize: true
| });
|
|
|
|
| });
| Morris.Area({
| element: 'morris-area-chart',
| data: [{
| period: '2010',
| iphone: 0,
| ipad: 0,
| itouch: 0
| }, {
| period: '2011',
| iphone: 50,
| ipad: 40,
| itouch: 30
| }, {
| period: '2012',
| iphone:90,
| ipad: 70,
| itouch: 60
| }, {
| period: '2013',
| iphone:50,
| ipad: 40,
| itouch:30
| }, {
| period: '2014',
| iphone:70,
| ipad: 50,
| itouch: 30
| }, {
| period: '2015',
| iphone:120,
| ipad: 90,
| itouch: 60
| }, {
| period: '2016',
| iphone:70,
| ipad: 50,
| itouch:30
| }
|
|
| ],
| lineColors: ['#F9C851', '#01c0c8', '#D5EEE9'],
| xkey: 'period',
| ykeys: ['iphone', 'ipad', 'itouch'],
| labels: ['iphone', 'ipad', 'itouch'],
| pointSize: 0,
| lineWidth: 0,
| resize:true,
| fillOpacity: 0.9,
| behaveLikeLine: true,
| gridLineColor: '#e0e0e0',
| hideHover: 'auto'
|
| });
| Morris.Area({
| element: 'morris-area-chart2',
| data: [{
| period: '2010',
| SiteA: 0,
| SiteB: 0,
|
| }, {
| period: '2011',
| SiteA: 130,
| SiteB: 100,
|
| }, {
| period: '2012',
| SiteA: 120,
| SiteB: 60,
|
| }, {
| period: '2013',
| SiteA: 70,
| SiteB: 200,
|
| }, {
| period: '2014',
| SiteA: 180,
| SiteB: 150,
|
| }, {
| period: '2015',
| SiteA: 105,
| SiteB: 90,
|
| },
| {
| period: '2016',
| SiteA: 250,
| SiteB: 150,
|
| }],
| xkey: 'period',
| ykeys: ['SiteA', 'SiteB'],
| labels: ['Site A', 'Site B'],
|
| pointSize: 0,
| fillOpacity: 0.4,
| pointStrokeColors:['#b4becb', '#01c0c8'],
| behaveLikeLine: true,
| gridLineColor: '#e0e0e0',
| lineWidth: 0,
| smooth: false,
| hideHover: 'auto',
| lineColors: ['#b4becb', '#01c0c8'],
| resize: true
|
| });
| $(document).ready(function() {
|
| var sparklineLogin = function() {
| $('#sales1').sparkline([20, 40, 30], {
| type: 'pie',
| height: '100',
| resize: true,
| sliceColors: ['#808f8f', '#fecd36', '#f1f2f7']
| });
| $('#sales2').sparkline([6, 10, 9, 11, 9, 10, 12], {
| type: 'bar',
| height: '154',
| barWidth: '4',
| resize: true,
| barSpacing: '10',
| barColor: '#25a6f7'
| });
|
| }
| var sparkResize;
|
| $(window).resize(function(e) {
| clearTimeout(sparkResize);
| sparkResize = setTimeout(sparklineLogin, 500);
| });
| sparklineLogin();
|
| });
|
|
|
