|
0
|
1
|
|
|
2 /*
|
|
|
3 * Name: Oscar
|
|
|
4 * Written by: Unifato - (http://unifato.com)
|
|
|
5 * Version: 1.0.0
|
|
|
6 */
|
|
|
7
|
|
|
8 (function($) {
|
|
|
9 'use strict';
|
|
|
10
|
|
|
11 var Custom = {
|
|
|
12 init: function() {
|
|
|
13 this.warningModal();
|
|
|
14 this.cancelModal();
|
|
|
15 this.warningModal();
|
|
|
16 this.infoModal();
|
|
|
17 this.imageModal();
|
|
|
18
|
|
|
19 //home
|
|
|
20 this.dialKnob();
|
|
|
21 this.extraAreaMorrisChart();
|
|
|
22 this.productLineHomeMorrisChart();
|
|
|
23 this.siteVisitMorrisChart();
|
|
|
24 this.barMorrisDashboardChart();
|
|
|
25 this.homeSparkline1();
|
|
|
26 this.homeSparkline2();
|
|
|
27
|
|
|
28 //flot
|
|
|
29 this.lineFlotChart();
|
|
|
30 this.movingLineFlotChart();
|
|
|
31 this.barFlotChart();
|
|
|
32 this.salesBarFlotChart();
|
|
|
33
|
|
|
34 //morris
|
|
|
35 this.lineMorrisChart();
|
|
|
36 this.donuteMorrisChart();
|
|
|
37 this.productLineMorrisChart();
|
|
|
38 this.barMorrisChart();
|
|
|
39
|
|
|
40 //knob
|
|
|
41 this.knobChart();
|
|
|
42
|
|
|
43 //Sparkline
|
|
|
44 this.sparklineChart();
|
|
|
45
|
|
|
46 //Chart Js
|
|
|
47 this.barMiddleAxesChartJs();
|
|
|
48 this.lineSingleChartJs();
|
|
|
49 this.areaMultiChartJs();
|
|
|
50 this.lineMultiChartJs();
|
|
|
51 this.lineMultiSmallChartJs();
|
|
|
52 this.doughnutSlimChartJs();
|
|
|
53 this.doughnutLegendChartJs();
|
|
|
54 this.doughnutSmallChartJs();
|
|
|
55 this.lineChartJs();
|
|
|
56 this.areaChartJs();
|
|
|
57 this.barChartJs();
|
|
|
58 this.pieChartJs();
|
|
|
59 this.doughnutChartJs();
|
|
|
60 this.polarAreaChartJs();
|
|
|
61 this.radarChartJs();
|
|
|
62
|
|
|
63 // New Chartjs Charts
|
|
|
64 this.newUserChartJs();
|
|
|
65
|
|
|
66 //Dashboard
|
|
|
67 this.lineSingleGradientChartJs();
|
|
|
68 this.lineSingleDashboardChartJs();
|
|
|
69 this.barhorizontalDashboardChartJs();
|
|
|
70 this.areaMultiDashboardChartJs();
|
|
|
71 this.lineMultiDashboardChartJs();
|
|
|
72
|
|
|
73 //Chart js page
|
|
|
74 this.barhorizontalChartJs();
|
|
|
75
|
|
|
76 //Widgets
|
|
|
77 this.doughnutChartWidget();
|
|
|
78 this.barMorrisChartWidget();
|
|
|
79 this.lineChartWidget();
|
|
|
80
|
|
|
81 //Demos
|
|
|
82 this.barMorrisChartDemo();
|
|
|
83 this.barMorrisChartUniversityDemo();
|
|
|
84 this.donuteMorrisChartDemo();
|
|
|
85 this.doughnutChartJsDemo();
|
|
|
86
|
|
|
87 //Toastr
|
|
|
88 this.enableToastr();
|
|
|
89
|
|
|
90 //Animations
|
|
|
91 this.testAnimation();
|
|
|
92 },
|
|
|
93
|
|
|
94
|
|
|
95 warningModal: function() {
|
|
|
96 var el = $('.modal-alert-warning');
|
|
|
97 if ( !el.length ) return;
|
|
|
98 el.on('click', function () {
|
|
|
99 swal({
|
|
|
100 title: 'Are you sure?',
|
|
|
101 text: "You won't be able to revert this!",
|
|
|
102 type: 'warning',
|
|
|
103 showCancelButton: true,
|
|
|
104 confirmButtonClass: 'btn btn-warning',
|
|
|
105 confirmButtonText: 'Yes, delete it!'
|
|
|
106 }).then(function () {
|
|
|
107 swal({
|
|
|
108 title: 'Deleted!',
|
|
|
109 text: 'Your file has been deleted.',
|
|
|
110 type: 'success',
|
|
|
111 confirmButtonClass: 'btn btn-success'
|
|
|
112 });
|
|
|
113 });
|
|
|
114 });
|
|
|
115 },
|
|
|
116
|
|
|
117 cancelModal: function() {
|
|
|
118 var el = $('.modal-alert-cancel');
|
|
|
119 if ( !el.length ) return;
|
|
|
120 el.on('click', function () {
|
|
|
121 swal({
|
|
|
122 title: 'Are you sure?',
|
|
|
123 text: "You won't be able to recover this imaginary file!",
|
|
|
124 type: 'error',
|
|
|
125 showCancelButton: true,
|
|
|
126 confirmButtonClass: 'btn btn-danger',
|
|
|
127 confirmButtonText: 'Yes, delete it!'
|
|
|
128 }).then(function () {
|
|
|
129 swal({
|
|
|
130 title: 'Deleted!',
|
|
|
131 text: 'Your imaginary file has been deleted.',
|
|
|
132 type: 'success',
|
|
|
133 confirmButtonClass: 'btn btn-success'
|
|
|
134 });
|
|
|
135 });
|
|
|
136 });
|
|
|
137 },
|
|
|
138
|
|
|
139 infoModal: function() {
|
|
|
140 var el = $('.modal-alert-info');
|
|
|
141 if ( !el.length ) return;
|
|
|
142 el.on('click', function () {
|
|
|
143 swal({
|
|
|
144 title: 'Are you sure?',
|
|
|
145 text: "You won't be able to recover this imaginary file!",
|
|
|
146 type: 'info',
|
|
|
147 showCancelButton: true,
|
|
|
148 confirmButtonText: 'Info'
|
|
|
149 });
|
|
|
150 });
|
|
|
151 },
|
|
|
152
|
|
|
153 imageModal: function () {
|
|
|
154 var el = $('.modal-alert-image');
|
|
|
155 if ( !el.length ) return;
|
|
|
156 el.on('click', function () {
|
|
|
157 swal({
|
|
|
158 title: 'Sweet!',
|
|
|
159 text: "Here's a custom image.",
|
|
|
160 confirmButtonClass: 'btn btn-success',
|
|
|
161 imageUrl: 'https://unsplash.it/400/200',
|
|
|
162 imageWidth: 400,
|
|
|
163 imageHeight: 200
|
|
|
164 });
|
|
|
165 });
|
|
|
166 },
|
|
|
167
|
|
|
168
|
|
|
169 /*************** Flot Charts ****************/
|
|
|
170 lineFlotChart: function(){
|
|
|
171 var ctx = document.getElementById("lineFlot");
|
|
|
172 if ( ctx === null ) return;
|
|
|
173
|
|
|
174 var offset = 0;
|
|
|
175 plot();
|
|
|
176
|
|
|
177 function plot() {
|
|
|
178 var sin = [],
|
|
|
179 cos = [];
|
|
|
180 for (var i = 0; i < 7; i += 0.2) {
|
|
|
181 sin.push([i, Math.sin(i + offset)]);
|
|
|
182 cos.push([i, Math.cos(i + offset)]);
|
|
|
183 }
|
|
|
184
|
|
|
185 var options = {
|
|
|
186 series: {
|
|
|
187 lines: {
|
|
|
188 show: true
|
|
|
189 },
|
|
|
190 points: {
|
|
|
191 show: true
|
|
|
192 }
|
|
|
193 },
|
|
|
194 grid: {
|
|
|
195 hoverable: true, //IMPORTANT! this is needed for tooltip to work
|
|
|
196 color: "#AFAFAF",
|
|
|
197 borderWidth: 0,
|
|
|
198 backgroundColor: '#FFF'
|
|
|
199 },
|
|
|
200 yaxis: {
|
|
|
201 min: -1.2,
|
|
|
202 max: 1.2
|
|
|
203 },
|
|
|
204 colors: ["#007bb6", "#f0ad4e"],
|
|
|
205 tooltip: true,
|
|
|
206 tooltipOpts: {
|
|
|
207 content: "'%s' of %x.1 is %y.4",
|
|
|
208 shifts: {
|
|
|
209 x: -60,
|
|
|
210 y: 25
|
|
|
211 }
|
|
|
212 }
|
|
|
213 };
|
|
|
214
|
|
|
215 var plotObj = function() {
|
|
|
216 $.plot($("#lineFlot"), [{
|
|
|
217 data: sin,
|
|
|
218 label: " sin(x)",
|
|
|
219 }, {
|
|
|
220 data: cos,
|
|
|
221 label: " cos(x)"
|
|
|
222 }],
|
|
|
223 options);
|
|
|
224 }
|
|
|
225
|
|
|
226 plotObj();
|
|
|
227 $(document).on('SIDEBAR_CHANGED_WIDTH', plotObj);
|
|
|
228 $(window).on('resize', plotObj);
|
|
|
229 }
|
|
|
230 },
|
|
|
231
|
|
|
232 movingLineFlotChart: function() {
|
|
|
233 var ctx = document.getElementById("movingLineFlot");
|
|
|
234 if ( ctx === null ) return;
|
|
|
235
|
|
|
236 var container = $("#movingLineFlot");
|
|
|
237 // Determine how many data points to keep based on the placeholder's initial size;
|
|
|
238 // this gives us a nice high-res plot while avoiding more than one point per pixel.
|
|
|
239 var maximum = container.outerWidth() / 2 || 300;
|
|
|
240 var data = [];
|
|
|
241 function getRandomData() {
|
|
|
242 if (data.length) {
|
|
|
243 data = data.slice(1);
|
|
|
244 }
|
|
|
245 while (data.length < maximum) {
|
|
|
246 var previous = data.length ? data[data.length - 1] : 50;
|
|
|
247 var y = previous + Math.random() * 10 - 5;
|
|
|
248 data.push(y < 0 ? 0 : y > 100 ? 100 : y);
|
|
|
249 }
|
|
|
250 // zip the generated y values with the x values
|
|
|
251 var res = [];
|
|
|
252 for (var i = 0; i < data.length; ++i) {
|
|
|
253 res.push([i, data[i]]);
|
|
|
254 }
|
|
|
255 return res;
|
|
|
256 }
|
|
|
257 var series = [{
|
|
|
258 data: getRandomData(),
|
|
|
259 lines: {
|
|
|
260 fill: true
|
|
|
261 }
|
|
|
262 }];
|
|
|
263
|
|
|
264 var plot = null;
|
|
|
265
|
|
|
266 var FlotFunc = function() {
|
|
|
267 plot = $.plot(container, series, {
|
|
|
268 colors: ["#e6614f"],
|
|
|
269 grid: {
|
|
|
270 borderWidth: 0,
|
|
|
271 minBorderMargin: 20,
|
|
|
272 labelMargin: 10,
|
|
|
273 backgroundColor: {
|
|
|
274 colors: ["#fff", "#fff"]
|
|
|
275 },
|
|
|
276 margin: {
|
|
|
277 top: 8,
|
|
|
278 bottom: 20,
|
|
|
279 left: 0
|
|
|
280 },
|
|
|
281
|
|
|
282 markings: function(axes) {
|
|
|
283 var markings = [];
|
|
|
284 var xaxis = axes.xaxis;
|
|
|
285 for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 1) {
|
|
|
286 markings.push({
|
|
|
287 xaxis: {
|
|
|
288 from: x,
|
|
|
289 to: x + xaxis.tickSize
|
|
|
290 },
|
|
|
291 color: "#fff"
|
|
|
292 });
|
|
|
293 }
|
|
|
294 return markings;
|
|
|
295 }
|
|
|
296 },
|
|
|
297 xaxis: {
|
|
|
298 show: false,
|
|
|
299 tickFormatter: function() {
|
|
|
300 return "";
|
|
|
301 }
|
|
|
302 },
|
|
|
303 yaxis: {
|
|
|
304 min: 0,
|
|
|
305 max: 110
|
|
|
306 },
|
|
|
307 legend: {
|
|
|
308 show: true
|
|
|
309 }
|
|
|
310 });
|
|
|
311
|
|
|
312 }
|
|
|
313
|
|
|
314 FlotFunc();
|
|
|
315
|
|
|
316 // Update the random dataset at 25FPS for a smoothly-animating chart
|
|
|
317 setInterval(function updateRandom() {
|
|
|
318 series[0].data = getRandomData();
|
|
|
319 plot.setData(series);
|
|
|
320 plot.draw();
|
|
|
321 }, 40);
|
|
|
322
|
|
|
323 $(document).on('SIDEBAR_CHANGED_WIDTH', FlotFunc);
|
|
|
324 $(window).on('resize', FlotFunc);
|
|
|
325
|
|
|
326 },
|
|
|
327
|
|
|
328 barFlotChart: function() {
|
|
|
329 var ctx = document.getElementById("barFlot");
|
|
|
330 if ( ctx === null ) return;
|
|
|
331
|
|
|
332 var barOptions = {
|
|
|
333 series: {
|
|
|
334 bars: {
|
|
|
335 show: true,
|
|
|
336 barWidth: 0.5
|
|
|
337 }
|
|
|
338 },
|
|
|
339 xaxis: {
|
|
|
340 mode: "time",
|
|
|
341 timeformat: "%m/%d",
|
|
|
342 minTickSize: [2, "day"]
|
|
|
343 },
|
|
|
344 grid: {
|
|
|
345 hoverable: true,
|
|
|
346 color: "#AFAFAF",
|
|
|
347 borderWidth: 0,
|
|
|
348 backgroundColor: '#FFF'
|
|
|
349 },
|
|
|
350 legend: {
|
|
|
351 show: false
|
|
|
352 },
|
|
|
353 tooltip: true,
|
|
|
354 tooltipOpts: {
|
|
|
355 content: "x: %x, y: %y"
|
|
|
356 }
|
|
|
357 };
|
|
|
358 var barData = {
|
|
|
359 label: "bar",
|
|
|
360 color: "#51d2b7",
|
|
|
361 data: [
|
|
|
362 [1, 5000],
|
|
|
363 [2, 3000],
|
|
|
364 [3, 6000],
|
|
|
365 [4, 2000],
|
|
|
366 [5, 4000],
|
|
|
367 [6, 7000]
|
|
|
368 ]
|
|
|
369 };
|
|
|
370 var FlotFunc = function() {
|
|
|
371 $.plot($("#barFlot"), [barData], barOptions);
|
|
|
372 }
|
|
|
373 FlotFunc();
|
|
|
374 $(document).on('SIDEBAR_CHANGED_WIDTH', FlotFunc);
|
|
|
375 $(window).on('resize', FlotFunc);
|
|
|
376 },
|
|
|
377
|
|
|
378 salesBarFlotChart: function() {
|
|
|
379 var ctx = document.getElementById("salesBarFlot");
|
|
|
380 if ( ctx === null ) return;
|
|
|
381
|
|
|
382 var d1 = [];
|
|
|
383 var i = 0;
|
|
|
384 // for (i = 0; i <= 5; i += 1)
|
|
|
385 // d1.push([i, parseInt(Math.random() * 60)]);
|
|
|
386
|
|
|
387 var d2 = [];
|
|
|
388 for (i = 0; i <= 5; i += 1)
|
|
|
389 d2.push([i, parseInt(Math.random() * 60)]);
|
|
|
390
|
|
|
391 var d3 = [];
|
|
|
392 for (i = 0; i <= 5; i += 1)
|
|
|
393 d3.push([i, parseInt(Math.random() * 40)]);
|
|
|
394
|
|
|
395 var ds = [];
|
|
|
396
|
|
|
397 ds.push({
|
|
|
398 label : "Data One",
|
|
|
399 data : d2,
|
|
|
400 bars : {
|
|
|
401 order : 2
|
|
|
402 }
|
|
|
403 });
|
|
|
404 ds.push({
|
|
|
405 label : "Data Two",
|
|
|
406 data : d3,
|
|
|
407 bars : {
|
|
|
408 order : 3
|
|
|
409 }
|
|
|
410 });
|
|
|
411
|
|
|
412 var stack = 0,
|
|
|
413 bars = true,
|
|
|
414 lines = true,
|
|
|
415 steps = true;
|
|
|
416
|
|
|
417 var options = {
|
|
|
418 bars : {
|
|
|
419 show : true,
|
|
|
420 barWidth : 0.4,
|
|
|
421 fill : 1
|
|
|
422 },
|
|
|
423 grid : {
|
|
|
424 show : true,
|
|
|
425 aboveData : false,
|
|
|
426 labelMargin : 5,
|
|
|
427 axisMargin : 0,
|
|
|
428 borderWidth : 1,
|
|
|
429 minBorderMargin : 5,
|
|
|
430 clickable : true,
|
|
|
431 hoverable : true,
|
|
|
432 autoHighlight : false,
|
|
|
433 mouseActiveRadius : 20,
|
|
|
434 borderColor : '#f5f5f5'
|
|
|
435 },
|
|
|
436 series : {
|
|
|
437 stack : stack
|
|
|
438 },
|
|
|
439 legend : {
|
|
|
440 position : "ne",
|
|
|
441 margin : [0, 0],
|
|
|
442 noColumns : 0,
|
|
|
443 labelBoxBorderColor : null,
|
|
|
444 labelFormatter : function(label, series) {
|
|
|
445 // just add some space to labes
|
|
|
446 return ' ' + label + ' ';
|
|
|
447 },
|
|
|
448 width : 30,
|
|
|
449 height : 5
|
|
|
450 },
|
|
|
451 yaxis : {
|
|
|
452 tickColor : '#f5f5f5',
|
|
|
453 font : {
|
|
|
454 color : '#bdbdbd'
|
|
|
455 }
|
|
|
456 },
|
|
|
457 xaxis : {
|
|
|
458 tickColor : '#f5f5f5',
|
|
|
459 font : {
|
|
|
460 color : '#bdbdbd'
|
|
|
461 }
|
|
|
462 },
|
|
|
463 colors : ["#5867c3", "#00c5dc"],
|
|
|
464 tooltip : true, //activate tooltip
|
|
|
465 tooltipOpts : {
|
|
|
466 content : "%s : %y.0",
|
|
|
467 shifts : {
|
|
|
468 x : -30,
|
|
|
469 y : -50
|
|
|
470 },
|
|
|
471 }
|
|
|
472 };
|
|
|
473
|
|
|
474 var FlotFunc = function() {
|
|
|
475 $.plot($("#salesBarFlot"), ds, options);
|
|
|
476 }
|
|
|
477
|
|
|
478 FlotFunc();
|
|
|
479 $(document).on('SIDEBAR_CHANGED_WIDTH', FlotFunc);
|
|
|
480 $(window).on('resize', FlotFunc);
|
|
|
481 },
|
|
|
482
|
|
|
483
|
|
|
484 /*************** Morris charts ****************/
|
|
|
485 productLineMorrisChart: function() {
|
|
|
486 var ctx = document.getElementById("productLineMorris");
|
|
|
487 if ( ctx === null ) return;
|
|
|
488
|
|
|
489 var chart = Morris.Area({
|
|
|
490 element: 'productLineMorris',
|
|
|
491 data: [{
|
|
|
492 period: '2010',
|
|
|
493 dell: 70,
|
|
|
494 lenovo: 110,
|
|
|
495 sony: 80
|
|
|
496 }, {
|
|
|
497 period: '2011',
|
|
|
498 dell: 75,
|
|
|
499 lenovo: 95,
|
|
|
500 sony: 90
|
|
|
501 }, {
|
|
|
502 period: '2012',
|
|
|
503 dell: 85,
|
|
|
504 lenovo: 102,
|
|
|
505 sony: 75
|
|
|
506 }, {
|
|
|
507 period: '2013',
|
|
|
508 dell: 75,
|
|
|
509 lenovo: 90,
|
|
|
510 sony: 104
|
|
|
511 }, {
|
|
|
512 period: '2014',
|
|
|
513 dell: 95,
|
|
|
514 lenovo: 105,
|
|
|
515 sony: 75
|
|
|
516 }, {
|
|
|
517 period: '2015',
|
|
|
518 dell: 87,
|
|
|
519 lenovo: 95,
|
|
|
520 sony: 80
|
|
|
521 },
|
|
|
522 {
|
|
|
523 period: '2016',
|
|
|
524 dell: 92,
|
|
|
525 lenovo: 108,
|
|
|
526 sony: 70
|
|
|
527 }],
|
|
|
528 xkey: 'period',
|
|
|
529 ykeys: ['dell', 'lenovo', 'sony'],
|
|
|
530 labels: ['Dell', 'Lenovo', 'Sony'],
|
|
|
531 ymax: 'auto[110]',
|
|
|
532 ymin: 'auto[70]',
|
|
|
533 pointSize: 3,
|
|
|
534 fillOpacity: 0,
|
|
|
535 pointStrokeColors:['#00bfc7', '#fb9678', '#9675ce'],
|
|
|
536 behaveLikeLine: true,
|
|
|
537 gridLineColor: '#e0e0e0',
|
|
|
538 lineWidth: 1,
|
|
|
539 hideHover: 'auto',
|
|
|
540 lineColors: ['#00bfc7', '#fb9678', '#9675ce'],
|
|
|
541 resize: true
|
|
|
542 });
|
|
|
543
|
|
|
544 $(document).on('SIDEBAR_CHANGED_WIDTH', chart.resizeHandler);
|
|
|
545 },
|
|
|
546
|
|
|
547
|
|
|
548 /*************** Site Visit Morris Chart ****************/
|
|
|
549 siteVisitMorrisChart: function() {
|
|
|
550 var ctx = document.getElementById("siteVisitMorris");
|
|
|
551 if ( ctx === null ) return;
|
|
|
552
|
|
|
553 var chart = Morris.Area({
|
|
|
554 element: 'siteVisitMorris',
|
|
|
555 data: [{
|
|
|
556 period: '2010',
|
|
|
557 SiteA: 0,
|
|
|
558 SiteB: 0,
|
|
|
559
|
|
|
560 }, {
|
|
|
561 period: '2011',
|
|
|
562 SiteA: 130,
|
|
|
563 SiteB: 100,
|
|
|
564
|
|
|
565 }, {
|
|
|
566 period: '2012',
|
|
|
567 SiteA: 60,
|
|
|
568 SiteB: 80,
|
|
|
569
|
|
|
570 }, {
|
|
|
571 period: '2013',
|
|
|
572 SiteA: 180,
|
|
|
573 SiteB: 200,
|
|
|
574
|
|
|
575 }, {
|
|
|
576 period: '2014',
|
|
|
577 SiteA: 280,
|
|
|
578 SiteB: 100,
|
|
|
579
|
|
|
580 }, {
|
|
|
581 period: '2015',
|
|
|
582 SiteA: 170,
|
|
|
583 SiteB: 150,
|
|
|
584 },
|
|
|
585 {
|
|
|
586 period: '2016',
|
|
|
587 SiteA: 200,
|
|
|
588 SiteB: 80,
|
|
|
589
|
|
|
590 },{
|
|
|
591 period: '2017',
|
|
|
592 SiteA: 0,
|
|
|
593 SiteB: 0,
|
|
|
594
|
|
|
595 }],
|
|
|
596 xkey: 'period',
|
|
|
597 ykeys: ['SiteA', 'SiteB'],
|
|
|
598 labels: ['Site A', 'Site B'],
|
|
|
599 pointSize: 0,
|
|
|
600 fillOpacity: 1,
|
|
|
601 pointStrokeColors:['#5867c3', '#00c5dc'],
|
|
|
602 behaveLikeLine: true,
|
|
|
603 gridLineColor: '#e0e0e0',
|
|
|
604 lineWidth: 0,
|
|
|
605 smooth: false,
|
|
|
606 hideHover: 'auto',
|
|
|
607 lineColors: ['#5867c3', '#00c5dc'],
|
|
|
608 resize: true
|
|
|
609 });
|
|
|
610 $(document).on('SIDEBAR_CHANGED_WIDTH', chart.resizeHandler);
|
|
|
611 },
|
|
|
612
|
|
|
613 lineMorrisChart: function() {
|
|
|
614 var ctx = document.getElementById("lineMorris");
|
|
|
615 if ( ctx === null ) return;
|
|
|
616
|
|
|
617 var line = new Morris.Line({
|
|
|
618 element: 'lineMorris',
|
|
|
619 resize: true,
|
|
|
620 data: [
|
|
|
621 {y: '2011 Q1', item1: 5666},
|
|
|
622 {y: '2011 Q2', item1: 3778},
|
|
|
623 {y: '2011 Q3', item1: 4912},
|
|
|
624 {y: '2011 Q4', item1: 1767},
|
|
|
625 {y: '2012 Q1', item1: 9810},
|
|
|
626 {y: '2012 Q2', item1: 6670},
|
|
|
627 {y: '2012 Q3', item1: 9820},
|
|
|
628 {y: '2012 Q4', item1: 8073},
|
|
|
629 {y: '2013 Q1', item1: 4687},
|
|
|
630 {y: '2013 Q2', item1: 9432}
|
|
|
631 ],
|
|
|
632 xkey: 'y',
|
|
|
633 ykeys: ['item1'],
|
|
|
634 labels: ['Item 1'],
|
|
|
635 gridLineColor: '#eef0f2',
|
|
|
636 lineColors: ['#1d7c2a'],
|
|
|
637 lineWidth: 1,
|
|
|
638 hideHover: 'auto'
|
|
|
639 });
|
|
|
640
|
|
|
641 $(document).on('SIDEBAR_CHANGED_WIDTH', line.resizeHandler);
|
|
|
642 },
|
|
|
643
|
|
|
644 donuteMorrisChart: function() {
|
|
|
645 var ctx = document.getElementById("donuteMorris");
|
|
|
646 if ( ctx === null ) return;
|
|
|
647
|
|
|
648 var chart = Morris.Donut({
|
|
|
649 element: 'donuteMorris',
|
|
|
650 data: [{
|
|
|
651 label: "Dell",
|
|
|
652 value: 12,
|
|
|
653
|
|
|
654 }, {
|
|
|
655 label: "Samsung",
|
|
|
656 value: 30
|
|
|
657 }, {
|
|
|
658 label: "Apple",
|
|
|
659 value: 20
|
|
|
660 },{
|
|
|
661 label: "Lenovo",
|
|
|
662 value: 24,
|
|
|
663
|
|
|
664 },{
|
|
|
665 label: "Sony",
|
|
|
666 value: 37,
|
|
|
667 }],
|
|
|
668 resize: true,
|
|
|
669 colors:['#99d683', '#13dafe', '#6164c1', '#ffb600', '#ff6261']
|
|
|
670 });
|
|
|
671
|
|
|
672 $(document).on('SIDEBAR_CHANGED_WIDTH', chart.resizeHandler);
|
|
|
673 },
|
|
|
674
|
|
|
675 barMorrisChart: function() {
|
|
|
676 var ctx = document.getElementById("barMorris");
|
|
|
677 if ( ctx === null ) return;
|
|
|
678
|
|
|
679 var chart = Morris.Bar({
|
|
|
680 element: 'barMorris',
|
|
|
681 data: [{
|
|
|
682 y: '2006',
|
|
|
683 a: 100,
|
|
|
684 b: 90
|
|
|
685 }, {
|
|
|
686 y: '2007',
|
|
|
687 a: 75,
|
|
|
688 b: 65
|
|
|
689 }, {
|
|
|
690 y: '2008',
|
|
|
691 a: 50,
|
|
|
692 b: 40
|
|
|
693 }, {
|
|
|
694 y: '2009',
|
|
|
695 a: 75,
|
|
|
696 b: 65
|
|
|
697 }, {
|
|
|
698 y: '2010',
|
|
|
699 a: 50,
|
|
|
700 b: 40
|
|
|
701 }, {
|
|
|
702 y: '2011',
|
|
|
703 a: 75,
|
|
|
704 b: 65
|
|
|
705 }, {
|
|
|
706 y: '2012',
|
|
|
707 a: 100,
|
|
|
708 b: 90
|
|
|
709 }],
|
|
|
710 xkey: 'y',
|
|
|
711 ykeys: ['a', 'b'],
|
|
|
712 labels: ['A', 'B'],
|
|
|
713 barColors:['#00a9ff', '#5867c3'],
|
|
|
714 barOpacity: 0.5,
|
|
|
715 barSizeRatio: 0.5,
|
|
|
716 hideHover: 'auto',
|
|
|
717 gridLineColor: '#eef0f2',
|
|
|
718 resize: true
|
|
|
719 });
|
|
|
720
|
|
|
721 $(document).on('SIDEBAR_CHANGED_WIDTH', chart.resizeHandler);
|
|
|
722 },
|
|
|
723
|
|
|
724
|
|
|
725 /*************** Homepage ****************/
|
|
|
726 productLineHomeMorrisChart: function() {
|
|
|
727 var ctx = document.getElementById("productLineHomeMorris");
|
|
|
728 if ( ctx === null ) return;
|
|
|
729
|
|
|
730 var chart = Morris.Area({
|
|
|
731 element: 'productLineHomeMorris',
|
|
|
732 data: [{
|
|
|
733 period: '2010',
|
|
|
734 iphone: 70,
|
|
|
735 ipad: 110,
|
|
|
736 itouch: 80
|
|
|
737 }, {
|
|
|
738 period: '2011',
|
|
|
739 iphone: 75,
|
|
|
740 ipad: 95,
|
|
|
741 itouch: 90
|
|
|
742 }, {
|
|
|
743 period: '2012',
|
|
|
744 iphone: 85,
|
|
|
745 ipad: 102,
|
|
|
746 itouch: 75
|
|
|
747 }, {
|
|
|
748 period: '2013',
|
|
|
749 iphone: 75,
|
|
|
750 ipad: 90,
|
|
|
751 itouch: 104
|
|
|
752 }, {
|
|
|
753 period: '2014',
|
|
|
754 iphone: 95,
|
|
|
755 ipad: 105,
|
|
|
756 itouch: 75
|
|
|
757 }, {
|
|
|
758 period: '2015',
|
|
|
759 iphone: 87,
|
|
|
760 ipad: 95,
|
|
|
761 itouch: 80
|
|
|
762 },
|
|
|
763 {
|
|
|
764 period: '2016',
|
|
|
765 iphone: 92,
|
|
|
766 ipad: 108,
|
|
|
767 itouch: 70
|
|
|
768 }],
|
|
|
769 xkey: 'period',
|
|
|
770 ykeys: ['iphone', 'ipad', 'itouch'],
|
|
|
771 labels: ['iPhone', 'iPad', 'iPod Touch'],
|
|
|
772 ymax: 'auto[110]',
|
|
|
773 ymin: 'auto[70]',
|
|
|
774 pointSize: 3,
|
|
|
775 fillOpacity: 0,
|
|
|
776 pointStrokeColors:['#00bfc7', '#fb9678', '#9675ce'],
|
|
|
777 behaveLikeLine: true,
|
|
|
778 gridLineColor: '#e0e0e0',
|
|
|
779 lineWidth: 1,
|
|
|
780 hideHover: 'auto',
|
|
|
781 lineColors: ['#00bfc7', '#fb9678', '#9675ce'],
|
|
|
782 resize: true
|
|
|
783 });
|
|
|
784
|
|
|
785 $(document).on('SIDEBAR_CHANGED_WIDTH', chart.resizeHandler);
|
|
|
786 },
|
|
|
787
|
|
|
788 barMorrisDashboardChart: function() {
|
|
|
789 var ctx = document.getElementById("barMorrisDashboard");
|
|
|
790 if ( ctx === null ) return;
|
|
|
791
|
|
|
792 var chart = Morris.Bar({
|
|
|
793 element: 'barMorrisDashboard',
|
|
|
794 data: [{
|
|
|
795 y: '2006',
|
|
|
796 a: 100,
|
|
|
797 b: 90,
|
|
|
798 c: 60
|
|
|
799 }, {
|
|
|
800 y: '2007',
|
|
|
801 a: 75,
|
|
|
802 b: 65,
|
|
|
803 c: 40
|
|
|
804 }, {
|
|
|
805 y: '2008',
|
|
|
806 a: 50,
|
|
|
807 b: 40,
|
|
|
808 c: 30
|
|
|
809 }, {
|
|
|
810 y: '2009',
|
|
|
811 a: 75,
|
|
|
812 b: 65,
|
|
|
813 c: 40
|
|
|
814 },{
|
|
|
815 y: '2010',
|
|
|
816 a: 45,
|
|
|
817 b: 95,
|
|
|
818 c: 30
|
|
|
819 }],
|
|
|
820 xkey: 'y',
|
|
|
821 ykeys: ['a', 'b', 'c'],
|
|
|
822 labels: ['Twitter', 'Facebook', 'Linkedin'],
|
|
|
823 barColors:['#b8edf0', '#b4c1d7', '#fcc9ba'],
|
|
|
824 barSizeRatio:0.55,
|
|
|
825 hideHover: 'auto',
|
|
|
826 gridLineColor: '#eef0f2',
|
|
|
827 resize: true
|
|
|
828 });
|
|
|
829
|
|
|
830 $(document).on('SIDEBAR_CHANGED_WIDTH', chart.resizeHandler);
|
|
|
831 },
|
|
|
832
|
|
|
833 extraAreaMorrisChart: function() {
|
|
|
834 var ctx = document.getElementById("extraAreaMorris");
|
|
|
835 if ( ctx === null ) return;
|
|
|
836
|
|
|
837 function generateData() {
|
|
|
838 var ele = null;
|
|
|
839 var data = [];
|
|
|
840 for( var i=0; i<10; i++) {
|
|
|
841 ele = {
|
|
|
842 period: (2010 + i) + '',
|
|
|
843 lenovo: Math.ceil( Math.random() * 200 ),
|
|
|
844 dell: Math.ceil( Math.random() * 200 ),
|
|
|
845 hp: Math.ceil( Math.random() * 200 ),
|
|
|
846 }
|
|
|
847 data.push( ele );
|
|
|
848 }
|
|
|
849 return data;
|
|
|
850 }
|
|
|
851
|
|
|
852 var chart = Morris.Area({
|
|
|
853 element: 'extraAreaMorris',
|
|
|
854 data: generateData(),
|
|
|
855 lineColors: ['#1cb160','#57e998', '#c7ffdb'],
|
|
|
856 xkey: 'period',
|
|
|
857 ykeys: ['lenovo','dell','hp'],
|
|
|
858 labels: ['Lenovo','Dell','HP'],
|
|
|
859 lineWidth: 0,
|
|
|
860 fillOpacity: 1.0,
|
|
|
861 pointSize: 0,
|
|
|
862 pointFillColors: ['#fff','#fff','#fff'],
|
|
|
863 pointStrokeColors: ["#1cb160","#57e998","#deffe3"],
|
|
|
864 behaveLikeLine: false,
|
|
|
865 smooth: true,
|
|
|
866 gridLineColor: '#e0e0e0',
|
|
|
867 resize: true,
|
|
|
868 hideHover: 'auto'
|
|
|
869 });
|
|
|
870
|
|
|
871 $(document).on('SIDEBAR_CHANGED_WIDTH', chart.resizeHandler);
|
|
|
872 },
|
|
|
873
|
|
|
874 dialKnob: function() {
|
|
|
875 var el = $(".knobHomePage");
|
|
|
876 if ( !el.length ) return;
|
|
|
877 el.knob({
|
|
|
878 'format' : function (value) {
|
|
|
879 return value + '%';
|
|
|
880 }
|
|
|
881 });
|
|
|
882 },
|
|
|
883
|
|
|
884 homeSparkline1: function() {
|
|
|
885 var el = $("#homeSparkline1");
|
|
|
886 if ( !el.length ) return;
|
|
|
887
|
|
|
888 var sparklineFunc = function() {
|
|
|
889 el.sparkline([5,6,2,8,9,4,7,10,11,12,10,4,7,10,6,4,6,9,2], {
|
|
|
890 type: 'bar',
|
|
|
891 height: '45',
|
|
|
892 barWidth: 4,
|
|
|
893 barSpacing: 2,
|
|
|
894 barColor: '#fb9678'
|
|
|
895 });
|
|
|
896 }
|
|
|
897
|
|
|
898 sparklineFunc();
|
|
|
899 $(window).on('resize', sparklineFunc);
|
|
|
900 $(document).on('SIDEBAR_CHANGED_WIDTH', sparklineFunc);
|
|
|
901 },
|
|
|
902
|
|
|
903 homeSparkline2: function() {
|
|
|
904 var el = $("#homeSparkline2");
|
|
|
905 if ( !el.length ) return;
|
|
|
906
|
|
|
907 var sparklineFunc = function() {
|
|
|
908 el.sparkline([10,7,4,10,12,11,10,7,4,9,8,2,6,5,9,4,7,10], {
|
|
|
909 type: 'bar',
|
|
|
910 height: '45',
|
|
|
911 barWidth: 4,
|
|
|
912 barSpacing: 2,
|
|
|
913 barColor: '#03a9f3'
|
|
|
914 });
|
|
|
915 };
|
|
|
916
|
|
|
917 sparklineFunc();
|
|
|
918 $(window).on('resize', sparklineFunc);
|
|
|
919 $(document).on('SIDEBAR_CHANGED_WIDTH', sparklineFunc);
|
|
|
920 },
|
|
|
921
|
|
|
922
|
|
|
923 /************** Knob Charts ****************/
|
|
|
924 knobChart: function() {
|
|
|
925 var el = $('[data-plugin="knob"]');
|
|
|
926 if ( !el.length ) return;
|
|
|
927 el.knob();
|
|
|
928 },
|
|
|
929
|
|
|
930 /************** Sparkline Charts ****************/
|
|
|
931 sparklineChart: function() {
|
|
|
932 var el = $(".sparklineChart");
|
|
|
933 if ( !el.length ) return;
|
|
|
934
|
|
|
935 $(document).ready(function(){
|
|
|
936 var sparklineLogin = function() {
|
|
|
937
|
|
|
938 $("#sparkline1").sparkline([5,6,2,8,9,4,7,10,11,12,10], {
|
|
|
939 type: 'bar',
|
|
|
940 height: '45',
|
|
|
941 barWidth: 7,
|
|
|
942 barSpacing: 4,
|
|
|
943 barColor: '#99d683'
|
|
|
944 });
|
|
|
945
|
|
|
946 $('#sparkline2').sparkline([20, 40, 30], {
|
|
|
947 type: 'pie',
|
|
|
948 width: '50',
|
|
|
949 height: '45',
|
|
|
950 resize: true,
|
|
|
951 sliceColors: ['#13dafe', '#6164c1', '#f1f2f7']
|
|
|
952 });
|
|
|
953
|
|
|
954 $('#sparkline3').sparkline([5, 6, 2, 9, 4, 7, 10, 12], {
|
|
|
955 type: 'bar',
|
|
|
956 height: '164',
|
|
|
957 barWidth: '7',
|
|
|
958 resize: true,
|
|
|
959 barSpacing: '5',
|
|
|
960 barColor: '#f96262'
|
|
|
961 });
|
|
|
962
|
|
|
963 $("#sparkline4").sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40, 45, 56, 7, 10], {
|
|
|
964 type: 'line',
|
|
|
965 width: '120',
|
|
|
966 height: '45',
|
|
|
967 lineColor: '#fb6d9d',
|
|
|
968 fillColor: 'transparent',
|
|
|
969 spotColor: '#fb6d9d',
|
|
|
970 minSpotColor: undefined,
|
|
|
971 maxSpotColor: undefined,
|
|
|
972 highlightSpotColor: undefined,
|
|
|
973 highlightLineColor: undefined
|
|
|
974 });
|
|
|
975
|
|
|
976 $('#sparkline5').sparkline([15, 23, 55, 35, 54, 45, 66, 47, 30], {
|
|
|
977 type: 'line',
|
|
|
978 width: '100%',
|
|
|
979 height: '160',
|
|
|
980 chartRangeMax: 50,
|
|
|
981 resize: true,
|
|
|
982 lineColor: '#13dafe',
|
|
|
983 fillColor: 'rgba(19, 218, 254, 0.3)',
|
|
|
984 highlightLineColor: 'rgba(0,0,0,.1)',
|
|
|
985 highlightSpotColor: 'rgba(0,0,0,.2)',
|
|
|
986 });
|
|
|
987
|
|
|
988 $('#sparkline5').sparkline([0, 13, 10, 14, 15, 10, 18, 20, 0], {
|
|
|
989 type: 'line',
|
|
|
990 width: '100%',
|
|
|
991 height: '160',
|
|
|
992 chartRangeMax: 40,
|
|
|
993 lineColor: '#6164c1',
|
|
|
994 fillColor: 'rgba(97, 100, 193, 0.3)',
|
|
|
995 composite: true,
|
|
|
996 resize: true,
|
|
|
997 highlightLineColor: 'rgba(0,0,0,.1)',
|
|
|
998 highlightSpotColor: 'rgba(0,0,0,.2)',
|
|
|
999 });
|
|
|
1000
|
|
|
1001 $('#sparkline6').sparkline([5, 6, 2, 8, 9, 4, 7, 10, 11, 12, 10], {
|
|
|
1002 type: 'bar',
|
|
|
1003 height: '45',
|
|
|
1004 barWidth: '7',
|
|
|
1005 barSpacing: '4',
|
|
|
1006 barColor: '#13dafe'
|
|
|
1007 });
|
|
|
1008
|
|
|
1009 $("#sparkline7").sparkline([0,2,8,6,8,5,6,4,8,6,4,2 ], {
|
|
|
1010 type: 'line',
|
|
|
1011 width: '100%',
|
|
|
1012 height: '50',
|
|
|
1013 lineColor: '#ffca4a',
|
|
|
1014 fillColor: '#ffca4a',
|
|
|
1015 highlightLineColor: 'rgba(0, 0, 0, 0.2)',
|
|
|
1016 highlightSpotColor: '#4f4f4f'
|
|
|
1017 });
|
|
|
1018
|
|
|
1019 $("#sparkline8").sparkline([0,6,8,10,7,4,6,8,4,3,1,0 ], {
|
|
|
1020 type: 'line',
|
|
|
1021 width: '100%',
|
|
|
1022 height: '50',
|
|
|
1023 lineColor: '#ff7676',
|
|
|
1024 fillColor: '#ff7676',
|
|
|
1025 maxSpotColor: '#ff7676',
|
|
|
1026 highlightLineColor: 'rgba(0, 0, 0, 0.2)',
|
|
|
1027 highlightSpotColor: '#ff7676'
|
|
|
1028 });
|
|
|
1029
|
|
|
1030 $("#sparkline9").sparkline([0,6,8,10,7,4,6,8,4,3,1,0 ], {
|
|
|
1031 type: 'line',
|
|
|
1032 width: '100%',
|
|
|
1033 height: '50',
|
|
|
1034 lineColor: '#2cabe3',
|
|
|
1035 fillColor: '#2cabe3',
|
|
|
1036 minSpotColor:'#2cabe3',
|
|
|
1037 maxSpotColor: '#2cabe3',
|
|
|
1038 highlightLineColor: 'rgba(0, 0, 0, 0.2)',
|
|
|
1039 highlightSpotColor: '#2cabe3'
|
|
|
1040 });
|
|
|
1041
|
|
|
1042 $("#sparkline10").sparkline([0,6,8,10,7,4,6,8,4,3,1,0 ], {
|
|
|
1043 type: 'line',
|
|
|
1044 width: '100%',
|
|
|
1045 height: '50',
|
|
|
1046 lineColor: '#6164c1',
|
|
|
1047 fillColor: '#6164c1',
|
|
|
1048 maxSpotColor: '#6164c1',
|
|
|
1049 highlightLineColor: 'rgba(0, 0, 0, 0.2)',
|
|
|
1050 highlightSpotColor: '#6164c1'
|
|
|
1051 });
|
|
|
1052
|
|
|
1053 $('#sparkline11').sparkline([20, 40, 30, 50, 70], {
|
|
|
1054 type: 'pie',
|
|
|
1055 height: '200',
|
|
|
1056 resize: true,
|
|
|
1057 sliceColors: ['#38d57a','#9c27b0', '#e6614f', '#03a9f3', '#007bb6' ]
|
|
|
1058 });
|
|
|
1059
|
|
|
1060 $("#sparkline12").sparkline([10,4,6,12,5,9,3,17,20,10,15,9,4,11], {
|
|
|
1061 type: 'bar',
|
|
|
1062 height: '200',
|
|
|
1063 barWidth: 10,
|
|
|
1064 barSpacing: 7,
|
|
|
1065 barColor: '#007bb6'
|
|
|
1066 });
|
|
|
1067
|
|
|
1068 $('#sparkline13').sparkline([10,4,6,12,5,9,3,17,20,10,15,9,4,11], {
|
|
|
1069 type: 'bar',
|
|
|
1070 height: '200',
|
|
|
1071 barWidth: '10',
|
|
|
1072 resize: true,
|
|
|
1073 barSpacing: '7',
|
|
|
1074 barColor: '#51d2b7'
|
|
|
1075 });
|
|
|
1076
|
|
|
1077 $('#sparkline13').sparkline([10,4,6,12,5,9,3,17,20,10,15,9,4,11], {
|
|
|
1078 type: 'line',
|
|
|
1079 height: '200',
|
|
|
1080 lineColor: '#51d2b7',
|
|
|
1081 spotRadius: 0,
|
|
|
1082 fillColor: 'transparent',
|
|
|
1083 composite: true,
|
|
|
1084 highlightLineColor: 'rgba(0,0,0,.1)',
|
|
|
1085 highlightSpotColor: 'rgba(0,0,0,.2)'
|
|
|
1086 });
|
|
|
1087
|
|
|
1088 $("#sparkline14").sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40, 45, 56, 7, 10], {
|
|
|
1089 type: 'line',
|
|
|
1090 width: '100%',
|
|
|
1091 height: '200',
|
|
|
1092 lineColor: '#fff',
|
|
|
1093 fillColor: 'transparent',
|
|
|
1094 spotColor: '#fff',
|
|
|
1095 minSpotColor: undefined,
|
|
|
1096 maxSpotColor: undefined,
|
|
|
1097 highlightSpotColor: undefined,
|
|
|
1098 highlightLineColor: undefined
|
|
|
1099 });
|
|
|
1100
|
|
|
1101 $('#sparkline15').sparkline([5, 6, 2, 8, 9, 4, 7, 10, 11, 12, 10, 9, 4, 7], {
|
|
|
1102 type: 'bar',
|
|
|
1103 height: '200',
|
|
|
1104 barWidth: '10',
|
|
|
1105 barSpacing: '10',
|
|
|
1106 barColor: '#13dafe'
|
|
|
1107 });
|
|
|
1108
|
|
|
1109 $('#sparkline16').sparkline([25, 55, 35, 75, 64, 55, 86, 47, 50], {
|
|
|
1110 type: 'line',
|
|
|
1111 width: '100%',
|
|
|
1112 height: '200',
|
|
|
1113 chartRangeMax: 50,
|
|
|
1114 resize: true,
|
|
|
1115 lineColor: '#e6614f',
|
|
|
1116 fillColor: 'rgba(255,170,170,0.3)',
|
|
|
1117 highlightLineColor: 'rgba(0,0,0,.1)',
|
|
|
1118 highlightSpotColor: 'rgba(0,0,0,.2)',
|
|
|
1119 });
|
|
|
1120
|
|
|
1121 $('#sparkline16').sparkline([0, 23, 30, 55, 43, 80, 38, 40, 0], {
|
|
|
1122 type: 'line',
|
|
|
1123 width: '100%',
|
|
|
1124 height: '200',
|
|
|
1125 chartRangeMax: 40,
|
|
|
1126 lineColor: '#007f3f',
|
|
|
1127 fillColor: 'rgba(86, 255, 170, 0.3)',
|
|
|
1128 composite: true,
|
|
|
1129 resize: true,
|
|
|
1130 highlightLineColor: 'rgba(0,0,0,.1)',
|
|
|
1131 highlightSpotColor: 'rgba(0,0,0,.2)',
|
|
|
1132 });
|
|
|
1133
|
|
|
1134 $('#sparklinedash').sparkline([ 8, 6, 4, 4, 3, 5, 6, 8, 10, 9, 10, 8, 9, 8, 10, 9, 12], {
|
|
|
1135 type: 'line',
|
|
|
1136 width: '100%',
|
|
|
1137 height: '50',
|
|
|
1138 lineWidth: 2,
|
|
|
1139 spotRadius: 0,
|
|
|
1140 lineColor: '#03a9f3',
|
|
|
1141 fillColor: '#03a9f3',
|
|
|
1142 highlightLineColor: 0
|
|
|
1143 });
|
|
|
1144
|
|
|
1145 $('#sparklinedash2').sparkline([ 8, 6, 4, 4, 3, 5, 6, 8, 10, 9, 10, 8, 9, 8, 10, 9, 12], {
|
|
|
1146 type: 'line',
|
|
|
1147 width: '100%',
|
|
|
1148 height: '50',
|
|
|
1149 lineWidth: 2,
|
|
|
1150 spotRadius: 0,
|
|
|
1151 lineColor: '#e6614f',
|
|
|
1152 fillColor: '#e6614f',
|
|
|
1153 highlightLineColor: 0
|
|
|
1154 });
|
|
|
1155
|
|
|
1156 $('#sparklinedash3').sparkline([ 8, 6, 4, 4, 3, 5, 6, 8, 10, 9, 10, 8, 9, 8, 10, 9, 12], {
|
|
|
1157 type: 'line',
|
|
|
1158 width: '100%',
|
|
|
1159 height: '50',
|
|
|
1160 lineWidth: 2,
|
|
|
1161 spotRadius: 0,
|
|
|
1162 lineColor: '#51d2b7',
|
|
|
1163 fillColor: '#51d2b7',
|
|
|
1164 highlightLineColor: 0
|
|
|
1165 });
|
|
|
1166
|
|
|
1167 $('#sparklinedash4').sparkline([ 8, 6, 4, 4, 3, 5, 6, 8, 10, 9, 10, 8, 9, 8, 10, 9, 12], {
|
|
|
1168 type: 'line',
|
|
|
1169 width: '100%',
|
|
|
1170 height: '50',
|
|
|
1171 lineWidth: 2,
|
|
|
1172 spotRadius: 0,
|
|
|
1173 lineColor: '#fb9678',
|
|
|
1174 fillColor: '#fb9678',
|
|
|
1175 highlightLineColor: 0
|
|
|
1176 });
|
|
|
1177
|
|
|
1178 $('#sparklinedashbar').sparkline([ 12, 11,10, 9, 8, 7, 6, 5, 6, 7, 8, 9, 10,11, 12,11, 10, 9, 8, 7, 6, 5, 6, 7, 8,9, 10, 12 ], {
|
|
|
1179 type: 'line',
|
|
|
1180 height: '50',
|
|
|
1181 width: '100%',
|
|
|
1182 chartRangeMin: 3,
|
|
|
1183 lineColor: "#03a9f3",
|
|
|
1184 fillColor: "#03a9f3"
|
|
|
1185 });
|
|
|
1186
|
|
|
1187 $('#sparklinedashbar2').sparkline([ 12, 11,10, 9, 8, 7, 6, 5, 6, 7, 8, 9, 10,11, 12,11, 10, 9, 8, 7, 6, 5, 6, 7, 8,9, 10, 12 ], {
|
|
|
1188 type: 'line',
|
|
|
1189 height: '50',
|
|
|
1190 width: '100%',
|
|
|
1191 chartRangeMin: 3,
|
|
|
1192 lineColor: "#e6614f",
|
|
|
1193 fillColor: "#e6614f"
|
|
|
1194 });
|
|
|
1195
|
|
|
1196 $('#sparklinedashbar3').sparkline([ 12, 11,10, 9, 8, 7, 6, 5, 6, 7, 8, 9, 10,11, 12,11, 10, 9, 8, 7, 6, 5, 6, 7, 8,9, 10, 12 ], {
|
|
|
1197 type: 'line',
|
|
|
1198 height: '50',
|
|
|
1199 width: '100%',
|
|
|
1200 chartRangeMin: 3,
|
|
|
1201 fillColor: "#51d2b7",
|
|
|
1202 lineColor: "#51d2b7"
|
|
|
1203 });
|
|
|
1204
|
|
|
1205 $('#sparklinedashbar4').sparkline([ 12, 11,10, 9, 8, 7, 6, 5, 6, 7, 8, 9, 10,11, 12,11, 10, 9, 8, 7, 6, 5, 6, 7, 8,9, 10, 12 ], {
|
|
|
1206 type: 'line',
|
|
|
1207 height: '50',
|
|
|
1208 width: '100%',
|
|
|
1209 chartRangeMin: 3,
|
|
|
1210 lineColor: "#fb9678",
|
|
|
1211 fillColor: "#fb9678"
|
|
|
1212 });
|
|
|
1213
|
|
|
1214 $('#sparklinedashbar5').sparkline([ 8, 6, 4, 4, 3, 5, 6, 8, 10, 9, 10, 8, 9, 8, 10, 9, 12,6, 5, 6, 8, 10, 9 ], {
|
|
|
1215 type: 'bar',
|
|
|
1216 height: '50',
|
|
|
1217 barSpacing: 5,
|
|
|
1218 chartRangeMin: 1,
|
|
|
1219 barColor: "#03a9f3"
|
|
|
1220 });
|
|
|
1221
|
|
|
1222 $('#sparklinedashbar6').sparkline([ 8, 6, 4, 4, 3, 5, 6, 8, 10, 9, 10, 8, 9, 8, 10, 9, 12,6, 5, 6, 8, 10, 9 ], {
|
|
|
1223 type: 'bar',
|
|
|
1224 height: '50',
|
|
|
1225 barSpacing: 5,
|
|
|
1226 chartRangeMin: 1,
|
|
|
1227 barColor: "#e6614f"
|
|
|
1228 });
|
|
|
1229
|
|
|
1230 $('#sparklinedashbar7').sparkline([ 8, 6, 4, 4, 3, 5, 6, 8, 10, 9, 10, 8, 9, 8, 10, 9, 12,6, 5, 6, 8, 10, 9], {
|
|
|
1231 type: 'bar',
|
|
|
1232 height: '50',
|
|
|
1233 barSpacing: 5,
|
|
|
1234 chartRangeMin: 1,
|
|
|
1235 barColor: "#51d2b7"
|
|
|
1236 });
|
|
|
1237
|
|
|
1238 $('#sparklinedashbar8').sparkline([ 8, 6, 4, 4, 3, 5, 6, 8, 10, 9, 10, 8, 9, 8, 10, 9, 12,6, 5, 6, 8, 10, 9], {
|
|
|
1239 type: 'bar',
|
|
|
1240 height: '50',
|
|
|
1241 barSpacing: 5,
|
|
|
1242 chartRangeMin: 1,
|
|
|
1243 barColor: "#fb9678"
|
|
|
1244 });
|
|
|
1245
|
|
|
1246 $('#sparklineWidget1').sparkline('html', {
|
|
|
1247 type: 'bar',
|
|
|
1248 height: '30',
|
|
|
1249 barWidth: '4',
|
|
|
1250 resize: true,
|
|
|
1251 barSpacing: '1',
|
|
|
1252 barColor: '#ccc',
|
|
|
1253 zeroAxis: true,
|
|
|
1254 });
|
|
|
1255
|
|
|
1256 };
|
|
|
1257 sparklineLogin();
|
|
|
1258 $(window).on('resize',sparklineLogin);
|
|
|
1259 $(document).on('SIDEBAR_CHANGED_WIDTH',sparklineLogin);
|
|
|
1260 });
|
|
|
1261
|
|
|
1262 },
|
|
|
1263
|
|
|
1264
|
|
|
1265 /*************** Chart Js ******************/
|
|
|
1266 barMiddleAxesChartJs: function() {
|
|
|
1267 var ctx = document.getElementById("chartJsBarMiddleAxes");
|
|
|
1268 if ( ctx === null ) return;
|
|
|
1269
|
|
|
1270 var ctx2 = document.getElementById("chartJsBarMiddleAxes").getContext("2d");
|
|
|
1271 var data2 = {
|
|
|
1272 labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
|
1273 datasets: [
|
|
|
1274 {
|
|
|
1275 label: "My First dataset",
|
|
|
1276 backgroundColor: "#5867c3",
|
|
|
1277 strokeColor: "#5867c3",
|
|
|
1278 data: [16, -60, 30, -50, 26, -55, 55]
|
|
|
1279 },
|
|
|
1280 {
|
|
|
1281 label: "My Second dataset",
|
|
|
1282 backgroundColor: "#00cedc",
|
|
|
1283 strokeColor: "#00cedc",
|
|
|
1284 data: [-28, 48, -40, 19, -55, 27, -50]
|
|
|
1285 }
|
|
|
1286 ]
|
|
|
1287 };
|
|
|
1288
|
|
|
1289 var chartJsBar = new Chart(ctx2, {
|
|
|
1290 type: "bar",
|
|
|
1291 data: data2,
|
|
|
1292 responsive: true,
|
|
|
1293 maintainAspectRatio: false,
|
|
|
1294 options: {
|
|
|
1295 legend: {
|
|
|
1296 display: false
|
|
|
1297 },
|
|
|
1298 tooltips: {
|
|
|
1299 mode: 'index',
|
|
|
1300 intersect: false,
|
|
|
1301 titleFontColor: "#000",
|
|
|
1302 titleMarginBottom: 10,
|
|
|
1303 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
1304 bodyFontColor: "#000",
|
|
|
1305 borderColor: "#e9e9e9",
|
|
|
1306 bodySpacing: 10,
|
|
|
1307 borderWidth: 3,
|
|
|
1308 xPadding: 10,
|
|
|
1309 yPadding: 10,
|
|
|
1310 },
|
|
|
1311 scales: {
|
|
|
1312 xAxes: [{
|
|
|
1313 gridLines: {
|
|
|
1314 display:false
|
|
|
1315 },
|
|
|
1316 ticks: {
|
|
|
1317 fontColor: "#9ca0a8",
|
|
|
1318 }
|
|
|
1319 }],
|
|
|
1320 yAxes: [{
|
|
|
1321 gridLines: {
|
|
|
1322 display:true
|
|
|
1323 },
|
|
|
1324 ticks: {
|
|
|
1325 fontColor: "#9ca0a8",
|
|
|
1326 }
|
|
|
1327 }]
|
|
|
1328 }
|
|
|
1329 },
|
|
|
1330 });
|
|
|
1331 },
|
|
|
1332
|
|
|
1333 doughnutSlimChartJs: function() {
|
|
|
1334 var ctx = document.getElementById("chartJsDoughnutSlim");
|
|
|
1335 if ( ctx === null ) return;
|
|
|
1336
|
|
|
1337 var ctx4 = document.getElementById("chartJsDoughnutSlim").getContext("2d");
|
|
|
1338 var data4 = {
|
|
|
1339 labels: [
|
|
|
1340 "Green",
|
|
|
1341 "Orange",
|
|
|
1342 "Blue",
|
|
|
1343
|
|
|
1344 ],
|
|
|
1345 datasets: [
|
|
|
1346 {
|
|
|
1347 data: [100,140,300],
|
|
|
1348 backgroundColor: [
|
|
|
1349 "#05d05b",
|
|
|
1350 "#ffb701",
|
|
|
1351 "#00c1dd",
|
|
|
1352
|
|
|
1353 ],
|
|
|
1354 hoverBackgroundColor: [
|
|
|
1355 "#05d05b",
|
|
|
1356 "#ffb701",
|
|
|
1357 "#00c1dd",
|
|
|
1358
|
|
|
1359 ]
|
|
|
1360 }]
|
|
|
1361 };
|
|
|
1362 var chartJsDoughnut = new Chart(ctx4, {
|
|
|
1363 type: "doughnut",
|
|
|
1364 data: data4,
|
|
|
1365 options: {
|
|
|
1366 maintainAspectRatio: false,
|
|
|
1367 responsive: true,
|
|
|
1368 cutoutPercentage: 90,
|
|
|
1369 legend: {
|
|
|
1370 display: false,
|
|
|
1371 position: 'right',
|
|
|
1372 labels: {
|
|
|
1373 usePointStyle: true,
|
|
|
1374 padding: 40,
|
|
|
1375 }
|
|
|
1376 },
|
|
|
1377 tooltips: {
|
|
|
1378 mode: 'index',
|
|
|
1379 intersect: false,
|
|
|
1380 titleFontColor: "#000",
|
|
|
1381 titleMarginBottom: 10,
|
|
|
1382 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
1383 bodyFontColor: "#000",
|
|
|
1384 borderColor: "#e9e9e9",
|
|
|
1385 bodySpacing: 10,
|
|
|
1386 borderWidth: 2,
|
|
|
1387 xPadding: 10,
|
|
|
1388 yPadding: 10,
|
|
|
1389 },
|
|
|
1390 }
|
|
|
1391 });
|
|
|
1392 },
|
|
|
1393
|
|
|
1394 doughnutLegendChartJs: function() {
|
|
|
1395 var ctx = document.getElementById("chartJsDoughnutLegend");
|
|
|
1396 if ( ctx === null ) return;
|
|
|
1397
|
|
|
1398 var ctx4 = document.getElementById("chartJsDoughnutLegend").getContext("2d");
|
|
|
1399 var data4 = {
|
|
|
1400 labels: [
|
|
|
1401 "Sky Blue",
|
|
|
1402 "Violet",
|
|
|
1403 "Pink",
|
|
|
1404 "Yellow",
|
|
|
1405 "Green",
|
|
|
1406 "Teal",
|
|
|
1407
|
|
|
1408 ],
|
|
|
1409 datasets: [
|
|
|
1410 {
|
|
|
1411 data: [6,32,24,26,12,6],
|
|
|
1412 backgroundColor: [
|
|
|
1413 "#6acbf8",
|
|
|
1414 "#a88cd6",
|
|
|
1415 "#fe81a9",
|
|
|
1416 "#fcda6c",
|
|
|
1417 "#81c685",
|
|
|
1418 "#b6fad5",
|
|
|
1419
|
|
|
1420 ],
|
|
|
1421 hoverBackgroundColor: [
|
|
|
1422 "#6acbf8",
|
|
|
1423 "#a88cd6",
|
|
|
1424 "#fe81a9",
|
|
|
1425 "#fcda6c",
|
|
|
1426 "#81c685",
|
|
|
1427 "#b6fad5",
|
|
|
1428
|
|
|
1429 ]
|
|
|
1430 }]
|
|
|
1431 };
|
|
|
1432 var chartJsDoughnut = new Chart(ctx4, {
|
|
|
1433 type: "doughnut",
|
|
|
1434 data: data4,
|
|
|
1435 options: {
|
|
|
1436 maintainAspectRatio: false,
|
|
|
1437 responsive: true,
|
|
|
1438 cutoutPercentage: 80,
|
|
|
1439 legend: {
|
|
|
1440 display: false,
|
|
|
1441 position: 'right',
|
|
|
1442 labels: {
|
|
|
1443 usePointStyle: true,
|
|
|
1444 padding: 40,
|
|
|
1445 }
|
|
|
1446 },
|
|
|
1447 tooltips: {
|
|
|
1448 mode: 'index',
|
|
|
1449 intersect: false,
|
|
|
1450 titleFontColor: "#000",
|
|
|
1451 titleMarginBottom: 10,
|
|
|
1452 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
1453 bodyFontColor: "#000",
|
|
|
1454 borderColor: "#e9e9e9",
|
|
|
1455 bodySpacing: 10,
|
|
|
1456 borderWidth: 2,
|
|
|
1457 xPadding: 10,
|
|
|
1458 yPadding: 10,
|
|
|
1459 },
|
|
|
1460 }
|
|
|
1461 });
|
|
|
1462 },
|
|
|
1463
|
|
|
1464 doughnutSmallChartJs: function() {
|
|
|
1465 var ctx = document.getElementById("chartJsDoughnutSmall");
|
|
|
1466 if ( ctx === null ) return;
|
|
|
1467
|
|
|
1468 var ctx4 = document.getElementById("chartJsDoughnutSmall").getContext("2d");
|
|
|
1469 var data4 = {
|
|
|
1470 labels: [
|
|
|
1471 "Green",
|
|
|
1472 "Orange",
|
|
|
1473 "Blue",
|
|
|
1474 ],
|
|
|
1475 datasets: [
|
|
|
1476 {
|
|
|
1477 data: [40,50,10],
|
|
|
1478 backgroundColor: [
|
|
|
1479 "#1d222f",
|
|
|
1480 "#ffffff",
|
|
|
1481 "#f5d54a",
|
|
|
1482 ],
|
|
|
1483 hoverBackgroundColor: [
|
|
|
1484 "#1d222f",
|
|
|
1485 "#ffffff",
|
|
|
1486 "#f5d54a",
|
|
|
1487 ],
|
|
|
1488 borderColor: "#474b5e",
|
|
|
1489 }]
|
|
|
1490 };
|
|
|
1491 var chartJsDoughnut = new Chart(ctx4, {
|
|
|
1492 type: "doughnut",
|
|
|
1493 data: data4,
|
|
|
1494 options: {
|
|
|
1495 maintainAspectRatio: false,
|
|
|
1496 responsive: true,
|
|
|
1497 cutoutPercentage: 75,
|
|
|
1498 legend: {
|
|
|
1499 display: false,
|
|
|
1500 position: 'right',
|
|
|
1501 labels: {
|
|
|
1502 usePointStyle: true,
|
|
|
1503 padding: 40,
|
|
|
1504 }
|
|
|
1505 },
|
|
|
1506 tooltips: {
|
|
|
1507 mode: 'index',
|
|
|
1508 intersect: false,
|
|
|
1509 titleFontColor: "#000",
|
|
|
1510 titleMarginBottom: 10,
|
|
|
1511 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
1512 bodyFontColor: "#000",
|
|
|
1513 borderColor: "#e9e9e9",
|
|
|
1514 bodySpacing: 10,
|
|
|
1515 borderWidth: 2,
|
|
|
1516 xPadding: 10,
|
|
|
1517 yPadding: 10,
|
|
|
1518 },
|
|
|
1519 }
|
|
|
1520 });
|
|
|
1521 },
|
|
|
1522
|
|
|
1523 lineSingleChartJs: function() {
|
|
|
1524 var ctx = document.getElementById("chartJsLineSingle");
|
|
|
1525 if ( ctx === null ) return;
|
|
|
1526
|
|
|
1527 var ctx1 = document.getElementById("chartJsLineSingle").getContext("2d");
|
|
|
1528 var data1 = {
|
|
|
1529 labels: ["January", "February", "March", "April", "May"],
|
|
|
1530 datasets: [
|
|
|
1531 {
|
|
|
1532 label: "First",
|
|
|
1533 backgroundColor: "rgba(22, 161, 22, 0.4)",
|
|
|
1534 borderColor: "#16A116",
|
|
|
1535 pointBackgroundColor: "#16A116",
|
|
|
1536 pointBorderColor: "#fff",
|
|
|
1537 pointBorderWidth: "1",
|
|
|
1538 pointRadius: "5",
|
|
|
1539 pointHoverBackgroundColor: "#fff",
|
|
|
1540 borderWidth: "2",
|
|
|
1541 lineTension: "0",
|
|
|
1542 pointHoverBorderColor: "#16A116",
|
|
|
1543 data: [40, 30, 60, 50, 80]
|
|
|
1544 }
|
|
|
1545 ]
|
|
|
1546 };
|
|
|
1547
|
|
|
1548 var chartJsLine = new Chart(ctx1, {
|
|
|
1549 type: "line",
|
|
|
1550 data: data1,
|
|
|
1551 responsive: true,
|
|
|
1552 options: {
|
|
|
1553 maintainAspectRatio: false,
|
|
|
1554 legend: {
|
|
|
1555 display: false
|
|
|
1556 },
|
|
|
1557 tooltips: {
|
|
|
1558 mode: 'index',
|
|
|
1559 intersect: false,
|
|
|
1560 titleFontColor: "#000",
|
|
|
1561 titleMarginBottom: 10,
|
|
|
1562 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
1563 bodyFontColor: "#000",
|
|
|
1564 borderColor: "#e9e9e9",
|
|
|
1565 bodySpacing: 10,
|
|
|
1566 borderWidth: 2,
|
|
|
1567 xPadding: 10,
|
|
|
1568 yPadding: 10,
|
|
|
1569 },
|
|
|
1570 scales: {
|
|
|
1571 xAxes: [{
|
|
|
1572 display: false,
|
|
|
1573 gridLines: {
|
|
|
1574 display:false
|
|
|
1575 },
|
|
|
1576 ticks: {
|
|
|
1577 fontColor: "#9ca0a8",
|
|
|
1578 }
|
|
|
1579 }],
|
|
|
1580 yAxes: [{
|
|
|
1581 display: false,
|
|
|
1582 gridLines: {
|
|
|
1583 drawBorder: false,
|
|
|
1584 borderDash: [5, 10],
|
|
|
1585 display:true,
|
|
|
1586 },
|
|
|
1587 ticks: {
|
|
|
1588 fontColor: "#9ca0a8",
|
|
|
1589 beginAtZero: true,
|
|
|
1590 min: 10
|
|
|
1591 }
|
|
|
1592 }]
|
|
|
1593 }
|
|
|
1594 }
|
|
|
1595 });
|
|
|
1596 },
|
|
|
1597
|
|
|
1598 lineSingleGradientChartJs: function() {
|
|
|
1599 var ctx = document.getElementById("chartJsLineSingleGradient");
|
|
|
1600 if ( ctx === null ) return;
|
|
|
1601
|
|
|
1602 var ctx1 = document.getElementById("chartJsLineSingleGradient").getContext("2d");
|
|
|
1603 var gradient = ctx1.createLinearGradient(0, 0, 0, 400);
|
|
|
1604 gradient.addColorStop(0, 'rgba(26, 163, 255,.4)');
|
|
|
1605 gradient.addColorStop(1, 'rgba(26, 163, 255,0)');
|
|
|
1606
|
|
|
1607 var data1 = {
|
|
|
1608 labels: ["Jan", "Feb", "Mar", "April", "May"],
|
|
|
1609 datasets: [
|
|
|
1610 {
|
|
|
1611 label: "First",
|
|
|
1612 backgroundColor: gradient,
|
|
|
1613 borderColor: "#1aa3ff",
|
|
|
1614 pointBackgroundColor: "#1aa3ff",
|
|
|
1615 pointBorderColor: "#1aa3ff",
|
|
|
1616 pointBorderWidth: "1",
|
|
|
1617 pointRadius: "4",
|
|
|
1618 pointHoverBackgroundColor: "#1aa3ff",
|
|
|
1619 borderWidth: "2",
|
|
|
1620 pointHoverBorderColor: "#1aa3ff",
|
|
|
1621 data: [40, 30, 60, 50, 80]
|
|
|
1622 }
|
|
|
1623 ]
|
|
|
1624 };
|
|
|
1625
|
|
|
1626 var chartJsLine = new Chart(ctx1, {
|
|
|
1627 type: "line",
|
|
|
1628 data: data1,
|
|
|
1629 options: {
|
|
|
1630 responsive: true,
|
|
|
1631 maintainAspectRatio: false,
|
|
|
1632 legend: {
|
|
|
1633 display: false
|
|
|
1634 },
|
|
|
1635 tooltips: {
|
|
|
1636 mode: 'index',
|
|
|
1637 intersect: false,
|
|
|
1638 titleFontColor: "#000",
|
|
|
1639 titleMarginBottom: 10,
|
|
|
1640 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
1641 bodyFontColor: "#000",
|
|
|
1642 borderColor: "#e9e9e9",
|
|
|
1643 bodySpacing: 10,
|
|
|
1644 borderWidth: 2,
|
|
|
1645 xPadding: 10,
|
|
|
1646 yPadding: 10,
|
|
|
1647 },
|
|
|
1648 scales: {
|
|
|
1649 xAxes: [{
|
|
|
1650 display: true,
|
|
|
1651 gridLines: {
|
|
|
1652 display:false
|
|
|
1653 },
|
|
|
1654 ticks: {
|
|
|
1655 fontColor: "#9ca0a8",
|
|
|
1656 }
|
|
|
1657 }],
|
|
|
1658 yAxes: [{
|
|
|
1659 display: true,
|
|
|
1660 gridLines: {
|
|
|
1661 drawBorder: false,
|
|
|
1662 borderDash: [5, 10],
|
|
|
1663 display:true,
|
|
|
1664 },
|
|
|
1665 ticks: {
|
|
|
1666 fontColor: "#9ca0a8",
|
|
|
1667 beginAtZero: true,
|
|
|
1668 }
|
|
|
1669 }]
|
|
|
1670 }
|
|
|
1671 }
|
|
|
1672 });
|
|
|
1673 },
|
|
|
1674
|
|
|
1675 lineSingleDashboardChartJs: function() {
|
|
|
1676 var ctx = document.getElementById("chartJsLineSingleDashboard");
|
|
|
1677 if ( ctx === null ) return;
|
|
|
1678
|
|
|
1679 var ctx1 = document.getElementById("chartJsLineSingleDashboard").getContext("2d");
|
|
|
1680 var data1 = {
|
|
|
1681 labels: ["Jan", "Feb", "Mar", "April", "May", "june", "July", "Aug", "Sep"],
|
|
|
1682 datasets: [
|
|
|
1683 {
|
|
|
1684 label: "First",
|
|
|
1685 backgroundColor: "#18a95b",
|
|
|
1686 borderColor: "#18a95b",
|
|
|
1687 pointBackgroundColor: "#18a95b",
|
|
|
1688 pointBorderColor: "#fff",
|
|
|
1689 lineTension: "0",
|
|
|
1690 pointBorderWidth: "0",
|
|
|
1691 pointRadius: "0",
|
|
|
1692 pointHoverBackgroundColor: "#fff",
|
|
|
1693 borderWidth: "2",
|
|
|
1694 pointHoverBorderColor: "#18a95b",
|
|
|
1695 data: [0, 11, 22, 13, 35, 22, 10, 25, 0]
|
|
|
1696 },
|
|
|
1697 {
|
|
|
1698 label: "Second",
|
|
|
1699 backgroundColor: "#46e18b",
|
|
|
1700 borderColor: "#46e18b",
|
|
|
1701 pointBackgroundColor: "#46e18b",
|
|
|
1702 pointBorderColor: "#fff",
|
|
|
1703 pointBorderWidth: "0",
|
|
|
1704 lineTension: "0",
|
|
|
1705 pointRadius: "0",
|
|
|
1706 pointHoverBackgroundColor: "#fff",
|
|
|
1707 borderWidth: "2",
|
|
|
1708 pointHoverBorderColor: "#46e18b",
|
|
|
1709 data: [0, 24, 50, 40, 85, 45, 65, 33, 0]
|
|
|
1710 },
|
|
|
1711 {
|
|
|
1712 label: "Third",
|
|
|
1713 backgroundColor: "#c8ffdb",
|
|
|
1714 borderColor: "#c8ffdb",
|
|
|
1715 pointBackgroundColor: "#c8ffdb",
|
|
|
1716 pointBorderColor: "#fff",
|
|
|
1717 pointBorderWidth: "0",
|
|
|
1718 lineTension: "0",
|
|
|
1719 pointRadius: "0",
|
|
|
1720 pointHoverBackgroundColor: "#fff",
|
|
|
1721 borderWidth: "2",
|
|
|
1722 pointHoverBorderColor: "#c8ffdb",
|
|
|
1723 data: [0, 40, 10, 65, 45, 75, 40, 50, 0]
|
|
|
1724 },
|
|
|
1725
|
|
|
1726 ]
|
|
|
1727 };
|
|
|
1728
|
|
|
1729 var chartJsLine = new Chart(ctx1, {
|
|
|
1730 type: "line",
|
|
|
1731 data: data1,
|
|
|
1732 responsive: true,
|
|
|
1733 options: {
|
|
|
1734 maintainAspectRatio: false,
|
|
|
1735 legend: {
|
|
|
1736 display: false
|
|
|
1737 },
|
|
|
1738 tooltips: {
|
|
|
1739 mode: 'index',
|
|
|
1740 intersect: false,
|
|
|
1741 titleFontColor: "#000",
|
|
|
1742 titleMarginBottom: 10,
|
|
|
1743 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
1744 bodyFontColor: "#000",
|
|
|
1745 borderColor: "#e9e9e9",
|
|
|
1746 bodySpacing: 10,
|
|
|
1747 borderWidth: 2,
|
|
|
1748 xPadding: 10,
|
|
|
1749 yPadding: 10,
|
|
|
1750 },
|
|
|
1751 scales: {
|
|
|
1752 xAxes: [{
|
|
|
1753 display: true,
|
|
|
1754 gridLines: {
|
|
|
1755 display:false
|
|
|
1756 },
|
|
|
1757 ticks: {
|
|
|
1758 fontColor: "#9ca0a8",
|
|
|
1759 }
|
|
|
1760 }],
|
|
|
1761 yAxes: [{
|
|
|
1762 display: true,
|
|
|
1763 gridLines: {
|
|
|
1764 drawBorder: false,
|
|
|
1765 // tickMarkLength: 30,
|
|
|
1766 borderDash: [5, 10],
|
|
|
1767 display:true,
|
|
|
1768 },
|
|
|
1769 ticks: {
|
|
|
1770 fontColor: "#9ca0a8",
|
|
|
1771 }
|
|
|
1772 }]
|
|
|
1773 }
|
|
|
1774 }
|
|
|
1775 });
|
|
|
1776 },
|
|
|
1777
|
|
|
1778 barhorizontalDashboardChartJs: function() {
|
|
|
1779 var ctx = document.getElementById("chartJsHorizontalBarDashboard");
|
|
|
1780 if ( ctx === null ) return;
|
|
|
1781
|
|
|
1782 var ctx2 = document.getElementById("chartJsHorizontalBarDashboard").getContext("2d");
|
|
|
1783 var data2 = {
|
|
|
1784 labels: ["Data 1", "Data 2", "Data 3", "Data 4", "Data 5", "Data 6", "Data 7", "Data 8", "Data 9", "Data 10"],
|
|
|
1785 datasets: [
|
|
|
1786 {
|
|
|
1787 label: "My First dataset",
|
|
|
1788 backgroundColor: "#0040ff",
|
|
|
1789 strokeColor: "#0040ff",
|
|
|
1790 data: [18, 25, 19, 23, 17, 20, 25, 13, 18, 21]
|
|
|
1791 },
|
|
|
1792 {
|
|
|
1793 label: "My Second dataset",
|
|
|
1794 backgroundColor: "#1aa3ff",
|
|
|
1795 strokeColor: "#1aa3ff",
|
|
|
1796 data: [28, 32, 23, 32, 30, 27, 33, 20, 25, 30]
|
|
|
1797 },
|
|
|
1798 {
|
|
|
1799 label: "My Third dataset",
|
|
|
1800 backgroundColor: "#99e6ff",
|
|
|
1801 strokeColor: "#99e6ff",
|
|
|
1802 data: [39, 43, 27, 38, 45, 35, 45, 28, 33, 40]
|
|
|
1803 },
|
|
|
1804 ]
|
|
|
1805 };
|
|
|
1806
|
|
|
1807 var chartJsBar = new Chart(ctx2, {
|
|
|
1808 type: "bar",
|
|
|
1809 data: data2,
|
|
|
1810 options: {
|
|
|
1811 responsive: true,
|
|
|
1812 maintainAspectRatio: false,
|
|
|
1813 legend: {
|
|
|
1814 display: false
|
|
|
1815 },
|
|
|
1816 tooltips: {
|
|
|
1817 mode: 'index',
|
|
|
1818 intersect: false,
|
|
|
1819 titleFontColor: "#000",
|
|
|
1820 titleMarginBottom: 10,
|
|
|
1821 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
1822 bodyFontColor: "#000",
|
|
|
1823 borderColor: "#e9e9e9",
|
|
|
1824 bodySpacing: 10,
|
|
|
1825 borderWidth: 2,
|
|
|
1826 xPadding: 10,
|
|
|
1827 yPadding: 10,
|
|
|
1828 },
|
|
|
1829 scales: {
|
|
|
1830 xAxes: [{
|
|
|
1831 display: true,
|
|
|
1832 stacked: true,
|
|
|
1833 barThickness: 20,
|
|
|
1834 gridLines: {
|
|
|
1835 tickMarkLength: 15,
|
|
|
1836 drawBorder: false,
|
|
|
1837 display:false,
|
|
|
1838 borderDash: [5, 10],
|
|
|
1839 },
|
|
|
1840 ticks: {
|
|
|
1841 fontColor: "#9ca0a8",
|
|
|
1842 beginAtZero: true,
|
|
|
1843 min: 10,
|
|
|
1844 }
|
|
|
1845 }],
|
|
|
1846 yAxes: [{
|
|
|
1847 display: true,
|
|
|
1848 stacked: true,
|
|
|
1849 gridLines: {
|
|
|
1850 display:true,
|
|
|
1851 drawBorder: false,
|
|
|
1852 borderDash: [5, 10],
|
|
|
1853 },
|
|
|
1854 ticks: {
|
|
|
1855 fontColor: "#9ca0a8",
|
|
|
1856 }
|
|
|
1857 }]
|
|
|
1858 }
|
|
|
1859 },
|
|
|
1860 });
|
|
|
1861 },
|
|
|
1862
|
|
|
1863 barhorizontalChartJs: function() {
|
|
|
1864 var ctx = document.getElementById("chartJsHorizontalBar");
|
|
|
1865 if ( ctx === null ) return;
|
|
|
1866
|
|
|
1867 var ctx2 = document.getElementById("chartJsHorizontalBar").getContext("2d");
|
|
|
1868 var data2 = {
|
|
|
1869 labels: ["Data 1", "Data 2", "Data 3", "Data 4", "Data 5", "Data 6", "Data 7", "Data 8", "Data 9", "Data 10"],
|
|
|
1870 datasets: [
|
|
|
1871 {
|
|
|
1872 label: "My First dataset",
|
|
|
1873 backgroundColor: "#0040ff",
|
|
|
1874 strokeColor: "#0040ff",
|
|
|
1875 data: [18, 25, 19, 23, 17, 20, 25, 13, 18, 21]
|
|
|
1876 },
|
|
|
1877 {
|
|
|
1878 label: "My Second dataset",
|
|
|
1879 backgroundColor: "#1aa3ff",
|
|
|
1880 strokeColor: "#1aa3ff",
|
|
|
1881 data: [28, 32, 23, 32, 30, 27, 33, 20, 25, 30]
|
|
|
1882 },
|
|
|
1883 {
|
|
|
1884 label: "My Third dataset",
|
|
|
1885 backgroundColor: "#99e6ff",
|
|
|
1886 strokeColor: "#99e6ff",
|
|
|
1887 data: [39, 43, 27, 38, 45, 35, 45, 28, 33, 40]
|
|
|
1888 },
|
|
|
1889 ]
|
|
|
1890 };
|
|
|
1891
|
|
|
1892 var chartJsBar = new Chart(ctx2, {
|
|
|
1893 type: "bar",
|
|
|
1894 data: data2,
|
|
|
1895 options: {
|
|
|
1896 responsive: true,
|
|
|
1897 maintainAspectRatio: false,
|
|
|
1898 legend: {
|
|
|
1899 display: false
|
|
|
1900 },
|
|
|
1901 tooltips: {
|
|
|
1902 mode: 'index',
|
|
|
1903 intersect: false,
|
|
|
1904 titleFontColor: "#000",
|
|
|
1905 titleMarginBottom: 10,
|
|
|
1906 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
1907 bodyFontColor: "#000",
|
|
|
1908 borderColor: "#e9e9e9",
|
|
|
1909 bodySpacing: 10,
|
|
|
1910 borderWidth: 2,
|
|
|
1911 xPadding: 10,
|
|
|
1912 yPadding: 10,
|
|
|
1913 },
|
|
|
1914 scales: {
|
|
|
1915 xAxes: [{
|
|
|
1916 display: true,
|
|
|
1917 stacked: true,
|
|
|
1918 barThickness: 20,
|
|
|
1919 gridLines: {
|
|
|
1920 tickMarkLength: 15,
|
|
|
1921 drawBorder: false,
|
|
|
1922 display:false,
|
|
|
1923 borderDash: [5, 10],
|
|
|
1924 },
|
|
|
1925 ticks: {
|
|
|
1926 fontColor: "#9ca0a8",
|
|
|
1927 beginAtZero: true,
|
|
|
1928 min: 10,
|
|
|
1929 }
|
|
|
1930 }],
|
|
|
1931 yAxes: [{
|
|
|
1932 display: true,
|
|
|
1933 stacked: true,
|
|
|
1934 gridLines: {
|
|
|
1935 display:true,
|
|
|
1936 drawBorder: false,
|
|
|
1937 borderDash: [5, 10],
|
|
|
1938 },
|
|
|
1939 ticks: {
|
|
|
1940 fontColor: "#9ca0a8",
|
|
|
1941 }
|
|
|
1942 }]
|
|
|
1943 }
|
|
|
1944 },
|
|
|
1945 });
|
|
|
1946 },
|
|
|
1947
|
|
|
1948 barSingleChartJs: function() {
|
|
|
1949 var ctx = document.getElementById("chartJsBarSingle");
|
|
|
1950 if ( ctx === null ) return;
|
|
|
1951
|
|
|
1952 var ctx2 = document.getElementById("chartJsBarSingle").getContext("2d");
|
|
|
1953 var data2 = {
|
|
|
1954 labels: ["Jan", "Feb", "Mar", "April", "May", "June", "July"],
|
|
|
1955 datasets: [
|
|
|
1956 {
|
|
|
1957 label: "My First dataset",
|
|
|
1958 backgroundColor: "#5867c3",
|
|
|
1959 strokeColor: "#5867c3",
|
|
|
1960 data: [16, 60, 30, 50, 26, 70, 40]
|
|
|
1961 },
|
|
|
1962 {
|
|
|
1963 label: "My Second dataset",
|
|
|
1964 backgroundColor: "#00cedc",
|
|
|
1965 strokeColor: "#00cedc",
|
|
|
1966 data: [28, 48, 40, 19, 80, 27, 50]
|
|
|
1967 }
|
|
|
1968 ]
|
|
|
1969 };
|
|
|
1970
|
|
|
1971 var chartJsBar = new Chart(ctx2, {
|
|
|
1972 type: "bar",
|
|
|
1973 data: data2,
|
|
|
1974 options: {
|
|
|
1975 responsive: true,
|
|
|
1976 maintainAspectRatio: false,
|
|
|
1977 legend: {
|
|
|
1978 display: false
|
|
|
1979 },
|
|
|
1980 tooltips: {
|
|
|
1981 mode: 'index',
|
|
|
1982 intersect: false,
|
|
|
1983 titleFontColor: "#000",
|
|
|
1984 titleMarginBottom: 10,
|
|
|
1985 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
1986 bodyFontColor: "#000",
|
|
|
1987 borderColor: "#e9e9e9",
|
|
|
1988 bodySpacing: 10,
|
|
|
1989 borderWidth: 3,
|
|
|
1990 xPadding: 10,
|
|
|
1991 yPadding: 10,
|
|
|
1992 },
|
|
|
1993 scales: {
|
|
|
1994 xAxes: [{
|
|
|
1995 gridLines: {
|
|
|
1996 display:false
|
|
|
1997 }
|
|
|
1998 }],
|
|
|
1999 yAxes: [{
|
|
|
2000 gridLines: {
|
|
|
2001 display:false
|
|
|
2002 }
|
|
|
2003 }]
|
|
|
2004 }
|
|
|
2005 },
|
|
|
2006 responsive: true
|
|
|
2007 });
|
|
|
2008 },
|
|
|
2009
|
|
|
2010 areaMultiDashboardChartJs: function() {
|
|
|
2011 var ctx = document.getElementById("chartJsAreaMultiDashboard");
|
|
|
2012 if ( ctx === null ) return;
|
|
|
2013
|
|
|
2014 var ctx1 = document.getElementById("chartJsAreaMultiDashboard").getContext("2d");
|
|
|
2015 var data1 = {
|
|
|
2016 labels: ["Jan", "Feb", "Mar", "April", "May", "June", "July"],
|
|
|
2017 datasets: [
|
|
|
2018 {
|
|
|
2019 label: "First",
|
|
|
2020 backgroundColor: "transparent",
|
|
|
2021 borderColor: "#91ded3",
|
|
|
2022 pointStrokeColor: "#fff",
|
|
|
2023 pointRadius: 5,
|
|
|
2024 pointBorderColor: "#91ded3",
|
|
|
2025 pointBackgroundColor: "#91ded3",
|
|
|
2026 pointHoverBackgroundColor: "#91ded3",
|
|
|
2027 pointHoverBorderColor: "#91ded3",
|
|
|
2028 data: [0, 80, 40, 58, 20, 55, 10]
|
|
|
2029 },
|
|
|
2030 {
|
|
|
2031 label: "Second",
|
|
|
2032 backgroundColor: "transparent",
|
|
|
2033 borderColor: "#f6d54a",
|
|
|
2034 pointStrokeColor: "#fff",
|
|
|
2035 pointRadius: 5,
|
|
|
2036 pointBorderColor: "#f6d54a",
|
|
|
2037 pointBackgroundColor: "#f6d54a",
|
|
|
2038 pointHoverBackgroundColor: "#f6d54a",
|
|
|
2039 pointHoverBorderColor: "#f6d54a",
|
|
|
2040 data: [0, 48, 60, 19, 86, 27, 90]
|
|
|
2041 }
|
|
|
2042 ]
|
|
|
2043 };
|
|
|
2044
|
|
|
2045 var chartJsLine = new Chart(ctx1, {
|
|
|
2046 type: "line",
|
|
|
2047 data: data1,
|
|
|
2048 options: {
|
|
|
2049 responsive: true,
|
|
|
2050 maintainAspectRatio: false,
|
|
|
2051 legend: {
|
|
|
2052 display: false
|
|
|
2053 },
|
|
|
2054 tooltips: {
|
|
|
2055 mode: 'index',
|
|
|
2056 intersect: false,
|
|
|
2057 titleFontColor: "#000",
|
|
|
2058 titleMarginBottom: 10,
|
|
|
2059 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
2060 bodyFontColor: "#000",
|
|
|
2061 borderColor: "#e9e9e9",
|
|
|
2062 bodySpacing: 10,
|
|
|
2063 borderWidth: 2,
|
|
|
2064 xPadding: 10,
|
|
|
2065 yPadding: 10,
|
|
|
2066 },
|
|
|
2067 scales: {
|
|
|
2068 xAxes: [{
|
|
|
2069 display:true,
|
|
|
2070 gridLines: {
|
|
|
2071 display:false
|
|
|
2072 },
|
|
|
2073 ticks: {
|
|
|
2074 fontColor: "#9ca0a8",
|
|
|
2075 }
|
|
|
2076 }],
|
|
|
2077 yAxes: [{
|
|
|
2078 display:true,
|
|
|
2079 gridLines: {
|
|
|
2080 display:true
|
|
|
2081 },
|
|
|
2082 ticks: {
|
|
|
2083 fontColor: "#9ca0a8",
|
|
|
2084 }
|
|
|
2085 }]
|
|
|
2086 }
|
|
|
2087 }
|
|
|
2088 });
|
|
|
2089 },
|
|
|
2090
|
|
|
2091 lineMultiDashboardChartJs: function() {
|
|
|
2092 var ctx = document.getElementById("chartJsLineMultiDashboard");
|
|
|
2093 if ( ctx === null ) return;
|
|
|
2094
|
|
|
2095 var ctx1 = document.getElementById("chartJsLineMultiDashboard").getContext("2d");
|
|
|
2096 var data1 = {
|
|
|
2097 labels: ["Jan", "Feb", "Mar", "April", "May"],
|
|
|
2098 datasets: [
|
|
|
2099 {
|
|
|
2100 label: "First",
|
|
|
2101 fill: false,
|
|
|
2102 borderColor: "#16A116",
|
|
|
2103 pointBackgroundColor: "#16A116",
|
|
|
2104 pointBorderColor: "#fff",
|
|
|
2105 pointBorderWidth: "6",
|
|
|
2106 pointRadius: "8",
|
|
|
2107 pointHoverRadius: "6",
|
|
|
2108 pointHoverBackgroundColor: "#16A116",
|
|
|
2109 borderWidth: "1",
|
|
|
2110 lineTension: "0",
|
|
|
2111 pointHoverBorderColor: "#16A116",
|
|
|
2112 data: [15, 25, 60, 56, 70]
|
|
|
2113 },
|
|
|
2114 {
|
|
|
2115 label: "Second",
|
|
|
2116 fill: false,
|
|
|
2117 borderColor: "#56d5ff",
|
|
|
2118 pointBackgroundColor: "#56d5ff",
|
|
|
2119 pointBorderColor: "#fff",
|
|
|
2120 pointBorderWidth: "6",
|
|
|
2121 pointRadius: "8",
|
|
|
2122 pointHoverRadius: "6",
|
|
|
2123 pointHoverBackgroundColor: "#56d5ff",
|
|
|
2124 borderWidth: "1",
|
|
|
2125 lineTension: "0",
|
|
|
2126 pointHoverBorderColor: "#56d5ff",
|
|
|
2127 data: [55, 50, 10, 75, 60]
|
|
|
2128 },
|
|
|
2129 {
|
|
|
2130 label: "Third",
|
|
|
2131 fill: false,
|
|
|
2132 borderColor: "#e6614f",
|
|
|
2133 pointBackgroundColor: "#e6614f",
|
|
|
2134 pointBorderColor: "#fff",
|
|
|
2135 pointBorderWidth: "6",
|
|
|
2136 pointRadius: "8",
|
|
|
2137 pointHoverRadius: "6",
|
|
|
2138 pointHoverBackgroundColor: "#e6614f",
|
|
|
2139 borderWidth: "1",
|
|
|
2140 lineTension: "0",
|
|
|
2141 pointHoverBorderColor: "#e6614f",
|
|
|
2142 data: [40, 10, 45, 30, 40]
|
|
|
2143 }
|
|
|
2144 ]
|
|
|
2145 };
|
|
|
2146
|
|
|
2147 var chartJsLine = new Chart(ctx1, {
|
|
|
2148 type: "line",
|
|
|
2149 data: data1,
|
|
|
2150 options: {
|
|
|
2151 responsive: true,
|
|
|
2152 maintainAspectRatio: false,
|
|
|
2153 legend: {
|
|
|
2154 display: false
|
|
|
2155 },
|
|
|
2156 tooltips: {
|
|
|
2157 mode: 'index',
|
|
|
2158 intersect: false,
|
|
|
2159 titleFontColor: "#000",
|
|
|
2160 titleMarginBottom: 10,
|
|
|
2161 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
2162 bodyFontColor: "#000",
|
|
|
2163 borderColor: "#e9e9e9",
|
|
|
2164 bodySpacing: 10,
|
|
|
2165 borderWidth: 2,
|
|
|
2166 xPadding: 10,
|
|
|
2167 yPadding: 10,
|
|
|
2168 },
|
|
|
2169 scales: {
|
|
|
2170 xAxes: [{
|
|
|
2171 display: true,
|
|
|
2172 gridLines: {
|
|
|
2173 drawBorder: false,
|
|
|
2174 display:false
|
|
|
2175 },
|
|
|
2176 ticks: {
|
|
|
2177 fontColor: "#9ca0a8",
|
|
|
2178 }
|
|
|
2179 }],
|
|
|
2180 yAxes: [{
|
|
|
2181 display: true,
|
|
|
2182 gridLines: {
|
|
|
2183 drawBorder: false,
|
|
|
2184 borderDash: [5, 10],
|
|
|
2185 display:true,
|
|
|
2186 },
|
|
|
2187 ticks: {
|
|
|
2188 fontColor: "#9ca0a8",
|
|
|
2189 beginAtZero: true,
|
|
|
2190 min: 10
|
|
|
2191 }
|
|
|
2192 }]
|
|
|
2193 }
|
|
|
2194 }
|
|
|
2195 });
|
|
|
2196 },
|
|
|
2197
|
|
|
2198 areaMultiChartJs: function() {
|
|
|
2199 var ctx = document.getElementById("chartJsAreaMulti");
|
|
|
2200 if ( ctx === null ) return;
|
|
|
2201
|
|
|
2202 var ctx1 = document.getElementById("chartJsAreaMulti").getContext("2d");
|
|
|
2203 var data1 = {
|
|
|
2204 labels: ["January", "February", "March", "April", "May"],
|
|
|
2205 datasets: [
|
|
|
2206 {
|
|
|
2207 label: "First",
|
|
|
2208 backgroundColor: "rgba(51, 153, 255, 0.4)",
|
|
|
2209 borderColor: "#3399ff",
|
|
|
2210 borderDash: [5, 5],
|
|
|
2211 pointBackgroundColor: "#3399ff",
|
|
|
2212 pointBorderColor: "#fff",
|
|
|
2213 pointBorderWidth: "1",
|
|
|
2214 pointRadius: "5",
|
|
|
2215 pointHoverBackgroundColor: "#fff",
|
|
|
2216 borderWidth: "2",
|
|
|
2217 lineTension: "0",
|
|
|
2218 pointHoverBorderColor: "#3399ff",
|
|
|
2219 data: [20, 10, 30, 20, 50]
|
|
|
2220 },
|
|
|
2221 {
|
|
|
2222 label: "Second",
|
|
|
2223 backgroundColor: "rgba(229, 200, 16, 0.4)",
|
|
|
2224 borderColor: "#e5c810",
|
|
|
2225 borderDash: [5, 5],
|
|
|
2226 pointBackgroundColor: "#e5c810",
|
|
|
2227 pointBorderColor: "#fff",
|
|
|
2228 pointBorderWidth: "1",
|
|
|
2229 pointRadius: "5",
|
|
|
2230 pointHoverBackgroundColor: "#fff",
|
|
|
2231 borderWidth: "2",
|
|
|
2232 lineTension: "0",
|
|
|
2233 pointHoverBorderColor: "#e5c810",
|
|
|
2234 data: [30, 20, 40, 30, 60]
|
|
|
2235 }
|
|
|
2236 ]
|
|
|
2237 };
|
|
|
2238
|
|
|
2239 var chartJsLine = new Chart(ctx1, {
|
|
|
2240 type: "line",
|
|
|
2241 data: data1,
|
|
|
2242 responsive: true,
|
|
|
2243 options: {
|
|
|
2244 legend: {
|
|
|
2245 display: false
|
|
|
2246 },
|
|
|
2247 tooltips: {
|
|
|
2248 mode: 'index',
|
|
|
2249 intersect: false,
|
|
|
2250 titleFontColor: "#000",
|
|
|
2251 titleMarginBottom: 10,
|
|
|
2252 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
2253 bodyFontColor: "#000",
|
|
|
2254 borderColor: "#e9e9e9",
|
|
|
2255 bodySpacing: 10,
|
|
|
2256 borderWidth: 2,
|
|
|
2257 xPadding: 10,
|
|
|
2258 yPadding: 10,
|
|
|
2259 },
|
|
|
2260 scales: {
|
|
|
2261 xAxes: [{
|
|
|
2262 display: false,
|
|
|
2263 gridLines: {
|
|
|
2264 display:false
|
|
|
2265 },
|
|
|
2266 ticks: {
|
|
|
2267 fontColor: "#9ca0a8",
|
|
|
2268 }
|
|
|
2269 }],
|
|
|
2270 yAxes: [{
|
|
|
2271 display: false,
|
|
|
2272 gridLines: {
|
|
|
2273 borderDash: [5, 10],
|
|
|
2274 display:true,
|
|
|
2275 },
|
|
|
2276 ticks: {
|
|
|
2277 fontColor: "#9ca0a8",
|
|
|
2278 beginAtZero: true,
|
|
|
2279 max: 60
|
|
|
2280 }
|
|
|
2281 }]
|
|
|
2282 }
|
|
|
2283 }
|
|
|
2284 });
|
|
|
2285 },
|
|
|
2286
|
|
|
2287 lineMultiChartJs: function() {
|
|
|
2288 var ctx = document.getElementById("chartJsLineMulti");
|
|
|
2289 if ( ctx === null ) return;
|
|
|
2290
|
|
|
2291 var ctx1 = document.getElementById("chartJsLineMulti").getContext("2d");
|
|
|
2292 var data1 = {
|
|
|
2293 labels: ["January", "February", "March", "April", "May"],
|
|
|
2294 datasets: [
|
|
|
2295 {
|
|
|
2296 label: "First",
|
|
|
2297 fill: false,
|
|
|
2298 borderColor: "#16A116",
|
|
|
2299 pointBackgroundColor: "#16A116",
|
|
|
2300 pointBorderColor: "#fff",
|
|
|
2301 pointBorderWidth: "4",
|
|
|
2302 pointHoverBorderWidth: "2",
|
|
|
2303 pointRadius: "6",
|
|
|
2304 pointHoverBackgroundColor: "#fff",
|
|
|
2305 borderWidth: "1",
|
|
|
2306 lineTension: "0",
|
|
|
2307 pointHoverBorderColor: "rgba(88, 103, 195, 0.4)",
|
|
|
2308 data: [15, 25, 60, 56, 70]
|
|
|
2309 },
|
|
|
2310 {
|
|
|
2311 label: "Second",
|
|
|
2312 fill: false,
|
|
|
2313 borderColor: "#56d5ff",
|
|
|
2314 pointBackgroundColor: "#56d5ff",
|
|
|
2315 pointBorderColor: "#fff",
|
|
|
2316 pointBorderWidth: "4",
|
|
|
2317 pointHoverBorderWidth: "2",
|
|
|
2318 pointRadius: "6",
|
|
|
2319 pointHoverBackgroundColor: "#fff",
|
|
|
2320 borderWidth: "1",
|
|
|
2321 lineTension: "0",
|
|
|
2322 pointHoverBorderColor: "rgba(88, 103, 195, 0.4)",
|
|
|
2323 data: [55, 50, 10, 75, 60]
|
|
|
2324 }
|
|
|
2325 ]
|
|
|
2326 };
|
|
|
2327
|
|
|
2328 var chartJsLine = new Chart(ctx1, {
|
|
|
2329 type: "line",
|
|
|
2330 data: data1,
|
|
|
2331 responsive: true,
|
|
|
2332 options: {
|
|
|
2333 maintainAspectRatio: false,
|
|
|
2334 legend: {
|
|
|
2335 display: false
|
|
|
2336 },
|
|
|
2337 tooltips: {
|
|
|
2338 mode: 'index',
|
|
|
2339 intersect: false,
|
|
|
2340 titleFontColor: "#000",
|
|
|
2341 titleMarginBottom: 10,
|
|
|
2342 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
2343 bodyFontColor: "#000",
|
|
|
2344 borderColor: "#e9e9e9",
|
|
|
2345 bodySpacing: 10,
|
|
|
2346 borderWidth: 2,
|
|
|
2347 xPadding: 10,
|
|
|
2348 yPadding: 10,
|
|
|
2349 },
|
|
|
2350 scales: {
|
|
|
2351 xAxes: [{
|
|
|
2352 display: false,
|
|
|
2353 gridLines: {
|
|
|
2354 drawBorder: false,
|
|
|
2355 display:false
|
|
|
2356 },
|
|
|
2357 ticks: {
|
|
|
2358 fontColor: "#9ca0a8",
|
|
|
2359 }
|
|
|
2360 }],
|
|
|
2361 yAxes: [{
|
|
|
2362 display: false,
|
|
|
2363 gridLines: {
|
|
|
2364 drawBorder: false,
|
|
|
2365 borderDash: [5, 10],
|
|
|
2366 display:true,
|
|
|
2367 },
|
|
|
2368 ticks: {
|
|
|
2369 fontColor: "#9ca0a8",
|
|
|
2370 beginAtZero: true,
|
|
|
2371 min: 10
|
|
|
2372 }
|
|
|
2373 }]
|
|
|
2374 }
|
|
|
2375 }
|
|
|
2376 });
|
|
|
2377 },
|
|
|
2378
|
|
|
2379 lineMultiSmallChartJs: function() {
|
|
|
2380 var ctx = document.getElementById("chartJsAreaMultiSmall");
|
|
|
2381 if ( ctx === null ) return;
|
|
|
2382
|
|
|
2383 var ctx1 = document.getElementById("chartJsAreaMultiSmall").getContext("2d");
|
|
|
2384 var data1 = {
|
|
|
2385 labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
|
2386 datasets: [
|
|
|
2387 {
|
|
|
2388 label: "First",
|
|
|
2389 backgroundColor: "#91ded3",
|
|
|
2390 borderColor: "#91ded3",
|
|
|
2391 pointStrokeColor: "#fff",
|
|
|
2392 pointRadius: 0,
|
|
|
2393 pointBorderColor: "#fff",
|
|
|
2394 pointHoverBackgroundColor: "#fff",
|
|
|
2395 pointHoverBorderColor: "#91ded3",
|
|
|
2396 data: [0, 80, 40, 58, 20, 55, 10]
|
|
|
2397 },
|
|
|
2398 {
|
|
|
2399 label: "Second",
|
|
|
2400 backgroundColor: "#f6d54a",
|
|
|
2401 borderColor: "#f6d54a",
|
|
|
2402 pointStrokeColor: "#fff",
|
|
|
2403 pointRadius: 0,
|
|
|
2404 pointBorderColor: "#fff",
|
|
|
2405 pointHoverBackgroundColor: "#fff",
|
|
|
2406 pointHoverBorderColor: "#f6d54a",
|
|
|
2407 data: [0, 48, 60, 19, 86, 27, 90]
|
|
|
2408 }
|
|
|
2409 ]
|
|
|
2410 };
|
|
|
2411
|
|
|
2412 var chartJsLine = new Chart(ctx1, {
|
|
|
2413 type: "line",
|
|
|
2414 data: data1,
|
|
|
2415 responsive: true,
|
|
|
2416 options: {
|
|
|
2417 legend: {
|
|
|
2418 display: false
|
|
|
2419 },
|
|
|
2420 tooltips: {
|
|
|
2421 mode: 'index',
|
|
|
2422 intersect: false,
|
|
|
2423 titleFontColor: "#000",
|
|
|
2424 titleMarginBottom: 10,
|
|
|
2425 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
2426 bodyFontColor: "#000",
|
|
|
2427 borderColor: "#e9e9e9",
|
|
|
2428 bodySpacing: 10,
|
|
|
2429 borderWidth: 2,
|
|
|
2430 xPadding: 10,
|
|
|
2431 yPadding: 10,
|
|
|
2432 },
|
|
|
2433 scales: {
|
|
|
2434 xAxes: [{
|
|
|
2435 display:false,
|
|
|
2436 gridLines: {
|
|
|
2437 display:false
|
|
|
2438 },
|
|
|
2439 ticks: {
|
|
|
2440 fontColor: "#9ca0a8",
|
|
|
2441 }
|
|
|
2442 }],
|
|
|
2443 yAxes: [{
|
|
|
2444 display:false,
|
|
|
2445 gridLines: {
|
|
|
2446 display:false
|
|
|
2447 },
|
|
|
2448 ticks: {
|
|
|
2449 fontColor: "#9ca0a8",
|
|
|
2450 }
|
|
|
2451 }]
|
|
|
2452 }
|
|
|
2453 }
|
|
|
2454 });
|
|
|
2455 },
|
|
|
2456
|
|
|
2457 lineChartJs: function() {
|
|
|
2458 var ctx = document.getElementById("chartJsLine");
|
|
|
2459 if ( ctx === null ) return;
|
|
|
2460
|
|
|
2461 var ctx1 = document.getElementById("chartJsLine").getContext("2d");
|
|
|
2462 var data1 = {
|
|
|
2463 labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
|
2464 datasets: [
|
|
|
2465 {
|
|
|
2466 label: "First",
|
|
|
2467 fill: false,
|
|
|
2468 backgroundColor: "transparent",
|
|
|
2469 lineTension: "0",
|
|
|
2470 borderWidth: "2",
|
|
|
2471 borderColor: "#99ebff",
|
|
|
2472 pointColor: "#99ebff",
|
|
|
2473 pointBackgroundColor: "#99ebff",
|
|
|
2474 pointBorderColor: "#fff",
|
|
|
2475 pointBorderWidth: "4",
|
|
|
2476 pointRadius: "7",
|
|
|
2477 pointHoverRadius: "9" ,
|
|
|
2478 pointHoverBorderColor: "#fff",
|
|
|
2479 data: [20, 30, 80, 20, 40, 10, 60]
|
|
|
2480 },
|
|
|
2481 {
|
|
|
2482 label: "Second",
|
|
|
2483 fill: false,
|
|
|
2484 lineTension: "0",
|
|
|
2485 borderWidth: "2",
|
|
|
2486 backgroundColor: "transparent",
|
|
|
2487 borderColor: "#ffcc66",
|
|
|
2488 pointBorderColor: "#ffcc66",
|
|
|
2489 pointBackgroundColor: "#ffcc66",
|
|
|
2490 pointBorderColor: "#fff",
|
|
|
2491 pointBorderWidth: "4",
|
|
|
2492 pointRadius: "7",
|
|
|
2493 pointHoverRadius: "9" ,
|
|
|
2494 pointHoverBorderColor: "#fff",
|
|
|
2495 data: [60, 10, 40, 30, 80, 30, 20]
|
|
|
2496 },
|
|
|
2497 {
|
|
|
2498 label: "Third",
|
|
|
2499 fill: false,
|
|
|
2500 lineTension: "0",
|
|
|
2501 borderWidth: "2",
|
|
|
2502 backgroundColor: "transparent",
|
|
|
2503 borderColor: "#d580ff",
|
|
|
2504 pointBorderColor: "#d580ff",
|
|
|
2505 pointBackgroundColor: "#d580ff",
|
|
|
2506 pointBorderColor: "#fff",
|
|
|
2507 pointBorderWidth: "4",
|
|
|
2508 pointRadius: "7",
|
|
|
2509 pointHoverRadius: "9" ,
|
|
|
2510 pointHoverBorderColor: "#fff",
|
|
|
2511 data: [32, 50, 20, 65, 50, 55, 30]
|
|
|
2512 }
|
|
|
2513 ]
|
|
|
2514 };
|
|
|
2515
|
|
|
2516 var chartJsLine = new Chart(ctx1, {
|
|
|
2517 type: "line",
|
|
|
2518 data: data1,
|
|
|
2519 options: {
|
|
|
2520 responsive: true,
|
|
|
2521 maintainAspectRatio: false,
|
|
|
2522 legend: {
|
|
|
2523 display: false
|
|
|
2524 },
|
|
|
2525 tooltips: {
|
|
|
2526 mode: 'index',
|
|
|
2527 intersect: false,
|
|
|
2528 titleFontColor: "#000",
|
|
|
2529 titleMarginBottom: 10,
|
|
|
2530 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
2531 bodyFontColor: "#000",
|
|
|
2532 borderColor: "#e9e9e9",
|
|
|
2533 bodySpacing: 10,
|
|
|
2534 borderWidth: 2,
|
|
|
2535 xPadding: 10,
|
|
|
2536 yPadding: 10,
|
|
|
2537 },
|
|
|
2538 scales: {
|
|
|
2539 xAxes: [{
|
|
|
2540 gridLines: {
|
|
|
2541 display:false
|
|
|
2542 },
|
|
|
2543 ticks: {
|
|
|
2544 fontColor: "#9ca0a8",
|
|
|
2545 }
|
|
|
2546 }],
|
|
|
2547 yAxes: [{
|
|
|
2548 gridLines: {
|
|
|
2549 display:false
|
|
|
2550 },
|
|
|
2551 ticks: {
|
|
|
2552 fontColor: "#9ca0a8",
|
|
|
2553 }
|
|
|
2554 }]
|
|
|
2555 }
|
|
|
2556 }
|
|
|
2557 });
|
|
|
2558 },
|
|
|
2559
|
|
|
2560 areaChartJs: function() {
|
|
|
2561 var ctx = document.getElementById("chartJsArea");
|
|
|
2562 if ( ctx === null ) return;
|
|
|
2563
|
|
|
2564 var ctx1 = document.getElementById("chartJsArea").getContext("2d");
|
|
|
2565 var data1 = {
|
|
|
2566 labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
|
2567 datasets: [
|
|
|
2568 {
|
|
|
2569 label: "First",
|
|
|
2570 backgroundColor: "rgba(88, 103, 195, 0.4)",
|
|
|
2571 borderColor: "rgba(88, 103, 195, 0.4)",
|
|
|
2572 pointStrokeColor: "#fff",
|
|
|
2573 pointBorderColor: "#fff",
|
|
|
2574 pointHoverBackgroundColor: "#fff",
|
|
|
2575 pointHoverBorderColor: "rgba(88, 103, 195, 0.4)",
|
|
|
2576 data: [0, 80, 40, 58, 20, 55, 10]
|
|
|
2577 },
|
|
|
2578 {
|
|
|
2579 label: "Second",
|
|
|
2580 backgroundColor: "rgba(255, 128, 111, 0.4)",
|
|
|
2581 borderColor: "rgba(255, 128, 111, 0.4)",
|
|
|
2582 pointStrokeColor: "#fff",
|
|
|
2583 pointBorderColor: "#fff",
|
|
|
2584 pointHoverBackgroundColor: "#fff",
|
|
|
2585 pointHoverBorderColor: "rgba(255, 128, 111, 0.4)",
|
|
|
2586 data: [28, 48, 60, 19, 86, 27, 90]
|
|
|
2587 }
|
|
|
2588 ]
|
|
|
2589 };
|
|
|
2590
|
|
|
2591 var chartJsArea = new Chart(ctx1, {
|
|
|
2592 type: "line",
|
|
|
2593 data: data1,
|
|
|
2594 responsive: true,
|
|
|
2595 options: {
|
|
|
2596 legend: {
|
|
|
2597 display: false
|
|
|
2598 },
|
|
|
2599 tooltips: {
|
|
|
2600 mode: 'index',
|
|
|
2601 intersect: false,
|
|
|
2602 titleFontColor: "#000",
|
|
|
2603 titleMarginBottom: 10,
|
|
|
2604 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
2605 bodyFontColor: "#000",
|
|
|
2606 borderColor: "#e9e9e9",
|
|
|
2607 bodySpacing: 10,
|
|
|
2608 borderWidth: 2,
|
|
|
2609 xPadding: 10,
|
|
|
2610 yPadding: 10,
|
|
|
2611 },
|
|
|
2612 scales: {
|
|
|
2613 xAxes: [{
|
|
|
2614 gridLines: {
|
|
|
2615 display:false
|
|
|
2616 },
|
|
|
2617 ticks: {
|
|
|
2618 fontColor: "#9ca0a8",
|
|
|
2619 }
|
|
|
2620 }],
|
|
|
2621 yAxes: [{
|
|
|
2622 gridLines: {
|
|
|
2623 display:false
|
|
|
2624 },
|
|
|
2625 ticks: {
|
|
|
2626 fontColor: "#9ca0a8",
|
|
|
2627 }
|
|
|
2628 }]
|
|
|
2629 }
|
|
|
2630 }
|
|
|
2631 });
|
|
|
2632 },
|
|
|
2633
|
|
|
2634 barChartJs: function() {
|
|
|
2635 var ctx = document.getElementById("chartJsBar");
|
|
|
2636 if ( ctx === null ) return;
|
|
|
2637
|
|
|
2638 var ctx2 = document.getElementById("chartJsBar").getContext("2d");
|
|
|
2639 var data2 = {
|
|
|
2640 labels: ["Jan", "Feb", "Mar", "April", "May", "June", "July"],
|
|
|
2641 datasets: [
|
|
|
2642 {
|
|
|
2643 label: "My First dataset",
|
|
|
2644 backgroundColor: "#5867c3",
|
|
|
2645 strokeColor: "#5867c3",
|
|
|
2646 data: [16, 60, 30, 50, 26, 70, 40]
|
|
|
2647 },
|
|
|
2648 {
|
|
|
2649 label: "My Second dataset",
|
|
|
2650 backgroundColor: "#00cedc",
|
|
|
2651 strokeColor: "#00cedc",
|
|
|
2652 data: [28, 48, 40, 19, 80, 27, 50]
|
|
|
2653 }
|
|
|
2654 ]
|
|
|
2655 };
|
|
|
2656
|
|
|
2657 var chartJsBar = new Chart(ctx2, {
|
|
|
2658 type: "bar",
|
|
|
2659 data: data2,
|
|
|
2660 options: {
|
|
|
2661 responsive: true,
|
|
|
2662 maintainAspectRatio: false,
|
|
|
2663 legend: {
|
|
|
2664 display: false
|
|
|
2665 },
|
|
|
2666 tooltips: {
|
|
|
2667 mode: 'index',
|
|
|
2668 intersect: false,
|
|
|
2669 titleFontColor: "#000",
|
|
|
2670 titleMarginBottom: 10,
|
|
|
2671 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
2672 bodyFontColor: "#000",
|
|
|
2673 borderColor: "#e9e9e9",
|
|
|
2674 bodySpacing: 10,
|
|
|
2675 borderWidth: 3,
|
|
|
2676 xPadding: 10,
|
|
|
2677 yPadding: 10,
|
|
|
2678 },
|
|
|
2679 scales: {
|
|
|
2680 xAxes: [{
|
|
|
2681 gridLines: {
|
|
|
2682 display:false
|
|
|
2683 }
|
|
|
2684 }],
|
|
|
2685 yAxes: [{
|
|
|
2686 gridLines: {
|
|
|
2687 display:false
|
|
|
2688 }
|
|
|
2689 }]
|
|
|
2690 }
|
|
|
2691 },
|
|
|
2692 responsive: true
|
|
|
2693 });
|
|
|
2694 },
|
|
|
2695
|
|
|
2696 pieChartJs: function() {
|
|
|
2697 var ctx = document.getElementById("chartJsPie");
|
|
|
2698 if ( ctx === null ) return;
|
|
|
2699
|
|
|
2700 var ctx3 = document.getElementById("chartJsPie").getContext("2d");
|
|
|
2701 var data3 = {
|
|
|
2702 labels: [
|
|
|
2703 "Site A",
|
|
|
2704 "Site B",
|
|
|
2705 "Site C",
|
|
|
2706 "Site D",
|
|
|
2707 ],
|
|
|
2708 datasets: [
|
|
|
2709 {
|
|
|
2710 data: [25,10,25,40],
|
|
|
2711 backgroundColor: [
|
|
|
2712 "#51bcd4",
|
|
|
2713 "#d75151",
|
|
|
2714 "#eace52",
|
|
|
2715 "#dce5e7",
|
|
|
2716 ],
|
|
|
2717 hoverBackgroundColor: [
|
|
|
2718 "#51bcd4",
|
|
|
2719 "#d75151",
|
|
|
2720 "#eace52",
|
|
|
2721 "#dce5e7",
|
|
|
2722 ],
|
|
|
2723 hoverBorderColor: '#fff',
|
|
|
2724 borderWidth: 8,
|
|
|
2725 }]
|
|
|
2726 };
|
|
|
2727 var chartJsPie = new Chart(ctx3,{
|
|
|
2728 type: "pie",
|
|
|
2729 data: data3,
|
|
|
2730 options: {
|
|
|
2731 responsive: true,
|
|
|
2732 maintainAspectRatio: false,
|
|
|
2733 legend: {
|
|
|
2734 display: false,
|
|
|
2735 },
|
|
|
2736 tooltips: {
|
|
|
2737 mode: 'index',
|
|
|
2738 intersect: false,
|
|
|
2739 titleFontColor: "#000",
|
|
|
2740 titleMarginBottom: 0,
|
|
|
2741 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
2742 bodyFontColor: "#000",
|
|
|
2743 borderColor: "#e9e9e9",
|
|
|
2744 bodySpacing: 0,
|
|
|
2745 borderWidth: 2,
|
|
|
2746 xPadding: 10,
|
|
|
2747 yPadding: 10,
|
|
|
2748 },
|
|
|
2749 }
|
|
|
2750 });
|
|
|
2751 },
|
|
|
2752
|
|
|
2753 doughnutChartJs: function() {
|
|
|
2754 var ctx = document.getElementById("chartJsDoughnut");
|
|
|
2755 if ( ctx === null ) return;
|
|
|
2756
|
|
|
2757 var ctx4 = document.getElementById("chartJsDoughnut").getContext("2d");
|
|
|
2758 var data4 = {
|
|
|
2759 labels: [
|
|
|
2760 "Green",
|
|
|
2761 "Blue",
|
|
|
2762 "Orange",
|
|
|
2763 "Red",
|
|
|
2764
|
|
|
2765 ],
|
|
|
2766 datasets: [
|
|
|
2767 {
|
|
|
2768 data: [300,90,100,170],
|
|
|
2769 backgroundColor: [
|
|
|
2770 "#05d05b",
|
|
|
2771 "#00c1dd",
|
|
|
2772 "#ffb701",
|
|
|
2773 "#ff6161",
|
|
|
2774
|
|
|
2775 ],
|
|
|
2776 hoverBackgroundColor: [
|
|
|
2777 "#05d05b",
|
|
|
2778 "#00c1dd",
|
|
|
2779 "#ffb701",
|
|
|
2780 "#ff6161",
|
|
|
2781
|
|
|
2782 ]
|
|
|
2783 }]
|
|
|
2784 };
|
|
|
2785 var chartJsDoughnut = new Chart(ctx4, {
|
|
|
2786 type: "doughnut",
|
|
|
2787 data: data4,
|
|
|
2788 responsive: true,
|
|
|
2789 options: {
|
|
|
2790 legend: {
|
|
|
2791 display: false
|
|
|
2792 },
|
|
|
2793 tooltips: {
|
|
|
2794 mode: 'index',
|
|
|
2795 intersect: false,
|
|
|
2796 titleFontColor: "#000",
|
|
|
2797 titleMarginBottom: 10,
|
|
|
2798 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
2799 bodyFontColor: "#000",
|
|
|
2800 borderColor: "#e9e9e9",
|
|
|
2801 bodySpacing: 10,
|
|
|
2802 borderWidth: 2,
|
|
|
2803 xPadding: 10,
|
|
|
2804 yPadding: 10,
|
|
|
2805 },
|
|
|
2806 }
|
|
|
2807 });
|
|
|
2808 },
|
|
|
2809
|
|
|
2810 polarAreaChartJs: function() {
|
|
|
2811 var ctx = document.getElementById("chartJsPolarArea");
|
|
|
2812 if ( ctx === null ) return;
|
|
|
2813
|
|
|
2814 var ctx5 = document.getElementById("chartJsPolarArea").getContext("2d");
|
|
|
2815 var data5 = {
|
|
|
2816 labels: [
|
|
|
2817 "Blue",
|
|
|
2818 "Megna",
|
|
|
2819 "Orange",
|
|
|
2820 "Grey"
|
|
|
2821 ],
|
|
|
2822 datasets: [
|
|
|
2823 {
|
|
|
2824 data: [300,250,200,100],
|
|
|
2825 backgroundColor: [
|
|
|
2826 "rgba(138,43,226,.6)",
|
|
|
2827 "rgba(0,250,154,.6)",
|
|
|
2828 "rgba(255,165,0,.6)",
|
|
|
2829 "rgba(169,169,169,.6)"
|
|
|
2830 ],
|
|
|
2831 hoverBackgroundColor: [
|
|
|
2832 "rgba(138,43,226,.6)",
|
|
|
2833 "rgba(0,250,154,.6)",
|
|
|
2834 "rgba(255,165,0,.6)",
|
|
|
2835 "rgba(169,169,169,.6)"
|
|
|
2836 ]
|
|
|
2837 }]
|
|
|
2838 };
|
|
|
2839 var chartJsPolarArea = new Chart(ctx5, {
|
|
|
2840 type: "polarArea",
|
|
|
2841 data: data5,
|
|
|
2842 options: {
|
|
|
2843 legend: {
|
|
|
2844 display: false
|
|
|
2845 },
|
|
|
2846 scale: {
|
|
|
2847 display:true,
|
|
|
2848 },
|
|
|
2849 tooltips: {
|
|
|
2850 mode: 'index',
|
|
|
2851 intersect: false,
|
|
|
2852 titleFontColor: "#000",
|
|
|
2853 titleMarginBottom: 10,
|
|
|
2854 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
2855 bodyFontColor: "#000",
|
|
|
2856 borderColor: "#e9e9e9",
|
|
|
2857 bodySpacing: 10,
|
|
|
2858 borderWidth: 2,
|
|
|
2859 xPadding: 10,
|
|
|
2860 yPadding: 10,
|
|
|
2861 },
|
|
|
2862 },
|
|
|
2863 });
|
|
|
2864 },
|
|
|
2865
|
|
|
2866 radarChartJs: function() {
|
|
|
2867 var ctx = document.getElementById("chartJsRadar");
|
|
|
2868 if ( ctx === null ) return;
|
|
|
2869
|
|
|
2870 var ctx6 = document.getElementById("chartJsRadar").getContext("2d");
|
|
|
2871 var data6 = {
|
|
|
2872 labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
|
|
|
2873 datasets: [
|
|
|
2874 {
|
|
|
2875
|
|
|
2876 label: "My Second dataset",
|
|
|
2877 backgroundColor: "rgba(255,118,118,0.8)",
|
|
|
2878 strokeColor: "rgba(255,118,118,1)",
|
|
|
2879 pointColor: "rgba(255,118,118,1)",
|
|
|
2880 pointStrokeColor: "#fff",
|
|
|
2881 pointHighlightFill: "#fff",
|
|
|
2882 pointHighlightStroke: "rgba(255,118,118,1)",
|
|
|
2883 data: [30, 38, 50, 29, 86, 37, 110]
|
|
|
2884
|
|
|
2885 },
|
|
|
2886 {
|
|
|
2887 label: "My First dataset",
|
|
|
2888 backgroundColor: "rgba(44,171,227,0.8)",
|
|
|
2889 strokeColor: "rgba(44,171,227,1)",
|
|
|
2890 pointColor: "rgba(44,171,227,1)",
|
|
|
2891 pointStrokeColor: "#fff",
|
|
|
2892 pointHighlightFill: "#fff",
|
|
|
2893 pointHighlightStroke: "rgba(19,218,254,1)",
|
|
|
2894 data: [55, 99, 70, 91, 66, 35, 40]
|
|
|
2895 }
|
|
|
2896 ]
|
|
|
2897 };
|
|
|
2898
|
|
|
2899 var chartJsRadar = new Chart(ctx6, {
|
|
|
2900 type: "radar",
|
|
|
2901 data: data6,
|
|
|
2902 options: {
|
|
|
2903 legend: {
|
|
|
2904 display: false
|
|
|
2905 },
|
|
|
2906 tooltips: {
|
|
|
2907 mode: 'index',
|
|
|
2908 intersect: false,
|
|
|
2909 titleFontColor: "#000",
|
|
|
2910 titleMarginBottom: 10,
|
|
|
2911 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
2912 bodyFontColor: "#000",
|
|
|
2913 borderColor: "#e9e9e9",
|
|
|
2914 bodySpacing: 10,
|
|
|
2915 borderWidth: 2,
|
|
|
2916 xPadding: 10,
|
|
|
2917 yPadding: 10,
|
|
|
2918 displayColors: true
|
|
|
2919 },
|
|
|
2920 },
|
|
|
2921 responsive: true
|
|
|
2922 });
|
|
|
2923 },
|
|
|
2924
|
|
|
2925 newUserChartJs: function() {
|
|
|
2926 var ctx = document.getElementById("chartJsNewUsers");
|
|
|
2927 if ( ctx === null ) return;
|
|
|
2928 ctx = ctx.getContext('2d');
|
|
|
2929
|
|
|
2930 var gradient = ctx.createLinearGradient(0,20,20,270);
|
|
|
2931 gradient.addColorStop(0,'rgba(130,83,235,0.6)');
|
|
|
2932 gradient.addColorStop(1,'rgba(130,83,235,0)');
|
|
|
2933
|
|
|
2934 var data = {
|
|
|
2935 labels: [
|
|
|
2936 moment("2017-10-21").format("D MMM"),
|
|
|
2937 moment("2017-10-22").format("D MMM"),
|
|
|
2938 moment("2017-10-23").format("D MMM"),
|
|
|
2939 moment("2017-10-24").format("D MMM"),
|
|
|
2940 moment("2017-10-25").format("D MMM"),
|
|
|
2941 moment("2017-10-26").format("D MMM"),
|
|
|
2942 moment("2017-10-27").format("D MMM"),
|
|
|
2943 ],
|
|
|
2944 datasets: [
|
|
|
2945 {
|
|
|
2946 label: 'New Users',
|
|
|
2947 lineTension: 0,
|
|
|
2948 data: [32, 51, 98, 87, 125, 140, 173],
|
|
|
2949 backgroundColor: gradient,
|
|
|
2950 hoverBackgroundColor: gradient,
|
|
|
2951 borderColor: '#8253eb',
|
|
|
2952 borderWidth: 2,
|
|
|
2953 pointRadius: 4,
|
|
|
2954 pointHoverRadius: 4,
|
|
|
2955 pointBackgroundColor: 'rgba(255,255,255,1)'
|
|
|
2956 }
|
|
|
2957 ]
|
|
|
2958 };
|
|
|
2959
|
|
|
2960 var chart = new Chart(ctx, {
|
|
|
2961 type: 'line',
|
|
|
2962 data: data,
|
|
|
2963 responsive: true,
|
|
|
2964 options: {
|
|
|
2965 maintainAspectRatio: false,
|
|
|
2966 legend: {
|
|
|
2967 display: false,
|
|
|
2968 },
|
|
|
2969 scales: {
|
|
|
2970 xAxes: [{
|
|
|
2971 gridLines: {
|
|
|
2972 display: false,
|
|
|
2973 drawBorder: false,
|
|
|
2974 tickMarkLength: 20,
|
|
|
2975 },
|
|
|
2976 ticks: {
|
|
|
2977 fontColor: "#bbb",
|
|
|
2978 padding: 10,
|
|
|
2979 fontFamily: 'Roboto',
|
|
|
2980 },
|
|
|
2981 }],
|
|
|
2982 yAxes: [{
|
|
|
2983 gridLines: {
|
|
|
2984 color: '#eef1f2',
|
|
|
2985 drawBorder: false,
|
|
|
2986 zeroLineColor: '#eef1f2',
|
|
|
2987 },
|
|
|
2988 ticks: {
|
|
|
2989 fontColor: "#bbb",
|
|
|
2990 stepSize: 50,
|
|
|
2991 padding: 20,
|
|
|
2992 fontFamily: 'Roboto',
|
|
|
2993 }
|
|
|
2994 }]
|
|
|
2995 },
|
|
|
2996 },
|
|
|
2997 });
|
|
|
2998
|
|
|
2999 $(document).on('SIDEBAR_CHANGED_WIDTH', function() {
|
|
|
3000 chart.resize();
|
|
|
3001 });
|
|
|
3002
|
|
|
3003 $(window).on('resize', function() {
|
|
|
3004 chart.resize();
|
|
|
3005 });
|
|
|
3006 },
|
|
|
3007
|
|
|
3008 /******************** Widgets *********************/
|
|
|
3009 doughnutChartWidget: function() {
|
|
|
3010 var ctx = document.getElementById("doughnutWidget");
|
|
|
3011 if ( ctx === null ) return;
|
|
|
3012 var data4 = {
|
|
|
3013 labels: [
|
|
|
3014 "Blue",
|
|
|
3015 "Green",
|
|
|
3016 "Yellow",
|
|
|
3017 "Red",
|
|
|
3018
|
|
|
3019 ],
|
|
|
3020 datasets: [
|
|
|
3021 {
|
|
|
3022 data: [300,50,120,100],
|
|
|
3023 backgroundColor: [
|
|
|
3024 "#03a9f3",
|
|
|
3025 "#38d57a",
|
|
|
3026 "#ffcc02",
|
|
|
3027 "#e6614f"
|
|
|
3028 ],
|
|
|
3029 hoverBackgroundColor: [
|
|
|
3030 "#03a9f3",
|
|
|
3031 "#38d57a",
|
|
|
3032 "#ffcc02",
|
|
|
3033 "#e6614f"
|
|
|
3034 ]
|
|
|
3035 }]
|
|
|
3036 };
|
|
|
3037 var chartJsDoughnut = new Chart(ctx, {
|
|
|
3038 type: "doughnut",
|
|
|
3039 data: data4,
|
|
|
3040 responsive: true,
|
|
|
3041 options: {
|
|
|
3042 maintainAspectRatio: false,
|
|
|
3043 legend: {
|
|
|
3044 display: false
|
|
|
3045 },
|
|
|
3046 cutoutPercentage: 80,
|
|
|
3047 tooltips: {
|
|
|
3048 mode: 'index',
|
|
|
3049 intersect: false,
|
|
|
3050 titleFontColor: "#000",
|
|
|
3051 titleMarginBottom: 10,
|
|
|
3052 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
3053 bodyFontColor: "#000",
|
|
|
3054 borderColor: "#e9e9e9",
|
|
|
3055 bodySpacing: 10,
|
|
|
3056 borderWidth: 3,
|
|
|
3057 xPadding: 10,
|
|
|
3058 yPadding: 10,
|
|
|
3059 },
|
|
|
3060 }
|
|
|
3061 });
|
|
|
3062 },
|
|
|
3063
|
|
|
3064 barMorrisChartWidget: function() {
|
|
|
3065 var ctx = document.getElementById("barMorrisWidget");
|
|
|
3066 if ( ctx === null ) return;
|
|
|
3067
|
|
|
3068 var chart = Morris.Bar({
|
|
|
3069 element: 'barMorrisWidget',
|
|
|
3070 data: [{
|
|
|
3071 y: '2006',
|
|
|
3072 a: 100,
|
|
|
3073 b: 90,
|
|
|
3074 c: 60
|
|
|
3075 }, {
|
|
|
3076 y: '2007',
|
|
|
3077 a: 75,
|
|
|
3078 b: 65,
|
|
|
3079 c: 40
|
|
|
3080 }, {
|
|
|
3081 y: '2008',
|
|
|
3082 a: 50,
|
|
|
3083 b: 40,
|
|
|
3084 c: 30
|
|
|
3085 }, {
|
|
|
3086 y: '2009',
|
|
|
3087 a: 75,
|
|
|
3088 b: 65,
|
|
|
3089 c: 40
|
|
|
3090 },{
|
|
|
3091 y: '2010',
|
|
|
3092 a: 45,
|
|
|
3093 b: 95,
|
|
|
3094 c: 30
|
|
|
3095 }],
|
|
|
3096 xkey: 'y',
|
|
|
3097 ykeys: ['a', 'b', 'c'],
|
|
|
3098 labels: ['Twitter', 'Facebook', 'Linkedin'],
|
|
|
3099 barColors:['#b8edf0', '#b4c1d7', '#fcc9ba'],
|
|
|
3100 barSizeRatio:0.55,
|
|
|
3101 hideHover: 'auto',
|
|
|
3102 grid: false,
|
|
|
3103 axes: false,
|
|
|
3104 resize: true
|
|
|
3105 });
|
|
|
3106
|
|
|
3107 $(document).on('SIDEBAR_CHANGED_WIDTH', chart.resizeHandler);
|
|
|
3108 },
|
|
|
3109
|
|
|
3110 lineChartWidget: function() {
|
|
|
3111 var ctx = document.getElementById("lineWidget");
|
|
|
3112 if ( ctx === null ) return;
|
|
|
3113 var data1 = {
|
|
|
3114 labels: ["January", "February", "March", "April", "May", "June"],
|
|
|
3115 datasets: [
|
|
|
3116 {
|
|
|
3117 label: "First",
|
|
|
3118 backgroundColor: "#8ee2d0",
|
|
|
3119 borderColor: "#31bfa1",
|
|
|
3120 pointStrokeColor: "#000",
|
|
|
3121 pointRadius: 4,
|
|
|
3122 pointBorderWidth: 2,
|
|
|
3123 pointBorderColor: "#fff",
|
|
|
3124 pointBackgroundColor: "#2caa90",
|
|
|
3125 pointHoverBackgroundColor: "#2caa90",
|
|
|
3126 pointHoverBorderColor: "#fff",
|
|
|
3127 pointHoverRadius: 6,
|
|
|
3128 pointHoverBorderWidth: 2,
|
|
|
3129 data: [13, 28, 19, 24, 43, 49]
|
|
|
3130 },
|
|
|
3131
|
|
|
3132 ]
|
|
|
3133 };
|
|
|
3134
|
|
|
3135 var lineWidget = new Chart(ctx, {
|
|
|
3136 type: "line",
|
|
|
3137 data: data1,
|
|
|
3138 responsive: true,
|
|
|
3139 options: {
|
|
|
3140 maintainAspectRatio: false,
|
|
|
3141 legend: {
|
|
|
3142 display: false
|
|
|
3143 },
|
|
|
3144 tooltips: {
|
|
|
3145 mode: 'index',
|
|
|
3146 intersect: false,
|
|
|
3147 titleFontColor: "#000",
|
|
|
3148 titleMarginBottom: 10,
|
|
|
3149 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
3150 bodyFontColor: "#000",
|
|
|
3151 borderColor: "#e9e9e9",
|
|
|
3152 bodySpacing: 10,
|
|
|
3153 borderWidth: 3,
|
|
|
3154 xPadding: 10,
|
|
|
3155 yPadding: 10,
|
|
|
3156 },
|
|
|
3157 scales: {
|
|
|
3158 xAxes: [{
|
|
|
3159 display: false,
|
|
|
3160 gridLines: {
|
|
|
3161 display:false
|
|
|
3162 }
|
|
|
3163 }],
|
|
|
3164 yAxes: [{
|
|
|
3165 display: false,
|
|
|
3166 gridLines: {
|
|
|
3167 display:false
|
|
|
3168 }
|
|
|
3169 }]
|
|
|
3170 }
|
|
|
3171 }
|
|
|
3172 });
|
|
|
3173 },
|
|
|
3174
|
|
|
3175
|
|
|
3176 /********************* Demos ***********************/
|
|
|
3177 barMorrisChartDemo: function() {
|
|
|
3178 var ctx = document.getElementById("barMorrisDemo");
|
|
|
3179 if ( ctx === null ) return;
|
|
|
3180
|
|
|
3181 var chart = Morris.Bar({
|
|
|
3182 element: 'barMorrisDemo',
|
|
|
3183 data: [{
|
|
|
3184 y: '2006',
|
|
|
3185 a: 100,
|
|
|
3186 b: 90
|
|
|
3187 }, {
|
|
|
3188 y: '2007',
|
|
|
3189 a: 75,
|
|
|
3190 b: 65
|
|
|
3191 }, {
|
|
|
3192 y: '2008',
|
|
|
3193 a: 50,
|
|
|
3194 b: 40
|
|
|
3195 }, {
|
|
|
3196 y: '2009',
|
|
|
3197 a: 75,
|
|
|
3198 b: 65
|
|
|
3199 }, {
|
|
|
3200 y: '2010',
|
|
|
3201 a: 50,
|
|
|
3202 b: 40
|
|
|
3203 }, {
|
|
|
3204 y: '2011',
|
|
|
3205 a: 75,
|
|
|
3206 b: 65
|
|
|
3207 }, {
|
|
|
3208 y: '2012',
|
|
|
3209 a: 100,
|
|
|
3210 b: 90
|
|
|
3211 }],
|
|
|
3212 xkey: 'y',
|
|
|
3213 ykeys: ['a', 'b',],
|
|
|
3214 labels: ['A', 'B'],
|
|
|
3215 barColors:['#8ae1e9', '#1e83c3'],
|
|
|
3216 hideHover: 'auto',
|
|
|
3217 barSizeRatio: .4,
|
|
|
3218 gridLineColor: '#eef0f2',
|
|
|
3219 resize: true
|
|
|
3220 });
|
|
|
3221
|
|
|
3222 $(document).on('SIDEBAR_CHANGED_WIDTH', chart.resizeHandler);
|
|
|
3223 },
|
|
|
3224
|
|
|
3225 barMorrisChartUniversityDemo: function() {
|
|
|
3226 var ctx = document.getElementById("barMorrisUniversityDemo");
|
|
|
3227 if ( ctx === null ) return;
|
|
|
3228
|
|
|
3229 var chart = Morris.Line({
|
|
|
3230 element: 'barMorrisUniversityDemo',
|
|
|
3231 data: [{
|
|
|
3232 y: '2006',
|
|
|
3233 a: 100,
|
|
|
3234 b: 90,
|
|
|
3235 c: 60
|
|
|
3236 }, {
|
|
|
3237 y: '2007',
|
|
|
3238 a: 75,
|
|
|
3239 b: 65,
|
|
|
3240 c: 40
|
|
|
3241 }, {
|
|
|
3242 y: '2008',
|
|
|
3243 a: 50,
|
|
|
3244 b: 40,
|
|
|
3245 c: 30
|
|
|
3246 }, {
|
|
|
3247 y: '2009',
|
|
|
3248 a: 75,
|
|
|
3249 b: 65,
|
|
|
3250 c: 40
|
|
|
3251 }, {
|
|
|
3252 y: '2010',
|
|
|
3253 a: 50,
|
|
|
3254 b: 40,
|
|
|
3255 c: 30
|
|
|
3256 }, {
|
|
|
3257 y: '2011',
|
|
|
3258 a: 75,
|
|
|
3259 b: 65,
|
|
|
3260 c: 40
|
|
|
3261 }, {
|
|
|
3262 y: '2012',
|
|
|
3263 a: 100,
|
|
|
3264 b: 90,
|
|
|
3265 c: 40
|
|
|
3266 }, {
|
|
|
3267 y: '2013',
|
|
|
3268 a: 75,
|
|
|
3269 b: 55,
|
|
|
3270 c: 40
|
|
|
3271 }, {
|
|
|
3272 y: '2014',
|
|
|
3273 a: 75,
|
|
|
3274 b: 45,
|
|
|
3275 c: 30
|
|
|
3276 }, {
|
|
|
3277 y: '2015',
|
|
|
3278 a: 75,
|
|
|
3279 b: 65,
|
|
|
3280 c: 40
|
|
|
3281 }, {
|
|
|
3282 y: '2016',
|
|
|
3283 a: 90,
|
|
|
3284 b: 65,
|
|
|
3285 c: 40
|
|
|
3286 }],
|
|
|
3287 xkey: 'y',
|
|
|
3288 ykeys: ['a', 'b', 'c'],
|
|
|
3289 labels: ['A', 'B', 'C'],
|
|
|
3290 lineColors:['#03A9F3', '#E6614F', '#51D2B7'],
|
|
|
3291 hideHover: 'auto',
|
|
|
3292 lineWidth: 2,
|
|
|
3293 pointSize: 5,
|
|
|
3294 barSizeRatio: .5,
|
|
|
3295 gridLineColor: '#eef0f2',
|
|
|
3296 resize: true
|
|
|
3297 });
|
|
|
3298
|
|
|
3299 $(document).on('SIDEBAR_CHANGED_WIDTH', chart.resizeHandler);
|
|
|
3300 },
|
|
|
3301
|
|
|
3302 donuteMorrisChartDemo: function() {
|
|
|
3303 var ctx = document.getElementById("donuteMorrisDemo");
|
|
|
3304 if ( ctx === null ) return;
|
|
|
3305
|
|
|
3306 var chart = Morris.Donut({
|
|
|
3307 element: 'donuteMorrisDemo',
|
|
|
3308 data: [{
|
|
|
3309 label: "Property For Sale",
|
|
|
3310 value: 12,
|
|
|
3311
|
|
|
3312 }, {
|
|
|
3313 label: "Property For Rent",
|
|
|
3314 value: 30
|
|
|
3315 }, {
|
|
|
3316 label: "Property Sold",
|
|
|
3317 value: 20
|
|
|
3318 }],
|
|
|
3319 resize: true,
|
|
|
3320 colors:['#8ae1e9', '#1e83c3', '#38d57a']
|
|
|
3321 });
|
|
|
3322
|
|
|
3323 $(document).on('SIDEBAR_CHANGED_WIDTH', chart.resizeHandler);
|
|
|
3324 },
|
|
|
3325
|
|
|
3326 doughnutChartJsDemo: function() {
|
|
|
3327 var ctx = document.getElementById("chartJsDoughnutDemo");
|
|
|
3328 if ( ctx === null ) return;
|
|
|
3329
|
|
|
3330 var ctx4 = document.getElementById("chartJsDoughnutDemo").getContext("2d");
|
|
|
3331 var data4 = {
|
|
|
3332 labels: [
|
|
|
3333 "Delivered",
|
|
|
3334 "Order",
|
|
|
3335 "Pending"
|
|
|
3336 ],
|
|
|
3337 datasets: [
|
|
|
3338 {
|
|
|
3339 data: [300,120,100],
|
|
|
3340 backgroundColor: [
|
|
|
3341 "#5793f3",
|
|
|
3342 "#38d57a",
|
|
|
3343 "#fb9678"
|
|
|
3344 ],
|
|
|
3345 hoverBackgroundColor: [
|
|
|
3346 "#5793f3",
|
|
|
3347 "#38d57a",
|
|
|
3348 "#fb9678"
|
|
|
3349 ]
|
|
|
3350 }]
|
|
|
3351 };
|
|
|
3352 var chartJsDoughnut = new Chart(ctx4, {
|
|
|
3353 type: "doughnut",
|
|
|
3354 data: data4,
|
|
|
3355 responsive: false,
|
|
|
3356 options: {
|
|
|
3357 legend: {
|
|
|
3358 display: false
|
|
|
3359 },
|
|
|
3360 maintainAspectRatio: false,
|
|
|
3361 tooltips: {
|
|
|
3362 mode: 'index',
|
|
|
3363 intersect: false,
|
|
|
3364 titleFontColor: "#000",
|
|
|
3365 titleMarginBottom: 10,
|
|
|
3366 backgroundColor: "rgba(255,255,255,.9)",
|
|
|
3367 bodyFontColor: "#000",
|
|
|
3368 borderColor: "#e9e9e9",
|
|
|
3369 bodySpacing: 10,
|
|
|
3370 borderWidth: 3,
|
|
|
3371 xPadding: 10,
|
|
|
3372 yPadding: 10,
|
|
|
3373 },
|
|
|
3374 }
|
|
|
3375 });
|
|
|
3376 },
|
|
|
3377
|
|
|
3378 /*********************** Animations **************************/
|
|
|
3379 testAnimation: function() {
|
|
|
3380 var ctx = document.getElementById("animationSandbox");
|
|
|
3381 if ( ctx === null ) return;
|
|
|
3382
|
|
|
3383 function testAnim(x) {
|
|
|
3384 $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
|
|
|
3385 $(this).removeClass();
|
|
|
3386 });
|
|
|
3387 }
|
|
|
3388
|
|
|
3389 $(document).ready(function () {
|
|
|
3390 $('.js--triggerAnimation').click(function (e) {
|
|
|
3391 e.preventDefault();
|
|
|
3392 var anim = $('.js--animations').val();
|
|
|
3393 testAnim(anim);
|
|
|
3394 });
|
|
|
3395 $('.js--animations').change(function () {
|
|
|
3396 var anim = $(this).val();
|
|
|
3397 testAnim(anim);
|
|
|
3398 });
|
|
|
3399 });
|
|
|
3400 },
|
|
|
3401
|
|
|
3402 /*********************** Toastr **************************/
|
|
|
3403 enableToastr: function() {
|
|
|
3404 var toastInfo = $('.toast-info');
|
|
|
3405 if( toastInfo.length ) {
|
|
|
3406 toastInfo.click(function(){
|
|
|
3407 $.toast({
|
|
|
3408 heading: 'Welcome to Oscar Admin',
|
|
|
3409 text: 'This alert needs your attention, but it is not super important.',
|
|
|
3410 position: 'top-right',
|
|
|
3411 icon: 'info',
|
|
|
3412 stack: false
|
|
|
3413 });
|
|
|
3414 });
|
|
|
3415 }
|
|
|
3416
|
|
|
3417 var toastSuccess = $('.toast-success');
|
|
|
3418 if( toastSuccess.length ) {
|
|
|
3419 toastSuccess.click(function(){
|
|
|
3420 $.toast({
|
|
|
3421 heading: 'Welcome to Oscar Admin',
|
|
|
3422 text: 'This alert needs your attention, but it is not super important.',
|
|
|
3423 position: 'top-right',
|
|
|
3424 icon: 'success',
|
|
|
3425 stack: false
|
|
|
3426 });
|
|
|
3427 });
|
|
|
3428 }
|
|
|
3429
|
|
|
3430
|
|
|
3431 var toastDanger = $('.toast-danger');
|
|
|
3432 if( toastDanger.length ) {
|
|
|
3433 toastDanger.click(function(){
|
|
|
3434 $.toast({
|
|
|
3435 heading: 'Welcome to Oscar Admin',
|
|
|
3436 text: 'This alert needs your attention, but it is not super important.',
|
|
|
3437 position: 'top-right',
|
|
|
3438 icon: 'error',
|
|
|
3439 stack: false
|
|
|
3440 });
|
|
|
3441 });
|
|
|
3442 }
|
|
|
3443
|
|
|
3444
|
|
|
3445 var toastWarning = $('.toast-warning');
|
|
|
3446 if( toastWarning.length ) {
|
|
|
3447 toastWarning.click(function(){
|
|
|
3448 $.toast({
|
|
|
3449 heading: 'Welcome to Oscar Admin',
|
|
|
3450 text: 'This alert needs your attention, but it is not super important.',
|
|
|
3451 position: 'top-right',
|
|
|
3452 icon: 'warning',
|
|
|
3453 stack: false
|
|
|
3454 });
|
|
|
3455 });
|
|
|
3456 }
|
|
|
3457
|
|
|
3458 var toastBasic = $('.toast-basic');
|
|
|
3459 if( toastBasic.length ) {
|
|
|
3460 toastBasic.click(function(){
|
|
|
3461 $.toast({
|
|
|
3462 text: 'This alert needs your attention, but it is not super important.',
|
|
|
3463 position: 'top-right',
|
|
|
3464 stack: false
|
|
|
3465 });
|
|
|
3466 });
|
|
|
3467 }
|
|
|
3468
|
|
|
3469 var toastArray = $('.toast-array');
|
|
|
3470 if( toastArray.length ) {
|
|
|
3471 toastArray.click(function(){
|
|
|
3472 $.toast({
|
|
|
3473 heading: 'Read documentation and check:',
|
|
|
3474 text:["Connections","Cables & accessories","Display & Touch"],
|
|
|
3475 position: 'top-right',
|
|
|
3476 stack: false
|
|
|
3477 });
|
|
|
3478 });
|
|
|
3479 }
|
|
|
3480
|
|
|
3481
|
|
|
3482 var toastHtml = $('.toast-html');
|
|
|
3483 if( toastHtml.length ) {
|
|
|
3484 toastHtml.click(function(){
|
|
|
3485 $.toast({
|
|
|
3486 heading: 'Welcome to <i>Oscar Admin</i>',
|
|
|
3487 text: 'This alert needs your attention. <a href="#">Check this out</a>.',
|
|
|
3488 position: 'top-right',
|
|
|
3489 stack: false
|
|
|
3490 });
|
|
|
3491 });
|
|
|
3492 }
|
|
|
3493
|
|
|
3494
|
|
|
3495 var toastTransitions = $('.toast-transitions');
|
|
|
3496 if( toastTransitions.length ) {
|
|
|
3497 toastTransitions.click(function(){
|
|
|
3498 $.toast({
|
|
|
3499 heading: 'Slide Transitions',
|
|
|
3500 text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
|
|
|
3501 position: 'top-right',
|
|
|
3502 showHideTransition:"slide",
|
|
|
3503 stack: false
|
|
|
3504 });
|
|
|
3505 });
|
|
|
3506 }
|
|
|
3507
|
|
|
3508 var toastTopCenter = $('.toast-top-center');
|
|
|
3509 if( toastTopCenter.length ) {
|
|
|
3510 toastTopCenter.click(function(){
|
|
|
3511 $.toast({
|
|
|
3512 text: 'This alert needs your attention, but it is not super important.',
|
|
|
3513 position: 'top-center',
|
|
|
3514 stack: false
|
|
|
3515 });
|
|
|
3516 });
|
|
|
3517 }
|
|
|
3518
|
|
|
3519 var toastBottomRight = $('.toat-bottom-right');
|
|
|
3520 if( toastBottomRight.length ) {
|
|
|
3521 toastBottomRight.click(function(){
|
|
|
3522 $.toast({
|
|
|
3523 text: 'This alert needs your attention, but it is not super important.',
|
|
|
3524 position: 'bottom-right',
|
|
|
3525 stack: false
|
|
|
3526 });
|
|
|
3527 });
|
|
|
3528 }
|
|
|
3529
|
|
|
3530 var toastBottomCenter = $('.toast-bottom-center');
|
|
|
3531 if( toastBottomCenter.length ) {
|
|
|
3532 toastBottomCenter.click(function(){
|
|
|
3533 $.toast({
|
|
|
3534 text: 'This alert needs your attention, but it is not super important.',
|
|
|
3535 position: 'bottom-center',
|
|
|
3536 stack: false
|
|
|
3537 });
|
|
|
3538 });
|
|
|
3539 }
|
|
|
3540
|
|
|
3541 var toastSticky = $('.toast-sticky');
|
|
|
3542 if( toastSticky.length ) {
|
|
|
3543 toastSticky.click(function(){
|
|
|
3544 $.toast({
|
|
|
3545 text: 'This alert needs your attention, but it is not super important.',
|
|
|
3546 position: 'top-right',
|
|
|
3547 hideAfter: false,
|
|
|
3548 stack: false
|
|
|
3549 });
|
|
|
3550 });
|
|
|
3551 }
|
|
|
3552
|
|
|
3553 },
|
|
|
3554 };
|
|
|
3555 $(document).ready( function() {
|
|
|
3556 Custom.init();
|
|
|
3557 });
|
|
|
3558 })(jQuery);
|
