Mercurial > nebulaweb3

comparison default/assets/js/custom.js @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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: "&nbsp; sin(x)",
219 }, {
220 data: cos,
221 label: "&nbsp; 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 '&nbsp;' + label + '&nbsp;&nbsp;&nbsp;';
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);