chart-custom.js

js oneoptimumlifestyles.com collected 2026-10-02 16:04:45 UTC 152,252 bytes, 6,265 lines download raw bytes

1(function(jQuery) {
2
3    "use strict";
4
5// for apexchart
6function apexChartUpdate(chart, detail) {
7    let color = getComputedStyle(document.documentElement).getPropertyValue('--dark');
8    if (detail.dark) {
9      color = getComputedStyle(document.documentElement).getPropertyValue('--white');
10    }
11    chart.updateOptions({
12      chart: {
13        foreColor: color
14      }
15    })
16  }
17  
18// for am chart
19function amChartUpdate(chart, detail) {
20  // let color = getComputedStyle(document.documentElement).getPropertyValue('--dark');
21  if (detail.dark) {
22    // color = getComputedStyle(document.documentElement).getPropertyValue('--white');
23    chart.stroke = am4core.color(getComputedStyle(document.documentElement).getPropertyValue('--white'));
24  }
25  chart.validateData();
26}
27
28/*---------------------------------------------------------------------
29   Apex Charts
30-----------------------------------------------------------------------*/
31if (jQuery("#apex-basic").length) {
32  options = {
33    chart: {
34      height: 350,
35      type: "line",
36      zoom: {
37        enabled: !1
38      }
39    },
40    colors: ["#4788ff"],
41    series: [{
42      name: "Desktops",
43      data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
44    }],
45    dataLabels: {
46      enabled: !1
47    },
48    stroke: {
49      curve: "straight"
50    },
51    title: {
52      text: "Product Trends by Month",
53      align: "left"
54    },
55    grid: {
56      row: {
57        colors: ["#f3f3f3", "transparent"],
58        opacity: .5
59      }
60    },
61    xaxis: {
62      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
63    }
64  };
65  if(typeof ApexCharts !== typeof undefined){
66    (chart = new ApexCharts(document.querySelector("#apex-basic"), options)).render()
67    const body = document.querySelector('body')
68    if (body.classList.contains('dark')) {
69      apexChartUpdate(chart, {
70        dark: true
71      })
72    }
73
74    document.addEventListener('ChangeColorMode', function (e) {
75      apexChartUpdate(chart, e.detail)
76    })
77  }
78}
79if (jQuery("#apex-line-area").length) {
80  options = {
81    chart: {
82      height: 350,
83      type: "area"
84    },
85    dataLabels: {
86      enabled: !1
87    },
88    stroke: {
89      curve: "smooth"
90    },
91    colors: ["#4788ff", "#ff4b4b"],
92    series: [{
93      name: "series1",
94      data: [31, 40, 28, 51, 42, 109, 100]
95    }, {
96      name: "series2",
97      data: [11, 32, 45, 32, 34, 52, 41]
98    }],
99    xaxis: {
100      type: "datetime",
101      categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"]
102    },
103    tooltip: {
104      x: {
105        format: "dd/MM/yy HH:mm"
106      }
107    }
108  };
109  (chart = new ApexCharts(document.querySelector("#apex-line-area"), options)).render()
110  const body = document.querySelector('body')
111  if (body.classList.contains('dark')) {
112    apexChartUpdate(chart, {
113      dark: true
114    })
115  }
116
117  document.addEventListener('ChangeColorMode', function (e) {
118    apexChartUpdate(chart, e.detail)
119  })
120}
121if (jQuery("#apex-bar").length) {
122  options = {
123    chart: {
124      height: 350,
125      type: "bar"
126    },
127    plotOptions: {
128      bar: {
129        horizontal: !0
130      }
131    },
132    dataLabels: {
133      enabled: !1
134    },
135    colors: ["#4788ff"],
136    series: [{
137      data: [470, 540, 580, 690, 1100, 1200, 1380]
138    }],
139    xaxis: {
140      categories: ["Netherlands", "Italy", "France", "Japan", "United States", "China", "Germany"]
141    }
142  };
143  (chart = new ApexCharts(document.querySelector("#apex-bar"), options)).render()
144  const body = document.querySelector('body')
145  if (body.classList.contains('dark')) {
146    apexChartUpdate(chart, {
147      dark: true
148    })
149  }
150
151  document.addEventListener('ChangeColorMode', function (e) {
152    apexChartUpdate(chart, e.detail)
153  })
154}
155if (jQuery("#apex-column").length) {
156  options = {
157    chart: {
158      height: 350,
159      type: "bar"
160    },
161    plotOptions: {
162      bar: {
163        horizontal: !1,
164        columnWidth: "55%",
165        endingShape: "rounded"
166      }
167    },
168    dataLabels: {
169      enabled: !1
170    },
171    stroke: {
172      show: !0,
173      width: 2,
174      colors: ["transparent"]
175    },
176    colors: ["#4788ff", "#37e6b0", "#ff4b4b"],
177    series: [{
178      name: "Net Profit",
179      data: [44, 55, 57, 56, 61, 58]
180    }, {

181      name: "Revenue",
182      data: [76, 85, 101, 98, 87, 105]
183    }, {
184      name: "Free Cash Flow",
185      data: [35, 41, 36, 26, 45, 48]
186    }],
187    xaxis: {
188      categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul"]
189    },
190    yaxis: {
191      title: {
192        text: "$ (thousands)"
193      }
194    },
195    fill: {
196      opacity: 1
197    },
198    tooltip: {
199      y: {
200        formatter: function(e) {
201          return "$ " + e + " thousands"
202        }
203      }
204    }
205  };
206  (chart = new ApexCharts(document.querySelector("#apex-column"), options)).render()
207  const body = document.querySelector('body')
208  if (body.classList.contains('dark')) {
209    apexChartUpdate(chart, {
210      dark: true
211    })
212  }
213
214  document.addEventListener('ChangeColorMode', function (e) {
215    apexChartUpdate(chart, e.detail)
216  })
217}
218if (jQuery("#apex-mixed-chart").length) {
219  options = {
220    chart: {
221      height: 350,
222      type: "line",
223      stacked: !1
224    },
225    stroke: {
226      width: [0, 2, 5],
227      curve: "smooth"
228    },
229    plotOptions: {
230      bar: {
231        columnWidth: "50%"
232      }
233    },
234    colors: ["#ff4b4b", "#37e6b0", "#4788ff"],
235    series: [{
236      name: "Facebook",
237      type: "column",
238      data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
239    }, {
240      name: "Vine",
241      type: "area",
242      data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
243    }, {
244      name: "Dribbble",
245      type: "line",
246      data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
247    }],
248    fill: {
249      opacity: [.85, .25, 1],
250      gradient: {
251        inverseColors: !1,
252        shade: "light",
253        type: "vertical",
254        opacityFrom: .85,
255        opacityTo: .55,
256        stops: [0, 100, 100, 100]
257      }
258    },
259    labels: ["01/01/2003", "02/01/2003", "03/01/2003", "04/01/2003", "05/01/2003", "06/01/2003", "07/01/2003", "08/01/2003", "09/01/2003", "10/01/2003", "11/01/2003"],
260    markers: {
261      size: 0
262    },
263    xaxis: {
264      type: "datetime"
265    },
266    yaxis: {
267      min: 0
268    },
269    tooltip: {
270      shared: !0,
271      intersect: !1,
272      y: {
273        formatter: function(e) {
274          return void 0 !== e ? e.toFixed(0) + " views" : e
275        }
276      }
277    },
278    legend: {
279      labels: {
280        useSeriesColors: !0
281      },
282      markers: {
283        customHTML: [function() {
284          return ""
285        }, function() {
286          return ""
287        }, function() {
288          return ""
289        }]
290      }
291    }
292  };
293  (chart = new ApexCharts(document.querySelector("#apex-mixed-chart"), options)).render()
294  const body = document.querySelector('body')
295  if (body.classList.contains('dark')) {
296    apexChartUpdate(chart, {
297      dark: true
298    })
299  }
300
301  document.addEventListener('ChangeColorMode', function (e) {
302    apexChartUpdate(chart, e.detail)
303  })
304}
305if (jQuery("#apex-candlestick-chart").length) {
306  options = {
307    chart: {
308      height: 350,
309      type: "candlestick"
310    },
311    colors: ["#4788ff", "#37e6b0", "#37e6b0"],
312    series: [{
313      data: [{
314        x: new Date(15387786e5),
315        y: [6629.81, 6650.5, 6623.04, 6633.33]
316      }, {
317        x: new Date(15387804e5),
318        y: [6632.01, 6643.59, 6620, 6630.11]
319      }, {
320        x: new Date(15387822e5),
321        y: [6630.71, 6648.95, 6623.34, 6635.65]
322      }, {
323        x: new Date(1538784e6),
324        y: [6635.65, 6651, 6629.67, 6638.24]
325      }, {
326        x: new Date(15387858e5),
327        y: [6638.24, 6640, 6620, 6624.47]
328      }, {
329        x: new Date(15387876e5),
330        y: [6624.53, 6636.03, 6621.68, 6624.31]
331      }, {
332        x: new Date(15387894e5),
333        y: [6624.61, 6632.2, 6617, 6626.02]
334      }, {
335        x: new Date(15387912e5),
336        y: [6627, 6627.62, 6584.22, 6603.02]
337      }, {
338        x: new Date(1538793e6),
339        y: [6605, 6608.03, 6598.95, 6604.01]
340      }, {
341        x: new Date(15387948e5),
342        y: [6604.5, 6614.4, 6602.26, 6608.02]
343      }, {
344        x: new Date(15387966e5),
345        y: [6608.02, 6610.68, 6601.99, 6608.91]
346      }, {
347        x: new Date(15387984e5),
348        y: [6608.91, 6618.99, 6608.01, 6612]
349      }, {
350        x: new Date(15388002e5),
351        y: [6612, 6615.13, 6605.09, 6612]
352      }, {
353        x: new Date(1538802e6),
354        y: [6612, 6624.12, 6608.43, 6622.95]
355      }, {
356        x: new Date(15388038e5),
357        y: [6623.91, 6623.91, 6615, 6615.67]
358      }, {
359        x: new Date(15388056e5),
360        y: [6618.69, 6618.74, 6610, 6610.4]
361      }, {
362        x: new Date(15388074e5),
363        y: [6611, 6622.78, 6610.4, 6614.9]
364      }, {
365        x: new Date(15388092e5),
366        y: [6614.9, 6626.2, 6613.33, 6623.45]
367      }, {
368        x: new Date(1538811e6),
369        y: [6623.48, 6627, 6618.38, 6620.35]
370      }, {
371        x: new Date(15388128e5),
372        y: [6619.43, 6620.35, 6610.05, 6615.53]
373      }, {
374        x: new Date(15388146e5),
375        y: [6615.53, 6617.93, 6610, 6615.19]
376      }, {
377        x: new Date(15388164e5),
378        y: [6615.19, 6621.6, 6608.2, 6620]
379      }, {
380        x: new Date(15388182e5),
381        y: [6619.54, 6625.17, 6614.15, 6620]
382      }, {
383        x: new Date(153882e7),
384        y: [6620.33, 6634.15, 6617.24, 6624.61]
385      }, {
386        x: new Date(15388218e5),
387        y: [6625.95, 6626, 6611.66, 6617.58]
388      }, {
389        x: new Date(15388236e5),
390        y: [6619, 6625.97, 6595.27, 6598.86]
391      }, {
392        x: new Date(15388254e5),
393        y: [6598.86, 6598.88, 6570, 6587.16]
394      }, {
395        x: new Date(15388272e5),
396        y: [6588.86, 6600, 6580, 6593.4]
397      }, {
398        x: new Date(1538829e6),

399        y: [6593.99, 6598.89, 6585, 6587.81]
400      }, {
401        x: new Date(15388308e5),
402        y: [6587.81, 6592.73, 6567.14, 6578]
403      }, {
404        x: new Date(15388326e5),
405        y: [6578.35, 6581.72, 6567.39, 6579]
406      }, {
407        x: new Date(15388344e5),
408        y: [6579.38, 6580.92, 6566.77, 6575.96]
409      }, {
410        x: new Date(15388362e5),
411        y: [6575.96, 6589, 6571.77, 6588.92]
412      }, {
413        x: new Date(1538838e6),
414        y: [6588.92, 6594, 6577.55, 6589.22]
415      }, {
416        x: new Date(15388398e5),
417        y: [6589.3, 6598.89, 6589.1, 6596.08]
418      }, {
419        x: new Date(15388416e5),
420        y: [6597.5, 6600, 6588.39, 6596.25]
421      }, {
422        x: new Date(15388434e5),
423        y: [6598.03, 6600, 6588.73, 6595.97]
424      }, {
425        x: new Date(15388452e5),
426        y: [6595.97, 6602.01, 6588.17, 6602]
427      }, {
428        x: new Date(1538847e6),
429        y: [6602, 6607, 6596.51, 6599.95]
430      }, {
431        x: new Date(15388488e5),
432        y: [6600.63, 6601.21, 6590.39, 6591.02]
433      }, {
434        x: new Date(15388506e5),
435        y: [6591.02, 6603.08, 6591, 6591]
436      }, {
437        x: new Date(15388524e5),
438        y: [6591, 6601.32, 6585, 6592]
439      }, {
440        x: new Date(15388542e5),
441        y: [6593.13, 6596.01, 6590, 6593.34]
442      }, {
443        x: new Date(1538856e6),
444        y: [6593.34, 6604.76, 6582.63, 6593.86]
445      }, {
446        x: new Date(15388578e5),
447        y: [6593.86, 6604.28, 6586.57, 6600.01]
448      }, {
449        x: new Date(15388596e5),
450        y: [6601.81, 6603.21, 6592.78, 6596.25]
451      }, {
452        x: new Date(15388614e5),
453        y: [6596.25, 6604.2, 6590, 6602.99]
454      }, {
455        x: new Date(15388632e5),
456        y: [6602.99, 6606, 6584.99, 6587.81]
457      }, {
458        x: new Date(1538865e6),
459        y: [6587.81, 6595, 6583.27, 6591.96]
460      }, {
461        x: new Date(15388668e5),
462        y: [6591.97, 6596.07, 6585, 6588.39]
463      }, {
464        x: new Date(15388686e5),
465        y: [6587.6, 6598.21, 6587.6, 6594.27]
466      }, {
467        x: new Date(15388704e5),
468        y: [6596.44, 6601, 6590, 6596.55]
469      }, {
470        x: new Date(15388722e5),
471        y: [6598.91, 6605, 6596.61, 6600.02]
472      }, {
473        x: new Date(1538874e6),
474        y: [6600.55, 6605, 6589.14, 6593.01]
475      }, {
476        x: new Date(15388758e5),
477        y: [6593.15, 6605, 6592, 6603.06]
478      }]
479    }],
480    title: {
481      text: "CandleStick Chart",
482      align: "left"
483    },
484    xaxis: {
485      type: "datetime"
486    },
487    yaxis: {
488      tooltip: {
489        enabled: !0
490      }
491    }
492  };
493  (chart = new ApexCharts(document.querySelector("#apex-candlestick-chart"), options)).render()
494  const body = document.querySelector('body')
495  if (body.classList.contains('dark')) {
496    apexChartUpdate(chart, {
497      dark: true
498    })
499  }
500
501  document.addEventListener('ChangeColorMode', function (e) {
502    apexChartUpdate(chart, e.detail)
503  })
504}
505if (jQuery("#apex-bubble-chart").length) {
506  function generateData(e, t, a) {
507    for (var n = 0, o = []; n < t;) {
508      var r = Math.floor(Math.random() * (a.max - a.min + 1)) + a.min,
509        i = Math.floor(61 * Math.random()) + 15;
510      o.push([e, r, i]), e += 864e5, n++
511    }
512    return o
513  }
514  options = {
515    chart: {
516      height: 350,
517      type: "bubble"
518    },
519    dataLabels: {
520      enabled: !1
521    },
522    series: [{
523      name: "Product1",
524      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
525        min: 10,
526        max: 40
527      })
528    }, {
529      name: "Product2",
530      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
531        min: 10,
532        max: 40
533      })
534    }, {
535      name: "Product3",
536      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
537        min: 10,
538        max: 40
539      })
540    }],
541    fill: {
542      type: "gradient"
543    },
544    colors: ["#4788ff", "#37e6b0", "#37e6b0"],
545    title: {
546      text: "3D Bubble Chart"
547    },
548    xaxis: {
549      tickAmount: 12,
550      type: "datetime",
551      labels: {
552        rotate: 0
553      }
554    },
555    yaxis: {
556      max: 40
557    },
558    theme: {
559      palette: "palette2"
560    }
561  };
562  (chart = new ApexCharts(document.querySelector("#apex-bubble-chart"), options)).render()
563  const body = document.querySelector('body')
564  if (body.classList.contains('dark')) {
565    apexChartUpdate(chart, {
566      dark: true
567    })
568  }
569
570  document.addEventListener('ChangeColorMode', function (e) {
571    apexChartUpdate(chart, e.detail)
572  })
573}
574if (jQuery("#apex-scatter-chart").length) {
575  options = {
576    chart: {
577      height: 350,
578      type: "scatter",
579      zoom: {
580        enabled: !0,
581        type: "xy"
582      }
583    },
584    colors: ["#4788ff", "#ff4b4b", "#37e6b0"],
585    series: [{
586      name: "SAMPLE A",
587      data: [
588        [16.4, 5.4],
589        [21.7, 2],
590        [10.9, 0],
591        [10.9, 8.2],
592        [16.4, 0],

593        [16.4, 1.8],
594        [13.6, .3],
595        [13.6, 0],
596        [29.9, 0],
597        [27.1, 2.3],
598        [16.4, 0],
599        [13.6, 3.7],
600        [10.9, 5.2],
601        [16.4, 6.5],
602        [10.9, 0],
603        [24.5, 7.1],
604        [10.9, 0],
605        [8.1, 4.7]
606      ]
607    }, {
608      name: "SAMPLE B",
609      data: [
610        [36.4, 13.4],
611        [1.7, 11],
612        [1.9, 9],
613        [1.9, 13.2],
614        [1.4, 7],
615        [6.4, 8.8],
616        [3.6, 4.3],
617        [1.6, 10],
618        [9.9, 2],
619        [7.1, 15],
620        [1.4, 0],
621        [3.6, 13.7],
622        [1.9, 15.2],
623        [6.4, 16.5],
624        [.9, 10],
625        [4.5, 17.1],
626        [10.9, 10],
627        [.1, 14.7]
628      ]
629    }, {
630      name: "SAMPLE C",
631      data: [
632        [21.7, 3],
633        [23.6, 3.5],
634        [28, 4],
635        [27.1, .3],
636        [16.4, 4],
637        [13.6, 0],
638        [19, 5],
639        [22.4, 3],
640        [24.5, 3],
641        [32.6, 3],
642        [27.1, 4],
643        [29.6, 6],
644        [31.6, 8],
645        [21.6, 5],
646        [20.9, 4],
647        [22.4, 0],
648        [32.6, 10.3],
649        [29.7, 20.8]
650      ]
651    }],
652    xaxis: {
653      tickAmount: 5,
654      labels: {
655        formatter: function(e) {
656          return parseFloat(e).toFixed(1)
657        }
658      }
659    },
660    yaxis: {
661      tickAmount: 5
662    }
663  };
664  (chart = new ApexCharts(document.querySelector("#apex-scatter-chart"), options)).render()
665  const body = document.querySelector('body')
666  if (body.classList.contains('dark')) {
667    apexChartUpdate(chart, {
668      dark: true
669    })
670  }
671
672  document.addEventListener('ChangeColorMode', function (e) {
673    apexChartUpdate(chart, e.detail)
674  })
675}
676if (jQuery("#apex-radialbar-chart").length) {
677  options = {
678    chart: {
679      height: 350,
680      type: "radialBar"
681    },
682    plotOptions: {
683      radialBar: {
684        dataLabels: {
685          name: {
686            fontSize: "22px"
687          },
688          value: {
689            fontSize: "16px"
690          },
691          total: {
692            show: !0,
693            label: "Total",
694            formatter: function(e) {
695              return 249
696            }
697          }
698        }
699      }
700    },
701    series: [44, 55, 67, 83],
702    labels: ["Apples", "Oranges", "Bananas", "Berries"],
703    colors: ["#4788ff", "#ff4b4b", "#876cfe", "#37e6b0"]
704  };
705  (chart = new ApexCharts(document.querySelector("#apex-radialbar-chart"), options)).render()
706  const body = document.querySelector('body')
707  if (body.classList.contains('dark')) {
708    apexChartUpdate(chart, {
709      dark: true
710    })
711  }
712
713  document.addEventListener('ChangeColorMode', function (e) {
714    apexChartUpdate(chart, e.detail)
715  })
716}
717if (jQuery("#apex-pie-chart").length) {
718  options = {
719    chart: {
720      width: 380,
721      type: "pie"
722    },
723    labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
724    series: [44, 55, 13, 43, 22],
725    colors: ["#4788ff", "#ff4b4b", "#876cfe", "#37e6b0", "#c8c8c8"],
726    responsive: [{
727      breakpoint: 480,
728      options: {
729        chart: {
730          width: 200
731        },
732        legend: {
733          position: "bottom"
734        }
735      }
736    }]
737  };
738  (chart = new ApexCharts(document.querySelector("#apex-pie-chart"), options)).render()
739  const body = document.querySelector('body')
740  if (body.classList.contains('dark')) {
741    apexChartUpdate(chart, {
742      dark: true
743    })
744  }
745
746  document.addEventListener('ChangeColorMode', function (e) {
747    apexChartUpdate(chart, e.detail)
748  })
749}
750if (jQuery("#advanced-chart").length) {
751  var options = {
752    series: [
753    {
754      name: 'Bob',
755      data: [
756        {
757          x: 'Design',
758          y: [
759            new Date('2019-03-05').getTime(),
760            new Date('2019-03-08').getTime()
761          ]
762        },
763        {
764          x: 'Code',
765          y: [
766            new Date('2019-03-02').getTime(),
767            new Date('2019-03-05').getTime()
768          ]
769        },
770        {
771          x: 'Code',
772          y: [
773            new Date('2019-03-05').getTime(),
774            new Date('2019-03-07').getTime()
775          ]
776        },
777        {
778          x: 'Test',
779          y: [
780            new Date('2019-03-03').getTime(),
781            new Date('2019-03-09').getTime()
782          ]
783        },
784        {
785          x: 'Test',
786          y: [
787            new Date('2019-03-08').getTime(),
788            new Date('2019-03-11').getTime()
789          ]
790        },
791        {
792          x: 'Validation',
793          y: [
794            new Date('2019-03-11').getTime(),
795            new Date('2019-03-16').getTime()
796          ]
797        },
798        {
799          x: 'Design',
800          y: [
801            new Date('2019-03-01').getTime(),
802            new Date('2019-03-03').getTime()
803          ]
804        }
805      ]
806    },
807    {
808      name: 'Joe',
809      data: [
810        {
811          x: 'Design',
812          y: [
813            new Date('2019-03-02').getTime(),
814            new Date('2019-03-05').getTime()
815          ]
816        },
817        {
818          x: 'Test',
819          y: [
820            new Date('2019-03-06').getTime(),
821            new Date('2019-03-16').getTime()
822          ]
823        },
824        {
825          x: 'Code',
826          y: [
827            new Date('2019-03-03').getTime(),
828            new Date('2019-03-07').getTime()
829          ]
830        },
831        {
832          x: 'Deployment',
833          y: [
834            new Date('2019-03-20').getTime(),
835            new Date('2019-03-22').getTime()
836          ]
837        },
838        {
839          x: 'Design',
840          y: [
841            new Date('2019-03-10').getTime(),
842            new Date('2019-03-16').getTime()
843          ]
844        }
845      ]
846    },
847    {
848      name: 'Dan',
849      data: [
850        {
851          x: 'Code',
852          y: [
853            new Date('2019-03-10').getTime(),
854            new Date('2019-03-17').getTime()
855          ]
856        },
857        {
858          x: 'Validation',
859          y: [
860            new Date('2019-03-05').getTime(),
861            new Date('2019-03-09').getTime()
862          ]
863        },
864      ]
865    }
866  ],
867    colors: ["#4788ff", "#ff4b4b", "#37e6b0"],
868    chart: {
869    height: 450,
870    type: 'rangeBar'
871  },
872  plotOptions: {
873    bar: {
874      horizontal: true,
875      barHeight: '80%'
876    }
877  },
878  xaxis: {
879    type: 'datetime'
880  },
881  stroke: {
882    width: 1
883  },
884  fill: {
885    type: 'solid',
886    opacity: 0.6
887  },
888  legend: {
889    position: 'top',
890    horizontalAlign: 'left'
891  }
892  };
893
894  (chart = new ApexCharts(document.querySelector("#advanced-chart"), options)).render()
895  const body = document.querySelector('body')
896  if (body.classList.contains('dark')) {
897    apexChartUpdate(chart, {
898      dark: true
899    })
900  }
901
902  document.addEventListener('ChangeColorMode', function (e) {
903    apexChartUpdate(chart, e.detail)
904  })
905}
906if (jQuery("#radar-multiple-chart").length) {
907  var options = {
908    series: [{
909    name: 'Series 1',
910    data: [80, 50, 30, 40, 100, 20],
911  }, {
912    name: 'Series 2',
913    data: [20, 30, 40, 80, 20, 80],
914  }, {
915    name: 'Series 3',
916    data: [44, 76, 78, 13, 43, 10],
917  }],
918  colors: ["#4788ff", "#ff4b4b", "#37e6b0"],
919    chart: {
920    height: 350,
921    type: 'radar',
922    dropShadow: {
923      enabled: true,
924      blur: 1,
925      left: 1,
926      top: 1
927    }
928  },
929  title: {
930    text: 'Radar Chart - Multi Series'
931  },
932  stroke: {
933    width: 2
934  },
935  fill: {
936    opacity: 0.1
937  },
938  markers: {
939    size: 0
940  },
941  xaxis: {
942    categories: ['2011', '2012', '2013', '2014', '2015', '2016']
943  }
944  };
945
946  (chart = new ApexCharts(document.querySelector("#radar-multiple-chart"), options)).render()
947  const body = document.querySelector('body')
948  if (body.classList.contains('dark')) {
949    apexChartUpdate(chart, {
950      dark: true
951    })
952  }
953
954  document.addEventListener('ChangeColorMode', function (e) {
955    apexChartUpdate(chart, e.detail)
956  })
957}
958
959
960
961/*---------------------------------------------------------------------
962   Am Charts
963-----------------------------------------------------------------------*/
964
965    if(jQuery('#am-simple-chart').length){
966      am4core.ready(function() {
967
968      // Themes begin
969      am4core.useTheme(am4themes_animated);
970      // Themes end
971
972      // Create chart instance
973      var chart = am4core.create("am-simple-chart", am4charts.XYChart);
974      chart.colors.list = [am4core.color("#4788ff"),];
975
976      // Add data
977      chart.data = [{
978        "country": "USA",
979        "visits": 2025
980      }, {
981        "country": "China",
982        "visits": 1882
983      }, {
984        "country": "Japan",
985        "visits": 1809
986      }, {
987        "country": "Germany",
988        "visits": 1322
989      }, {
990        "country": "UK",
991        "visits": 1122
992      }, {
993        "country": "France",
994        "visits": 1114
995      }];
996
997      // Create axes
998
999      var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
1000      categoryAxis.dataFields.category = "country";
1001      categoryAxis.renderer.grid.template.location = 0;
1002      categoryAxis.renderer.minGridDistance = 30;
1003
1004      categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
1005        if (target.dataItem && target.dataItem.index & 2 == 2) {
1006          return dy + 25;
1007        }
1008        return dy;
1009      });
1010
1011      var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
1012
1013      // Create series
1014      var series = chart.series.push(new am4charts.ColumnSeries());
1015      series.dataFields.valueY = "visits";
1016      series.dataFields.categoryX = "country";
1017      series.name = "Visits";
1018      series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
1019      series.columns.template.fillOpacity = .8;
1020
1021      var columnTemplate = series.columns.template;
1022      columnTemplate.strokeWidth = 2;
1023      columnTemplate.strokeOpacity = 1;
1024
1025      const body = document.querySelector('body')
1026      if (body.classList.contains('dark')) {
1027        amChartUpdate(chart, {
1028          dark: true
1029        })
1030      }
1031
1032      document.addEventListener('ChangeColorMode', function (e) {
1033        amChartUpdate(chart, e.detail)
1034      })
1035
1036      }); // end am4core.ready()
1037   }
1038
1039   if(jQuery('#am-columnlinr-chart').length){
1040      am4core.ready(function() {
1041
1042      // Themes begin
1043      am4core.useTheme(am4themes_animated);
1044      // Themes end
1045
1046      // Create chart instance
1047      var chart = am4core.create("am-columnlinr-chart", am4charts.XYChart);
1048       chart.colors.list = [am4core.color("#4788ff"),];
1049
1050      // Export
1051      chart.exporting.menu = new am4core.ExportMenu();
1052
1053      // Data for both series
1054      var data = [ {
1055        "year": "2009",
1056        "income": 23.5,
1057        "expenses": 21.1
1058      }, {
1059        "year": "2010",
1060        "income": 26.2,
1061        "expenses": 30.5
1062      }, {
1063        "year": "2011",
1064        "income": 30.1,
1065        "expenses": 34.9
1066      }, {
1067        "year": "2012",
1068        "income": 29.5,
1069        "expenses": 31.1
1070      }, {
1071        "year": "2013",
1072        "income": 30.6,
1073        "expenses": 28.2,
1074        "lineDash": "5,5",
1075      }, {
1076        "year": "2014",
1077        "income": 34.1,
1078        "expenses": 32.9,
1079        "strokeWidth": 1,
1080        "columnDash": "5,5",
1081        "fillOpacity": 0.2,
1082        "additional": "(projection)"

1083      } ];
1084
1085      /* Create axes */
1086      var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
1087      categoryAxis.dataFields.category = "year";
1088      categoryAxis.renderer.minGridDistance = 30;
1089
1090      /* Create value axis */
1091      var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
1092
1093      /* Create series */
1094      var columnSeries = chart.series.push(new am4charts.ColumnSeries());
1095      columnSeries.name = "Income";
1096      columnSeries.dataFields.valueY = "income";
1097      columnSeries.dataFields.categoryX = "year";
1098
1099      columnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} in {categoryX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]"
1100      columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
1101      columnSeries.columns.template.propertyFields.stroke = "stroke";
1102      columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
1103      columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
1104      columnSeries.tooltip.label.textAlign = "middle";
1105
1106      var lineSeries = chart.series.push(new am4charts.LineSeries());
1107      lineSeries.name = "Expenses";
1108      lineSeries.dataFields.valueY = "expenses";
1109      lineSeries.dataFields.categoryX = "year";
1110
1111      lineSeries.stroke = am4core.color("#4788ff");
1112      lineSeries.strokeWidth = 3;
1113      lineSeries.propertyFields.strokeDasharray = "lineDash";
1114      lineSeries.tooltip.label.textAlign = "middle";
1115
1116      var bullet = lineSeries.bullets.push(new am4charts.Bullet());
1117      bullet.fill = am4core.color("#fdd400"); // tooltips grab fill from parent by default
1118      bullet.tooltipText = "[#fff font-size: 15px]{name} in {categoryX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]"
1119      var circle = bullet.createChild(am4core.Circle);
1120      circle.radius = 4;
1121      circle.fill = am4core.color("#fff");
1122      circle.strokeWidth = 3;
1123
1124      chart.data = data;
1125
1126        const body = document.querySelector('body')
1127        if (body.classList.contains('dark')) {
1128          amChartUpdate(chart, {
1129            dark: true
1130          })
1131        }
1132
1133        document.addEventListener('ChangeColorMode', function (e) {
1134          amChartUpdate(chart, e.detail)
1135        })
1136
1137      });
1138   }
1139
1140   if(jQuery('#am-stackedcolumn-chart').length){
1141      am4core.ready(function() {
1142
1143      // Themes begin
1144      am4core.useTheme(am4themes_animated);
1145      // Themes end
1146
1147      // Create chart instance
1148      var chart = am4core.create("am-stackedcolumn-chart", am4charts.XYChart);
1149      chart.colors.list = [am4core.color("#ff4b4b"),
1150      am4core.color("#37e6b0"),
1151      am4core.color("#fe721c")];
1152
1153
1154      // Add data
1155      chart.data = [{
1156        "year": "2016",
1157        "europe": 2.5,
1158        "namerica": 2.5,
1159        "asia": 2.1,
1160        "lamerica": 0.3,
1161        "meast": 0.2
1162      }, {
1163        "year": "2017",
1164        "europe": 2.6,
1165        "namerica": 2.7,
1166        "asia": 2.2,
1167        "lamerica": 0.3,
1168        "meast": 0.3
1169      }, {
1170        "year": "2018",
1171        "europe": 2.8,
1172        "namerica": 2.9,
1173        "asia": 2.4,
1174        "lamerica": 0.3,
1175        "meast": 0.3
1176      }];
1177
1178      // Create axes
1179      var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
1180      categoryAxis.dataFields.category = "year";
1181      categoryAxis.renderer.grid.template.location = 0;
1182
1183
1184      var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
1185      valueAxis.renderer.inside = true;
1186      valueAxis.renderer.labels.template.disabled = true;
1187      valueAxis.min = 0;
1188
1189      // Create series
1190      function createSeries(field, name) {
1191
1192        // Set up series
1193        var series = chart.series.push(new am4charts.ColumnSeries());
1194        series.name = name;
1195        series.dataFields.valueY = field;
1196        series.dataFields.categoryX = "year";
1197        series.sequencedInterpolation = true;
1198
1199        // Make it stacked
1200        series.stacked = true;
1201
1202        // Configure columns
1203        series.columns.template.width = am4core.percent(60);
1204        series.columns.template.tooltipText = "[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}";
1205
1206        // Add label
1207        var labelBullet = series.bullets.push(new am4charts.LabelBullet());
1208        labelBullet.label.text = "{valueY}";
1209        labelBullet.locationY = 0.5;
1210
1211        return series;
1212      }
1213
1214      createSeries("europe", "Europe");
1215      createSeries("namerica", "North America");
1216      createSeries("asia", "Asia-Pacific");
1217
1218      // Legend
1219      chart.legend = new am4charts.Legend();
1220
1221        const body = document.querySelector('body')
1222        if (body.classList.contains('dark')) {
1223          amChartUpdate(chart, {
1224            dark: true
1225          })
1226        }
1227
1228        document.addEventListener('ChangeColorMode', function (e) {
1229          amChartUpdate(chart, e.detail)
1230        })
1231
1232      }); // end am4core.ready()
1233   }
1234
1235   if(jQuery('#am-barline-chart').length){
1236      am4core.ready(function() {
1237
1238      // Themes begin
1239      am4core.useTheme(am4themes_animated);
1240      // Themes end
1241
1242      var chart = am4core.create("am-barline-chart", am4charts.XYChart);
1243      chart.colors.list = [am4core.color("#4788ff"),
1244      am4core.color("#37e6b0")];
1245
1246      chart.data = [{
1247              "year": "2005",
1248              "income": 23.5,
1249              "expenses": 18.1
1250          }, {
1251              "year": "2006",
1252              "income": 26.2,
1253              "expenses": 22.8
1254          }, {
1255              "year": "2007",
1256              "income": 30.1,
1257              "expenses": 23.9
1258          }, {
1259              "year": "2008",
1260              "income": 29.5,
1261              "expenses": 25.1
1262          }, {
1263              "year": "2009",
1264              "income": 24.6,
1265              "expenses": 25
1266          }];
1267
1268      //create category axis for years
1269      var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
1270      categoryAxis.dataFields.category = "year";
1271      categoryAxis.renderer.inversed = true;
1272      categoryAxis.renderer.grid.template.location = 0;
1273
1274      //create value axis for income and expenses
1275      var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
1276      valueAxis.renderer.opposite = true;
1277
1278
1279      //create columns
1280      var series = chart.series.push(new am4charts.ColumnSeries());
1281      series.dataFields.categoryY = "year";
1282      series.dataFields.valueX = "income";
1283      series.name = "Income";
1284      series.columns.template.fillOpacity = 0.5;
1285      series.columns.template.strokeOpacity = 0;
1286      series.tooltipText = "Income in {categoryY}: {valueX.value}";
1287
1288      //create line
1289      var lineSeries = chart.series.push(new am4charts.LineSeries());
1290      lineSeries.dataFields.categoryY = "year";
1291      lineSeries.dataFields.valueX = "expenses";
1292      lineSeries.name = "Expenses";
1293      lineSeries.strokeWidth = 3;
1294      lineSeries.tooltipText = "Expenses in {categoryY}: {valueX.value}";
1295
1296      //add bullets
1297      var circleBullet = lineSeries.bullets.push(new am4charts.CircleBullet());
1298      circleBullet.circle.fill = am4core.color("#fff");
1299      circleBullet.circle.strokeWidth = 2;
1300
1301      //add chart cursor

1302      chart.cursor = new am4charts.XYCursor();
1303      chart.cursor.behavior = "zoomY";
1304
1305      //add legend
1306      chart.legend = new am4charts.Legend();
1307
1308        const body = document.querySelector('body')
1309        if (body.classList.contains('dark')) {
1310          amChartUpdate(chart, {
1311            dark: true
1312          })
1313        }
1314
1315        document.addEventListener('ChangeColorMode', function (e) {
1316          amChartUpdate(chart, e.detail)
1317        })
1318
1319      }); // end am4core.ready()
1320   }
1321
1322   if(jQuery('#am-datedata-chart').length){
1323      am4core.ready(function() {
1324
1325      // Themes begin
1326      am4core.useTheme(am4themes_animated);
1327      // Themes end
1328
1329      // Create chart instance
1330      var chart = am4core.create("am-datedata-chart", am4charts.XYChart);
1331      chart.colors.list = [am4core.color("#57aeff")];
1332
1333      // Add data
1334      chart.data = [{
1335        "date": "2012-07-27",
1336        "value": 13
1337      }, {
1338        "date": "2012-07-28",
1339        "value": 11
1340      }, {
1341        "date": "2012-07-29",
1342        "value": 15
1343      }, {
1344        "date": "2012-07-30",
1345        "value": 16
1346      }, {
1347        "date": "2012-07-31",
1348        "value": 18
1349      }, {
1350        "date": "2012-08-01",
1351        "value": 13
1352      }, {
1353        "date": "2012-08-02",
1354        "value": 22
1355      }, {
1356        "date": "2012-08-03",
1357        "value": 23
1358      }, {
1359        "date": "2012-08-04",
1360        "value": 20
1361      }, {
1362        "date": "2012-08-05",
1363        "value": 17
1364      }, {
1365        "date": "2012-08-06",
1366        "value": 16
1367      }, {
1368        "date": "2012-08-07",
1369        "value": 18
1370      }, {
1371        "date": "2012-08-08",
1372        "value": 21
1373      }, {
1374        "date": "2012-08-09",
1375        "value": 26
1376      }, {
1377        "date": "2012-08-10",
1378        "value": 24
1379      }, {
1380        "date": "2012-08-11",
1381        "value": 29
1382      }, {
1383        "date": "2012-08-12",
1384        "value": 32
1385      }, {
1386        "date": "2012-08-13",
1387        "value": 18
1388      }, {
1389        "date": "2012-08-14",
1390        "value": 24
1391      }, {
1392        "date": "2012-08-15",
1393        "value": 22
1394      }, {
1395        "date": "2012-08-16",
1396        "value": 18
1397      }, {
1398        "date": "2012-08-17",
1399        "value": 19
1400      }, {
1401        "date": "2012-08-18",
1402        "value": 14
1403      }, {
1404        "date": "2012-08-19",
1405        "value": 15
1406      }, {
1407        "date": "2012-08-20",
1408        "value": 12
1409      }, {
1410        "date": "2012-08-21",
1411        "value": 8
1412      }, {
1413        "date": "2012-08-22",
1414        "value": 9
1415      }, {
1416        "date": "2012-08-23",
1417        "value": 8
1418      }, {
1419        "date": "2012-08-24",
1420        "value": 7
1421      }, {
1422        "date": "2012-08-25",
1423        "value": 5
1424      }, {
1425        "date": "2012-08-26",
1426        "value": 11
1427      }, {
1428        "date": "2012-08-27",
1429        "value": 13
1430      }, {
1431        "date": "2012-08-28",
1432        "value": 18
1433      }, {
1434        "date": "2012-08-29",
1435        "value": 20
1436      }, {
1437        "date": "2012-08-30",
1438        "value": 29
1439      }, {
1440        "date": "2012-08-31",
1441        "value": 33
1442      }, {
1443        "date": "2012-09-01",
1444        "value": 42
1445      }, {
1446        "date": "2012-09-02",
1447        "value": 35
1448      }, {
1449        "date": "2012-09-03",
1450        "value": 31
1451      }, {
1452        "date": "2012-09-04",
1453        "value": 47
1454      }, {
1455        "date": "2012-09-05",
1456        "value": 52
1457      }, {
1458        "date": "2012-09-06",
1459        "value": 46
1460      }, {
1461        "date": "2012-09-07",
1462        "value": 41
1463      }, {
1464        "date": "2012-09-08",
1465        "value": 43
1466      }, {
1467        "date": "2012-09-09",
1468        "value": 40
1469      }, {
1470        "date": "2012-09-10",
1471        "value": 39
1472      }, {
1473        "date": "2012-09-11",
1474        "value": 34
1475      }, {
1476        "date": "2012-09-12",
1477        "value": 29
1478      }, {
1479        "date": "2012-09-13",
1480        "value": 34
1481      }, {
1482        "date": "2012-09-14",
1483        "value": 37
1484      }, {
1485        "date": "2012-09-15",
1486        "value": 42
1487      }, {
1488        "date": "2012-09-16",
1489        "value": 49
1490      }, {
1491        "date": "2012-09-17",
1492        "value": 46
1493      }, {
1494        "date": "2012-09-18",
1495        "value": 47
1496      }, {
1497        "date": "2012-09-19",
1498        "value": 55
1499      }, {
1500        "date": "2012-09-20",
1501        "value": 59
1502      }, {
1503        "date": "2012-09-21",
1504        "value": 58
1505      }, {
1506        "date": "2012-09-22",
1507        "value": 57
1508      }, {
1509        "date": "2012-09-23",
1510        "value": 61
1511      }, {
1512        "date": "2012-09-24",
1513        "value": 59
1514      }, {
1515        "date": "2012-09-25",
1516        "value": 67
1517      }, {
1518        "date": "2012-09-26",
1519        "value": 65
1520      }, {
1521        "date": "2012-09-27",
1522        "value": 61
1523      }, {
1524        "date": "2012-09-28",
1525        "value": 66
1526      }, {
1527        "date": "2012-09-29",
1528        "value": 69
1529      }, {
1530        "date": "2012-09-30",
1531        "value": 71
1532      }, {
1533        "date": "2012-10-01",
1534        "value": 67
1535      }, {
1536        "date": "2012-10-02",
1537        "value": 63
1538      }, {
1539        "date": "2012-10-03",
1540        "value": 46
1541      }, {
1542        "date": "2012-10-04",
1543        "value": 32
1544      }, {
1545        "date": "2012-10-05",
1546        "value": 21
1547      }, {
1548        "date": "2012-10-06",
1549        "value": 18
1550      }, {
1551        "date": "2012-10-07",
1552        "value": 21
1553      }, {
1554        "date": "2012-10-08",
1555        "value": 28
1556      }, {
1557        "date": "2012-10-09",
1558        "value": 27
1559      }, {
1560        "date": "2012-10-10",
1561        "value": 36
1562      }, {
1563        "date": "2012-10-11",
1564        "value": 33
1565      }, {
1566        "date": "2012-10-12",
1567        "value": 31
1568      }, {
1569        "date": "2012-10-13",
1570        "value": 30
1571      }, {
1572        "date": "2012-10-14",
1573        "value": 34
1574      }, {
1575        "date": "2012-10-15",
1576        "value": 38
1577      }, {
1578        "date": "2012-10-16",
1579        "value": 37
1580      }, {
1581        "date": "2012-10-17",
1582        "value": 44
1583      }, {
1584        "date": "2012-10-18",
1585        "value": 49
1586      }, {
1587        "date": "2012-10-19",
1588        "value": 53
1589      }, {
1590        "date": "2012-10-20",
1591        "value": 57
1592      }, {
1593        "date": "2012-10-21",
1594        "value": 60
1595      }, {
1596        "date": "2012-10-22",
1597        "value": 61
1598      }, {
1599        "date": "2012-10-23",
1600        "value": 69
1601      }, {
1602        "date": "2012-10-24",
1603        "value": 67
1604      }, {
1605        "date": "2012-10-25",
1606        "value": 72
1607      }, {
1608        "date": "2012-10-26",
1609        "value": 77
1610      }, {
1611        "date": "2012-10-27",
1612        "value": 75
1613      }, {
1614        "date": "2012-10-28",
1615        "value": 70
1616      }, {
1617        "date": "2012-10-29",
1618        "value": 72
1619      }, {
1620        "date": "2012-10-30",
1621        "value": 70
1622      }, {
1623        "date": "2012-10-31",
1624        "value": 72
1625      }, {
1626        "date": "2012-11-01",
1627        "value": 73
1628      }, {
1629        "date": "2012-11-02",
1630        "value": 67
1631      }, {
1632        "date": "2012-11-03",
1633        "value": 68
1634      }, {
1635        "date": "2012-11-04",
1636        "value": 65
1637      }, {
1638        "date": "2012-11-05",
1639        "value": 71
1640      }, {
1641        "date": "2012-11-06",
1642        "value": 75
1643      }, {
1644        "date": "2012-11-07",
1645        "value": 74
1646      }, {
1647        "date": "2012-11-08",
1648        "value": 71
1649      }, {
1650        "date": "2012-11-09",
1651        "value": 76
1652      }, {
1653        "date": "2012-11-10",
1654        "value": 77
1655      }, {
1656        "date": "2012-11-11",
1657        "value": 81
1658      }, {
1659        "date": "2012-11-12",
1660        "value": 83
1661      }, {
1662        "date": "2012-11-13",
1663        "value": 80
1664      }, {
1665        "date": "2012-11-14",
1666        "value": 81
1667      }, {
1668        "date": "2012-11-15",
1669        "value": 87
1670      }, {
1671        "date": "2012-11-16",
1672        "value": 82
1673      }, {
1674        "date": "2012-11-17",
1675        "value": 86
1676      }, {
1677        "date": "2012-11-18",
1678        "value": 80
1679      }, {
1680        "date": "2012-11-19",
1681        "value": 87
1682      }, {
1683        "date": "2012-11-20",
1684        "value": 83
1685      }, {
1686        "date": "2012-11-21",
1687        "value": 85
1688      }, {
1689        "date": "2012-11-22",
1690        "value": 84
1691      }, {
1692        "date": "2012-11-23",
1693        "value": 82
1694      }, {
1695        "date": "2012-11-24",
1696        "value": 73
1697      }, {
1698        "date": "2012-11-25",
1699        "value": 71
1700      }, {
1701        "date": "2012-11-26",
1702        "value": 75
1703      }, {
1704        "date": "2012-11-27",
1705        "value": 79
1706      }, {
1707        "date": "2012-11-28",
1708        "value": 70
1709      }, {
1710        "date": "2012-11-29",
1711        "value": 73
1712      }, {
1713        "date": "2012-11-30",
1714        "value": 61
1715      }, {
1716        "date": "2012-12-01",
1717        "value": 62
1718      }, {
1719        "date": "2012-12-02",
1720        "value": 66
1721      }, {
1722        "date": "2012-12-03",
1723        "value": 65
1724      }, {
1725        "date": "2012-12-04",
1726        "value": 73
1727      }, {
1728        "date": "2012-12-05",
1729        "value": 79
1730      }, {
1731        "date": "2012-12-06",
1732        "value": 78
1733      }, {
1734        "date": "2012-12-07",
1735        "value": 78
1736      }, {
1737        "date": "2012-12-08",
1738        "value": 78
1739      }, {
1740        "date": "2012-12-09",
1741        "value": 74
1742      }, {
1743        "date": "2012-12-10",
1744        "value": 73
1745      }, {
1746        "date": "2012-12-11",
1747        "value": 75
1748      }, {
1749        "date": "2012-12-12",
1750        "value": 70
1751      }, {
1752        "date": "2012-12-13",
1753        "value": 77
1754      }, {
1755        "date": "2012-12-14",
1756        "value": 67
1757      }, {
1758        "date": "2012-12-15",
1759        "value": 62
1760      }, {
1761        "date": "2012-12-16",
1762        "value": 64
1763      }, {
1764        "date": "2012-12-17",
1765        "value": 61
1766      }, {
1767        "date": "2012-12-18",
1768        "value": 59
1769      }, {
1770        "date": "2012-12-19",
1771        "value": 53
1772      }, {
1773        "date": "2012-12-20",
1774        "value": 54
1775      }, {
1776        "date": "2012-12-21",
1777        "value": 56
1778      }, {
1779        "date": "2012-12-22",
1780        "value": 59
1781      }, {
1782        "date": "2012-12-23",
1783        "value": 58
1784      }, {
1785        "date": "2012-12-24",
1786        "value": 55
1787      }, {
1788        "date": "2012-12-25",
1789        "value": 52
1790      }, {
1791        "date": "2012-12-26",
1792        "value": 54
1793      }, {
1794        "date": "2012-12-27",
1795        "value": 50
1796      }, {
1797        "date": "2012-12-28",
1798        "value": 50
1799      }, {
1800        "date": "2012-12-29",
1801        "value": 51
1802      }, {
1803        "date": "2012-12-30",
1804        "value": 52
1805      }, {
1806        "date": "2012-12-31",
1807        "value": 58
1808      }, {
1809        "date": "2013-01-01",
1810        "value": 60
1811      }, {
1812        "date": "2013-01-02",
1813        "value": 67
1814      }, {
1815        "date": "2013-01-03",
1816        "value": 64
1817      }, {
1818        "date": "2013-01-04",
1819        "value": 66
1820      }, {
1821        "date": "2013-01-05",
1822        "value": 60
1823      }, {
1824        "date": "2013-01-06",
1825        "value": 63
1826      }, {
1827        "date": "2013-01-07",
1828        "value": 61
1829      }, {
1830        "date": "2013-01-08",
1831        "value": 60
1832      }, {
1833        "date": "2013-01-09",
1834        "value": 65
1835      }, {
1836        "date": "2013-01-10",
1837        "value": 75
1838      }, {
1839        "date": "2013-01-11",
1840        "value": 77
1841      }, {
1842        "date": "2013-01-12",
1843        "value": 78
1844      }, {
1845        "date": "2013-01-13",
1846        "value": 70
1847      }, {
1848        "date": "2013-01-14",
1849        "value": 70
1850      }, {
1851        "date": "2013-01-15",
1852        "value": 73
1853      }, {
1854        "date": "2013-01-16",
1855        "value": 71
1856      }, {
1857        "date": "2013-01-17",
1858        "value": 74
1859      }, {
1860        "date": "2013-01-18",
1861        "value": 78
1862      }, {
1863        "date": "2013-01-19",
1864        "value": 85
1865      }, {
1866        "date": "2013-01-20",
1867        "value": 82
1868      }, {
1869        "date": "2013-01-21",
1870        "value": 83
1871      }, {
1872        "date": "2013-01-22",
1873        "value": 88
1874      }, {
1875        "date": "2013-01-23",
1876        "value": 85
1877      }, {
1878        "date": "2013-01-24",
1879        "value": 85
1880      }, {
1881        "date": "2013-01-25",
1882        "value": 80
1883      }, {
1884        "date": "2013-01-26",
1885        "value": 87
1886      }, {
1887        "date": "2013-01-27",
1888        "value": 84
1889      }, {
1890        "date": "2013-01-28",
1891        "value": 83
1892      }, {
1893        "date": "2013-01-29",
1894        "value": 84
1895      }, {
1896        "date": "2013-01-30",
1897        "value": 81
1898      }];
1899
1900      // Set input format for the dates
1901      chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";
1902
1903      // Create axes
1904      var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
1905      var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
1906
1907      // Create series
1908      var series = chart.series.push(new am4charts.LineSeries());
1909      series.dataFields.valueY = "value";
1910      series.dataFields.dateX = "date";
1911      series.tooltipText = "{value}"
1912      series.strokeWidth = 2;
1913      series.minBulletDistance = 15;
1914
1915      // Drop-shaped tooltips
1916      series.tooltip.background.cornerRadius = 20;
1917      series.tooltip.background.strokeOpacity = 0;
1918      series.tooltip.pointerOrientation = "vertical";
1919      series.tooltip.label.minWidth = 40;
1920      series.tooltip.label.minHeight = 40;
1921      series.tooltip.label.textAlign = "middle";
1922      series.tooltip.label.textValign = "middle";
1923
1924      // Make bullets grow on hover
1925      var bullet = series.bullets.push(new am4charts.CircleBullet());
1926      bullet.circle.strokeWidth = 2;
1927      bullet.circle.radius = 4;
1928      bullet.circle.fill = am4core.color("#fff");
1929
1930      var bullethover = bullet.states.create("hover");
1931      bullethover.properties.scale = 1.3;
1932
1933      // Make a panning cursor

1934      chart.cursor = new am4charts.XYCursor();
1935      chart.cursor.behavior = "panXY";
1936      chart.cursor.xAxis = dateAxis;
1937      chart.cursor.snapToSeries = series;
1938
1939      // Create vertical scrollbar and place it before the value axis
1940      chart.scrollbarY = new am4core.Scrollbar();
1941      chart.scrollbarY.parent = chart.leftAxesContainer;
1942      chart.scrollbarY.toBack();
1943
1944      // Create a horizontal scrollbar with previe and place it underneath the date axis
1945      chart.scrollbarX = new am4charts.XYChartScrollbar();
1946      chart.scrollbarX.series.push(series);
1947      chart.scrollbarX.parent = chart.bottomAxesContainer;
1948
1949      dateAxis.start = 0.79;
1950      dateAxis.keepSelection = true;
1951
1952        const body = document.querySelector('body')
1953        if (body.classList.contains('dark')) {
1954          amChartUpdate(chart, {
1955            dark: true
1956          })
1957        }
1958
1959        document.addEventListener('ChangeColorMode', function (e) {
1960          amChartUpdate(chart, e.detail)
1961        })
1962
1963
1964      }); // end am4core.ready()
1965   }
1966   if(jQuery('#am-linescrollzomm-chart').length){
1967      am4core.ready(function() {
1968
1969      // Themes begin
1970      am4core.useTheme(am4themes_animated);
1971      // Themes end
1972
1973      // Create chart instance
1974      var chart = am4core.create("am-linescrollzomm-chart", am4charts.XYChart);
1975      chart.colors.list = [am4core.color("#57aeff")];
1976
1977      // Add data
1978      chart.data = generateChartData();
1979
1980      // Create axes
1981      var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
1982      dateAxis.renderer.minGridDistance = 50;
1983
1984      var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
1985
1986      // Create series
1987      var series = chart.series.push(new am4charts.LineSeries());
1988      series.dataFields.valueY = "visits";
1989      series.dataFields.dateX = "date";
1990      series.strokeWidth = 2;
1991      series.minBulletDistance = 10;
1992      series.tooltipText = "{valueY}";
1993      series.tooltip.pointerOrientation = "vertical";
1994      series.tooltip.background.cornerRadius = 20;
1995      series.tooltip.background.fillOpacity = 0.5;
1996      series.tooltip.label.padding(12,12,12,12)
1997
1998      // Add scrollbar
1999      chart.scrollbarX = new am4charts.XYChartScrollbar();

2000      chart.scrollbarX.series.push(series);
2001
2002      // Add cursor
2003      chart.cursor = new am4charts.XYCursor();
2004      chart.cursor.xAxis = dateAxis;
2005      chart.cursor.snapToSeries = series;
2006
2007      function generateChartData() {
2008          var chartData = [];
2009          var firstDate = new Date();
2010          firstDate.setDate(firstDate.getDate() - 1000);
2011          var visits = 1200;
2012          for (var i = 0; i < 500; i++) {
2013              var newDate = new Date(firstDate);
2014              newDate.setDate(newDate.getDate() + i);
2015
2016              visits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);
2017
2018              chartData.push({
2019                  date: newDate,
2020                  visits: visits
2021              });
2022          }
2023          return chartData;
2024      }
2025
2026        const body = document.querySelector('body')
2027        if (body.classList.contains('dark')) {
2028          amChartUpdate(chart, {
2029            dark: true
2030          })
2031        }
2032
2033        document.addEventListener('ChangeColorMode', function (e) {
2034          amChartUpdate(chart, e.detail)
2035        })
2036
2037      });
2038   }
2039
2040   if(jQuery('#am-zoomable-chart').length){
2041      am4core.ready(function() {
2042
2043      // Themes begin
2044      am4core.useTheme(am4themes_animated);
2045      // Themes end
2046
2047      // Create chart instance
2048      var chart = am4core.create("am-zoomable-chart", am4charts.XYChart);
2049      chart.colors.list = [am4core.color("#57aeff")];
2050
2051      // Add data
2052      chart.data = [ {
2053        "date": "2012-07-27",
2054        "value": 13
2055      }, {
2056        "date": "2012-07-28",
2057        "value": 11
2058      }, {
2059        "date": "2012-07-29",
2060        "value": 15
2061      }, {
2062        "date": "2012-07-30",
2063        "value": 16
2064      }, {
2065        "date": "2012-07-31",
2066        "value": 18
2067      }, {
2068        "date": "2012-08-01",
2069        "value": 13
2070      }, {
2071        "date": "2012-08-02",
2072        "value": 22
2073      }, {
2074        "date": "2012-08-03",
2075        "value": 23
2076      }, {
2077        "date": "2012-08-04",
2078        "value": 20
2079      }, {
2080        "date": "2012-08-05",
2081        "value": 17
2082      }, {
2083        "date": "2012-08-06",
2084        "value": 16
2085      }, {
2086        "date": "2012-08-07",
2087        "value": 18
2088      }, {
2089        "date": "2012-08-08",
2090        "value": 21
2091      }, {
2092        "date": "2012-08-09",
2093        "value": 26
2094      }, {
2095        "date": "2012-08-10",
2096        "value": 24
2097      }, {
2098        "date": "2012-08-11",
2099        "value": 29
2100      }, {
2101        "date": "2012-08-12",
2102        "value": 32
2103      }, {
2104        "date": "2012-08-13",
2105        "value": 18
2106      }, {
2107        "date": "2012-08-14",
2108        "value": 24
2109      }, {
2110        "date": "2012-08-15",
2111        "value": 22
2112      }, {
2113        "date": "2012-08-16",
2114        "value": 18
2115      }, {
2116        "date": "2012-08-17",
2117        "value": 19
2118      }, {
2119        "date": "2012-08-18",
2120        "value": 14
2121      }, {
2122        "date": "2012-08-19",
2123        "value": 15
2124      }, {
2125        "date": "2012-08-20",
2126        "value": 12
2127      }, {
2128        "date": "2012-08-21",
2129        "value": 8
2130      }, {
2131        "date": "2012-08-22",
2132        "value": 9
2133      }, {
2134        "date": "2012-08-23",
2135        "value": 8
2136      }, {
2137        "date": "2012-08-24",
2138        "value": 7
2139      }, {
2140        "date": "2012-08-25",
2141        "value": 5
2142      }, {
2143        "date": "2012-08-26",
2144        "value": 11
2145      }, {
2146        "date": "2012-08-27",
2147        "value": 13
2148      }, {
2149        "date": "2012-08-28",
2150        "value": 18
2151      }, {
2152        "date": "2012-08-29",
2153        "value": 20
2154      }, {
2155        "date": "2012-08-30",
2156        "value": 29
2157      }, {
2158        "date": "2012-08-31",
2159        "value": 33
2160      }, {
2161        "date": "2012-09-01",
2162        "value": 42
2163      }, {
2164        "date": "2012-09-02",
2165        "value": 35
2166      }, {
2167        "date": "2012-09-03",
2168        "value": 31
2169      }, {
2170        "date": "2012-09-04",
2171        "value": 47
2172      }, {
2173        "date": "2012-09-05",
2174        "value": 52
2175      }, {
2176        "date": "2012-09-06",
2177        "value": 46
2178      }, {
2179        "date": "2012-09-07",
2180        "value": 41
2181      }, {
2182        "date": "2012-09-08",
2183        "value": 43
2184      }, {
2185        "date": "2012-09-09",
2186        "value": 40
2187      }, {
2188        "date": "2012-09-10",
2189        "value": 39
2190      }, {
2191        "date": "2012-09-11",
2192        "value": 34
2193      }, {
2194        "date": "2012-09-12",
2195        "value": 29
2196      }, {
2197        "date": "2012-09-13",
2198        "value": 34
2199      }, {
2200        "date": "2012-09-14",
2201        "value": 37
2202      }, {
2203        "date": "2012-09-15",
2204        "value": 42
2205      }, {
2206        "date": "2012-09-16",
2207        "value": 49
2208      }, {
2209        "date": "2012-09-17",
2210        "value": 46
2211      }, {
2212        "date": "2012-09-18",
2213        "value": 47
2214      }, {
2215        "date": "2012-09-19",
2216        "value": 55
2217      }, {
2218        "date": "2012-09-20",
2219        "value": 59
2220      }, {
2221        "date": "2012-09-21",
2222        "value": 58
2223      }, {
2224        "date": "2012-09-22",
2225        "value": 57
2226      }, {
2227        "date": "2012-09-23",
2228        "value": 61
2229      }, {
2230        "date": "2012-09-24",
2231        "value": 59
2232      }, {
2233        "date": "2012-09-25",
2234        "value": 67
2235      }, {
2236        "date": "2012-09-26",
2237        "value": 65
2238      }, {
2239        "date": "2012-09-27",
2240        "value": 61
2241      }, {
2242        "date": "2012-09-28",
2243        "value": 66
2244      }, {
2245        "date": "2012-09-29",
2246        "value": 69
2247      }, {
2248        "date": "2012-09-30",
2249        "value": 71
2250      }, {
2251        "date": "2012-10-01",
2252        "value": 67
2253      }, {
2254        "date": "2012-10-02",
2255        "value": 63
2256      }, {
2257        "date": "2012-10-03",
2258        "value": 46
2259      }, {
2260        "date": "2012-10-04",
2261        "value": 32
2262      }, {
2263        "date": "2012-10-05",
2264        "value": 21
2265      }, {
2266        "date": "2012-10-06",
2267        "value": 18
2268      }, {
2269        "date": "2012-10-07",
2270        "value": 21
2271      }, {
2272        "date": "2012-10-08",
2273        "value": 28
2274      }, {
2275        "date": "2012-10-09",
2276        "value": 27
2277      }, {
2278        "date": "2012-10-10",
2279        "value": 36
2280      }, {
2281        "date": "2012-10-11",
2282        "value": 33
2283      }, {
2284        "date": "2012-10-12",
2285        "value": 31
2286      }, {
2287        "date": "2012-10-13",
2288        "value": 30
2289      }, {
2290        "date": "2012-10-14",
2291        "value": 34
2292      }, {
2293        "date": "2012-10-15",
2294        "value": 38
2295      }, {
2296        "date": "2012-10-16",
2297        "value": 37
2298      }, {
2299        "date": "2012-10-17",
2300        "value": 44
2301      }, {
2302        "date": "2012-10-18",
2303        "value": 49
2304      }, {
2305        "date": "2012-10-19",
2306        "value": 53
2307      }, {
2308        "date": "2012-10-20",
2309        "value": 57
2310      }, {
2311        "date": "2012-10-21",
2312        "value": 60
2313      }, {
2314        "date": "2012-10-22",
2315        "value": 61
2316      }, {
2317        "date": "2012-10-23",
2318        "value": 69
2319      }, {
2320        "date": "2012-10-24",
2321        "value": 67
2322      }, {
2323        "date": "2012-10-25",
2324        "value": 72
2325      }, {
2326        "date": "2012-10-26",
2327        "value": 77
2328      }, {
2329        "date": "2012-10-27",
2330        "value": 75
2331      }, {
2332        "date": "2012-10-28",
2333        "value": 70
2334      }, {
2335        "date": "2012-10-29",
2336        "value": 72
2337      }, {
2338        "date": "2012-10-30",
2339        "value": 70
2340      }, {
2341        "date": "2012-10-31",
2342        "value": 72
2343      }, {
2344        "date": "2012-11-01",
2345        "value": 73
2346      }, {
2347        "date": "2012-11-02",
2348        "value": 67
2349      }, {
2350        "date": "2012-11-03",
2351        "value": 68
2352      }, {
2353        "date": "2012-11-04",
2354        "value": 65
2355      }, {
2356        "date": "2012-11-05",
2357        "value": 71
2358      }, {
2359        "date": "2012-11-06",
2360        "value": 75
2361      }, {
2362        "date": "2012-11-07",
2363        "value": 74
2364      }, {
2365        "date": "2012-11-08",
2366        "value": 71
2367      }, {
2368        "date": "2012-11-09",
2369        "value": 76
2370      }, {
2371        "date": "2012-11-10",
2372        "value": 77
2373      }, {
2374        "date": "2012-11-11",
2375        "value": 81
2376      }, {
2377        "date": "2012-11-12",
2378        "value": 83
2379      }, {
2380        "date": "2012-11-13",
2381        "value": 80
2382      }, {
2383        "date": "2012-11-18",
2384        "value": 80
2385      }, {
2386        "date": "2012-11-19",
2387        "value": 87
2388      }, {
2389        "date": "2012-11-20",
2390        "value": 83
2391      }, {
2392        "date": "2012-11-21",
2393        "value": 85
2394      }, {
2395        "date": "2012-11-22",
2396        "value": 84
2397      }, {
2398        "date": "2012-11-23",
2399        "value": 82
2400      }, {
2401        "date": "2012-11-24",
2402        "value": 73
2403      }, {
2404        "date": "2012-11-25",
2405        "value": 71
2406      }, {
2407        "date": "2012-11-26",
2408        "value": 75
2409      }, {
2410        "date": "2012-11-27",
2411        "value": 79
2412      }, {
2413        "date": "2012-11-28",
2414        "value": 70
2415      }, {
2416        "date": "2012-11-29",
2417        "value": 73
2418      }, {
2419        "date": "2012-11-30",
2420        "value": 61
2421      }, {
2422        "date": "2012-12-01",
2423        "value": 62
2424      }, {
2425        "date": "2012-12-02",
2426        "value": 66
2427      }, {
2428        "date": "2012-12-03",
2429        "value": 65
2430      }, {
2431        "date": "2012-12-04",
2432        "value": 73
2433      }, {
2434        "date": "2012-12-05",
2435        "value": 79
2436      }, {
2437        "date": "2012-12-06",
2438        "value": 78
2439      }, {
2440        "date": "2012-12-07",
2441        "value": 78
2442      }, {
2443        "date": "2012-12-08",
2444        "value": 78
2445      }, {
2446        "date": "2012-12-09",
2447        "value": 74
2448      }, {
2449        "date": "2012-12-10",
2450        "value": 73
2451      }, {
2452        "date": "2012-12-11",
2453        "value": 75
2454      }, {
2455        "date": "2012-12-12",
2456        "value": 70
2457      }, {
2458        "date": "2012-12-13",
2459        "value": 77
2460      }, {
2461        "date": "2012-12-14",
2462        "value": 67
2463      }, {
2464        "date": "2012-12-15",
2465        "value": 62
2466      }, {
2467        "date": "2012-12-16",
2468        "value": 64
2469      }, {
2470        "date": "2012-12-17",
2471        "value": 61
2472      }, {
2473        "date": "2012-12-18",
2474        "value": 59
2475      }, {
2476        "date": "2012-12-19",
2477        "value": 53
2478      }, {
2479        "date": "2012-12-20",
2480        "value": 54
2481      }, {
2482        "date": "2012-12-21",
2483        "value": 56
2484      }, {
2485        "date": "2012-12-22",
2486        "value": 59
2487      }, {
2488        "date": "2012-12-23",
2489        "value": 58
2490      }, {
2491        "date": "2012-12-24",
2492        "value": 55
2493      }, {
2494        "date": "2012-12-25",
2495        "value": 52
2496      }, {
2497        "date": "2012-12-26",
2498        "value": 54
2499      }, {
2500        "date": "2012-12-27",
2501        "value": 50
2502      }, {
2503        "date": "2012-12-28",
2504        "value": 50
2505      }, {
2506        "date": "2012-12-29",
2507        "value": 51
2508      }, {
2509        "date": "2012-12-30",
2510        "value": 52
2511      }, {
2512        "date": "2012-12-31",
2513        "value": 58
2514      }, {
2515        "date": "2013-01-01",
2516        "value": 60
2517      }, {
2518        "date": "2013-01-02",
2519        "value": 67
2520      }, {
2521        "date": "2013-01-03",
2522        "value": 64
2523      }, {
2524        "date": "2013-01-04",
2525        "value": 66
2526      }, {
2527        "date": "2013-01-05",
2528        "value": 60
2529      }, {
2530        "date": "2013-01-06",
2531        "value": 63
2532      }, {
2533        "date": "2013-01-07",
2534        "value": 61
2535      }, {
2536        "date": "2013-01-08",
2537        "value": 60
2538      }, {
2539        "date": "2013-01-09",
2540        "value": 65
2541      }, {
2542        "date": "2013-01-10",
2543        "value": 75
2544      }, {
2545        "date": "2013-01-11",
2546        "value": 77
2547      }, {
2548        "date": "2013-01-12",
2549        "value": 78
2550      }, {
2551        "date": "2013-01-13",
2552        "value": 70
2553      }, {
2554        "date": "2013-01-14",
2555        "value": 70
2556      }, {
2557        "date": "2013-01-15",
2558        "value": 73
2559      }, {
2560        "date": "2013-01-16",
2561        "value": 71
2562      }, {
2563        "date": "2013-01-17",
2564        "value": 74
2565      }, {
2566        "date": "2013-01-18",
2567        "value": 78
2568      }, {
2569        "date": "2013-01-19",
2570        "value": 85
2571      }, {
2572        "date": "2013-01-20",
2573        "value": 82
2574      }, {
2575        "date": "2013-01-21",
2576        "value": 83
2577      }, {
2578        "date": "2013-01-22",
2579        "value": 88
2580      }, {
2581        "date": "2013-01-23",
2582        "value": 85
2583      }, {
2584        "date": "2013-01-24",
2585        "value": 85
2586      }, {
2587        "date": "2013-01-25",
2588        "value": 80
2589      }, {
2590        "date": "2013-01-26",
2591        "value": 87
2592      }, {
2593        "date": "2013-01-27",
2594        "value": 84
2595      }, {
2596        "date": "2013-01-28",
2597        "value": 83
2598      }, {
2599        "date": "2013-01-29",
2600        "value": 84
2601      }, {
2602        "date": "2013-01-30",
2603        "value": 81
2604      } ];
2605
2606      // Create axes
2607      var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
2608      dateAxis.renderer.grid.template.location = 0;
2609      dateAxis.renderer.minGridDistance = 50;
2610
2611      var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
2612
2613      // Create series
2614      var series = chart.series.push(new am4charts.LineSeries());
2615      series.dataFields.valueY = "value";
2616      series.dataFields.dateX = "date";
2617      series.strokeWidth = 3;
2618      series.fillOpacity = 0.5;
2619
2620      // Add vertical scrollbar
2621      chart.scrollbarY = new am4core.Scrollbar();
2622      chart.scrollbarY.marginLeft = 0;
2623
2624      // Add cursor

2625      chart.cursor = new am4charts.XYCursor();
2626      chart.cursor.behavior = "zoomY";
2627      chart.cursor.lineX.disabled = true;
2628
2629        const body = document.querySelector('body')
2630        if (body.classList.contains('dark')) {
2631          amChartUpdate(chart, {
2632            dark: true
2633          })
2634        }
2635
2636        document.addEventListener('ChangeColorMode', function (e) {
2637          amChartUpdate(chart, e.detail)
2638        })
2639
2640      }); // end am4core.ready()
2641   }
2642   if(jQuery('#am-radar-chart').length){
2643      am4core.ready(function() {
2644
2645      // Themes begin
2646      am4core.useTheme(am4themes_animated);
2647      // Themes end
2648
2649      /* Create chart instance */
2650      var chart = am4core.create("am-radar-chart", am4charts.RadarChart);
2651      chart.colors.list = [am4core.color("#4788ff")];
2652
2653      /* Add data */
2654      chart.data = [{
2655        "country": "Lithuania",
2656        "litres": 501
2657      }, {
2658        "country": "Czechia",
2659        "litres": 301
2660      }, {
2661        "country": "Ireland",
2662        "litres": 266
2663      }, {
2664        "country": "Germany",
2665        "litres": 165
2666      }, {
2667        "country": "Australia",
2668        "litres": 139
2669      }, {
2670        "country": "Austria",
2671        "litres": 336
2672      }, {
2673        "country": "UK",
2674        "litres": 290
2675      }, {
2676        "country": "Belgium",
2677        "litres": 325
2678      }, {
2679        "country": "The Netherlands",
2680        "litres": 40
2681      }];
2682
2683      /* Create axes */
2684      var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
2685      categoryAxis.dataFields.category = "country";
2686
2687      var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
2688      valueAxis.renderer.axisFills.template.fill = chart.colors.getIndex(2);
2689      valueAxis.renderer.axisFills.template.fillOpacity = 0.05;
2690
2691      /* Create and configure series */
2692      var series = chart.series.push(new am4charts.RadarSeries());
2693      series.dataFields.valueY = "litres";
2694      series.dataFields.categoryX = "country";
2695      series.name = "Sales";
2696      series.strokeWidth = 3;
2697
2698        const body = document.querySelector('body')
2699        if (body.classList.contains('dark')) {
2700          amChartUpdate(chart, {
2701            dark: true
2702          })
2703        }
2704
2705        document.addEventListener('ChangeColorMode', function (e) {
2706          amChartUpdate(chart, e.detail)
2707        })
2708
2709      }); // end am4core.ready()
2710   }
2711   if(jQuery('#am-polar-chart').length){
2712      am4core.ready(function() {
2713
2714      // Themes begin
2715      am4core.useTheme(am4themes_animated);
2716      // Themes end
2717
2718      /* Create chart instance */
2719      var chart = am4core.create("am-polar-chart", am4charts.RadarChart);
2720
2721      /* Add data */
2722      chart.data = [ {
2723        "direction": "N",
2724        "value": 8
2725      }, {
2726        "direction": "NE",
2727        "value": 9
2728      }, {
2729        "direction": "E",
2730        "value": 4.5
2731      }, {
2732        "direction": "SE",
2733        "value": 3.5
2734      }, {
2735        "direction": "S",
2736        "value": 9.2
2737      }, {
2738        "direction": "SW",
2739        "value": 8.4
2740      }, {
2741        "direction": "W",
2742        "value": 11.1
2743      }, {
2744        "direction": "NW",
2745        "value": 10
2746      } ];
2747
2748      /* Create axes */
2749      var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
2750      categoryAxis.dataFields.category = "direction";
2751
2752      var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
2753      //valueAxis.renderer.gridType = "polygons";
2754
2755      var range = categoryAxis.axisRanges.create();
2756      range.category = "NW";
2757      range.endCategory = "NW";
2758      range.axisFill.fill = am4core.color("#4788ff");
2759      range.axisFill.fillOpacity = 0.3;
2760
2761      var range2 = categoryAxis.axisRanges.create();
2762      range2.category = "N";
2763      range2.endCategory = "N";
2764      range2.axisFill.fill = am4core.color("#ff4b4b");
2765      range2.axisFill.fillOpacity = 0.3;
2766
2767      var range3 = categoryAxis.axisRanges.create();
2768      range3.category = "SE";
2769      range3.endCategory = "SW";
2770      range3.axisFill.fill = am4core.color("#37e6b0");
2771      range3.axisFill.fillOpacity = 0.3;
2772      range3.locations.endCategory = 0;
2773
2774      /* Create and configure series */
2775      var series = chart.series.push(new am4charts.RadarSeries());
2776      series.dataFields.valueY = "value";
2777      series.dataFields.categoryX = "direction";
2778      series.name = "Wind direction";
2779      series.strokeWidth = 3;
2780      series.fillOpacity = 0.2;
2781
2782        const body = document.querySelector('body')
2783        if (body.classList.contains('dark')) {
2784          amChartUpdate(chart, {
2785            dark: true
2786          })
2787        }
2788
2789        document.addEventListener('ChangeColorMode', function (e) {
2790          amChartUpdate(chart, e.detail)
2791        })
2792
2793      }); // end am4core.ready()
2794   }
2795
2796   if(jQuery('#am-polarscatter-chart').length){
2797      am4core.ready(function() {
2798
2799      // Themes begin
2800      am4core.useTheme(am4themes_animated);
2801      // Themes end
2802
2803      /* Create chart instance */
2804      var chart = am4core.create("am-polarscatter-chart", am4charts.RadarChart);
2805       chart.colors.list = [am4core.color("#4788ff"),am4core.color("#fe721c"),am4core.color("#37e6b0")];
2806
2807      /* Add data */
2808      chart.data = [{
2809        "country": "Lithuania",
2810        "litres": 501,
2811        "units": 250
2812      }, {
2813        "country": "Czech Republic",
2814        "litres": 301,
2815        "units": 222
2816      }, {
2817        "country": "Ireland",
2818        "litres": 266,
2819        "units": 179
2820      }, {
2821        "country": "Germany",
2822        "litres": 165,
2823        "units": 298
2824      }, {
2825        "country": "Australia",
2826        "litres": 139,
2827        "units": 299
2828      }];
2829
2830      /* Create axes */
2831      var xAxis = chart.xAxes.push(new am4charts.ValueAxis());
2832      xAxis.renderer.maxLabelPosition = 0.99;
2833
2834      var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
2835      yAxis.renderer.labels.template.verticalCenter = "bottom";
2836      yAxis.renderer.labels.template.horizontalCenter = "right";
2837      yAxis.renderer.maxLabelPosition = 0.99;
2838      yAxis.renderer.labels.template.paddingBottom = 1;
2839      yAxis.renderer.labels.template.paddingRight = 3;
2840
2841      /* Create and configure series */
2842      var series1 = chart.series.push(new am4charts.RadarSeries());
2843      series1.bullets.push(new am4charts.CircleBullet());
2844      series1.strokeOpacity = 0;
2845      series1.dataFields.valueX = "x";
2846      series1.dataFields.valueY = "y";
2847      series1.name = "Series #1";
2848      series1.sequencedInterpolation = true;
2849      series1.sequencedInterpolationDelay = 10;
2850      series1.data = [
2851        { "x": 83, "y": 5.1 },
2852        { "x": 44, "y": 5.8 },
2853        { "x": 76, "y": 9 },
2854        { "x": 2, "y": 1.4 },
2855        { "x": 100, "y": 8.3 },
2856        { "x": 96, "y": 1.7 },
2857        { "x": 68, "y": 3.9 },

2858        { "x": 0, "y": 3 },
2859        { "x": 100, "y": 4.1 },
2860        { "x": 16, "y": 5.5 },
2861        { "x": 71, "y": 6.8 },
2862        { "x": 100, "y": 7.9 },
2863        { "x": 35, "y": 8 },
2864        { "x": 44, "y": 6 },
2865        { "x": 64, "y": 0.7 },
2866        { "x": 53, "y": 3.3 },
2867        { "x": 92, "y": 4.1 },
2868        { "x": 43, "y": 7.3 },
2869        { "x": 15, "y": 7.5 },
2870        { "x": 43, "y": 4.3 },
2871        { "x": 90, "y": 9.9 }
2872      ];
2873
2874      var series2 = chart.series.push(new am4charts.RadarSeries());
2875      series2.bullets.push(new am4charts.CircleBullet());
2876      series2.strokeOpacity = 0;
2877      series2.dataFields.valueX = "x";
2878      series2.dataFields.valueY = "y";
2879      series2.name = "Series #2";
2880      series2.sequencedInterpolation = true;
2881      series2.sequencedInterpolationDelay = 10;
2882      series2.data = [
2883        { "x": 178, "y": 1.3 },
2884        { "x": 129, "y": 3.4 },
2885        { "x": 99, "y": 2.4 },
2886        { "x": 80, "y": 9.9 },
2887        { "x": 118, "y": 9.4 },
2888        { "x": 103, "y": 8.7 },
2889        { "x": 91, "y": 4.2 },
2890        { "x": 151, "y": 1.2 },
2891        { "x": 168, "y": 5.2 },
2892        { "x": 168, "y": 1.6 },
2893        { "x": 152, "y": 1.2 },
2894        { "x": 138, "y": 7.7 },
2895        { "x": 107, "y": 3.9 },
2896        { "x": 124, "y": 0.7 },
2897        { "x": 130, "y": 2.6 },
2898        { "x": 86, "y": 9.2 },
2899        { "x": 169, "y": 7.5 },
2900        { "x": 122, "y": 9.9 },
2901        { "x": 100, "y": 3.8 },
2902        { "x": 172, "y": 4.1 },
2903        { "x": 140, "y": 7.3 },
2904        { "x": 161, "y": 2.3 },
2905        { "x": 141, "y": 0.9 }
2906      ];
2907
2908      var series3 = chart.series.push(new am4charts.RadarSeries());
2909      series3.bullets.push(new am4charts.CircleBullet());
2910      series3.strokeOpacity = 0;
2911      series3.dataFields.valueX = "x";
2912      series3.dataFields.valueY = "y";
2913      series3.name = "Series #3";
2914      series3.sequencedInterpolation = true;
2915      series3.sequencedInterpolationDelay = 10;
2916      series3.data = [
2917        { "x": 419, "y": 4.9 },
2918        { "x": 417, "y": 5.5 },
2919        { "x": 434, "y": 0.1 },
2920        { "x": 344, "y": 2.5 },
2921        { "x": 279, "y": 7.5 },
2922        { "x": 307, "y": 8.4 },
2923        { "x": 279, "y": 9 },
2924        { "x": 220, "y": 8.4 },
2925        { "x": 201, "y": 9.7 },
2926        { "x": 288, "y": 1.2 },
2927        { "x": 333, "y": 7.4 },
2928        { "x": 308, "y": 1.9 },
2929        { "x": 330, "y": 8 },
2930        { "x": 408, "y": 1.7 },
2931        { "x": 274, "y": 0.8 },
2932        { "x": 296, "y": 3.1 },
2933        { "x": 279, "y": 4.3 },
2934        { "x": 379, "y": 5.6 },
2935        { "x": 175, "y": 6.8 }
2936      ];
2937
2938      /* Add legend */
2939      chart.legend = new am4charts.Legend();
2940
2941      /* Add cursor */
2942      chart.cursor = new am4charts.RadarCursor();
2943
2944        const body = document.querySelector('body')
2945        if (body.classList.contains('dark')) {
2946          amChartUpdate(chart, {
2947            dark: true
2948          })
2949        }
2950
2951        document.addEventListener('ChangeColorMode', function (e) {
2952          amChartUpdate(chart, e.detail)
2953        })
2954
2955      }); // end am4core.ready()
2956   }
2957   if(jQuery('#am-3dpie-chart').length){
2958      am4core.ready(function() {
2959
2960      // Themes begin
2961      am4core.useTheme(am4themes_animated);
2962      // Themes end
2963
2964      var chart = am4core.create("am-3dpie-chart", am4charts.PieChart3D);
2965      chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
2966
2967      chart.legend = new am4charts.Legend();
2968
2969      chart.data = [
2970        {
2971          country: "Lithuania",
2972          litres: 501.9,
2973          fill: "red"
2974        },
2975        {
2976          country: "Germany",
2977          litres: 165.8
2978        },
2979        {
2980          country: "Australia",
2981          litres: 139.9
2982        },
2983        {
2984          country: "Austria",
2985          litres: 128.3
2986        },
2987        {
2988          country: "UK",
2989          litres: 99
2990        },
2991        {
2992          country: "Belgium",
2993          litres: 60
2994        }
2995      ];
2996
2997      var series = chart.series.push(new am4charts.PieSeries3D());
2998      series.colors.list = [am4core.color("#4788ff"),am4core.color("#37e6b0"),am4core.color("#ff4b4b"),
2999      am4core.color("#fe721c"),am4core.color("#876cfe"),am4core.color("#01041b")];
3000      series.dataFields.value = "litres";
3001      series.dataFields.category = "country";
3002
3003        const body = document.querySelector('body')
3004        if (body.classList.contains('dark')) {
3005          amChartUpdate(chart, {
3006            dark: true
3007          })
3008        }
3009
3010        document.addEventListener('ChangeColorMode', function (e) {
3011          amChartUpdate(chart, e.detail)
3012        })
3013
3014      }); // end am4core.ready()
3015   }
3016
3017   if(jQuery('#am-layeredcolumn-chart').length){
3018      am4core.ready(function() {
3019
3020      // Themes begin
3021      am4core.useTheme(am4themes_animated);
3022      // Themes end
3023
3024      // Create chart instance
3025      var chart = am4core.create("am-layeredcolumn-chart", am4charts.XYChart);
3026      chart.colors.list = [am4core.color("#37e6b0"),am4core.color("#4788ff")];
3027
3028      // Add percent sign to all numbers
3029      chart.numberFormatter.numberFormat = "#.#'%'";
3030
3031      // Add data
3032      chart.data = [{
3033          "country": "USA",
3034          "year2004": 3.5,
3035          "year2005": 4.2
3036      }, {
3037          "country": "UK",
3038          "year2004": 1.7,
3039          "year2005": 3.1
3040      }, {
3041          "country": "Canada",
3042          "year2004": 2.8,
3043          "year2005": 2.9
3044      }, {
3045          "country": "Japan",
3046          "year2004": 2.6,
3047          "year2005": 2.3
3048      }, {
3049          "country": "France",
3050          "year2004": 1.4,
3051          "year2005": 2.1
3052      }, {
3053          "country": "Brazil",
3054          "year2004": 2.6,
3055          "year2005": 4.9
3056      }];
3057
3058      // Create axes
3059      var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
3060      categoryAxis.dataFields.category = "country";
3061      categoryAxis.renderer.grid.template.location = 0;
3062      categoryAxis.renderer.minGridDistance = 30;
3063
3064      var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
3065      valueAxis.title.text = "GDP growth rate";
3066      valueAxis.title.fontWeight = 800;
3067
3068      // Create series
3069      var series = chart.series.push(new am4charts.ColumnSeries());
3070      series.dataFields.valueY = "year2004";
3071      series.dataFields.categoryX = "country";
3072      series.clustered = false;

3073      series.tooltipText = "GDP grow in {categoryX} (2004): [bold]{valueY}[/]";
3074
3075      var series2 = chart.series.push(new am4charts.ColumnSeries());
3076      series2.dataFields.valueY = "year2005";
3077      series2.dataFields.categoryX = "country";
3078      series2.clustered = false;
3079      series2.columns.template.width = am4core.percent(50);
3080      series2.tooltipText = "GDP grow in {categoryX} (2005): [bold]{valueY}[/]";
3081
3082      chart.cursor = new am4charts.XYCursor();
3083      chart.cursor.lineX.disabled = true;
3084      chart.cursor.lineY.disabled = true;
3085
3086        const body = document.querySelector('body')
3087        if (body.classList.contains('dark')) {
3088          amChartUpdate(chart, {
3089            dark: true
3090          })
3091        }
3092
3093        document.addEventListener('ChangeColorMode', function (e) {
3094          amChartUpdate(chart, e.detail)
3095        })
3096
3097      }); // end am4core.ready()
3098   }
3099
3100/*---------------------------------------------------------------------
3101   Morris Charts
3102-----------------------------------------------------------------------*/
3103
3104if(jQuery('#morris-line-chart').length){
3105  new Morris.Line({
3106    // ID of the element in which to draw the chart.
3107    element: 'morris-line-chart',
3108    // Chart data records -- each entry in this array corresponds to a point on
3109    // the chart.
3110    data: [
3111      { year: '2008', value: 20 },
3112      { year: '2009', value: 10 },
3113      { year: '2010', value: 5 },
3114      { year: '2011', value: 5 },
3115      { year: '2012', value: 20 }
3116    ],
3117    // The name of the data record attribute that contains x-values.
3118    xkey: 'year',
3119    // A list of names of data record attributes that contain y-values.
3120    ykeys: ['value'],
3121    // Labels for the ykeys -- will be displayed when you hover over the
3122    // chart.
3123    labels: ['Value'],
3124    lineColors: ['#4788ff']
3125  });
3126}
3127
3128if(jQuery('#morris-bar-chart').length){
3129 Morris.Bar({
3130element: 'morris-bar-chart',
3131data: [
3132  {x: '2011 Q1', y: 3, z: 2, a: 3},
3133  {x: '2011 Q2', y: 2, z: null, a: 1},
3134  {x: '2011 Q3', y: 0, z: 2, a: 4},
3135  {x: '2011 Q4', y: 2, z: 4, a: 3}
3136],
3137xkey: 'x',
3138ykeys: ['y', 'z', 'a'],
3139labels: ['Y', 'Z', 'A'],
3140barColors: ['#4788ff', '#fe721c', '#37e6b0'],
3141hoverCallback: function (index, options, content, row) {
3142                    return '';
3143                  }
3144}).on('click', function(i, row){
3145console.log(i, row);
3146});
3147}
3148
3149if(jQuery('#morris-area-chart').length){
3150  var area = new Morris.Area({
3151    element: 'morris-area-chart',
3152    resize: true,
3153    data: [
3154      {y: '2011 Q1', item1: 2666, item2: 2666},
3155      {y: '2011 Q2', item1: 2778, item2: 2294},
3156      {y: '2011 Q3', item1: 4912, item2: 1969},
3157      {y: '2011 Q4', item1: 3767, item2: 3597},
3158      {y: '2012 Q1', item1: 6810, item2: 1914},
3159      {y: '2012 Q2', item1: 5670, item2: 4293},
3160      {y: '2012 Q3', item1: 4820, item2: 3795},
3161      {y: '2012 Q4', item1: 15073, item2: 5967},
3162      {y: '2013 Q1', item1: 10687, item2: 4460},
3163      {y: '2013 Q2', item1: 8432, item2: 5713}
3164    ],
3165    xkey: 'y',
3166    ykeys: ['item1', 'item2'],
3167    labels: ['Item 1', 'Item 2'],
3168    lineColors: ['#75e275', '#75bcff'],
3169    hoverCallback: function (index, options, content, row) {
3170                    return '';
3171                  }
3172  });
3173}
3174
3175if(jQuery('#morris-donut-chart').length){
3176  var donut = new Morris.Donut({
3177    element: 'morris-donut-chart',
3178    resize: true,
3179    colors: ["#4788ff", "#ff4b4b", "#37e6b0"],
3180    data: [
3181      {label: "Download Sales", value: 12},
3182      {label: "In-Store Sales", value: 30},
3183      {label: "Mail-Order Sales", value: 20}
3184    ],
3185    hideHover: 'auto'
3186  });
3187}
3188
3189/*---------------------------------------------------------------------
3190   High Charts
3191-----------------------------------------------------------------------*/
3192if (jQuery("#high-basicline-chart").length && Highcharts.chart("high-basicline-chart", {
3193    chart: {
3194      type: "spline",
3195      inverted: !0
3196    },
3197    title: {
3198      text: "Atmosphere Temperature by Altitude"
3199    },
3200    subtitle: {
3201      text: "According to the Standard Atmosphere Model"
3202    },
3203    xAxis: {
3204      reversed: !1,
3205      title: {
3206        enabled: !0,
3207        text: "Altitude"
3208      },
3209      labels: {
3210        format: "{value} km"
3211      },
3212      maxPadding: .05,
3213      showLastLabel: !0
3214    },
3215    yAxis: {
3216      title: {
3217        text: "Temperature"
3218      },
3219      labels: {
3220        format: "{value}Â°"
3221      },
3222      lineWidth: 2
3223    },
3224    legend: {
3225      enabled: !1
3226    },
3227    tooltip: {
3228      headerFormat: "<b>{series.name}</b><br/>",
3229      pointFormat: "{point.x} km: {point.y}Â°C"
3230    },
3231    plotOptions: {
3232      spline: {
3233        marker: {
3234          enable: !1
3235        }
3236      }
3237    },
3238    series: [{
3239      name: "Temperature",
3240      color: "#4788ff",
3241      data: [
3242        [0, 15],
3243        [10, -50],
3244        [20, -56.5],
3245        [30, -46.5],
3246        [40, -22.1],
3247        [50, -2.5],
3248        [60, -27.7],
3249        [70, -55.7],
3250        [80, -76.5]
3251      ]
3252    }]
3253  }), jQuery("#high-area-chart").length && Highcharts.chart("high-area-chart", {
3254    chart: {
3255      type: "areaspline"
3256    },
3257    title: {
3258      text: "Average fruit consumption during one week"
3259    },
3260    legend: {
3261      layout: "vertical",
3262      align: "left",
3263      verticalAlign: "top",
3264      x: 150,
3265      y: 100,
3266      floating: !0,
3267      borderWidth: 1,
3268      backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || "#FFFFFF"
3269    },
3270    xAxis: {
3271      categories: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
3272      plotBands: [{
3273        from: 4.5,
3274        to: 6.5,
3275        color: "rgba(68, 170, 213, .2)"
3276      }]
3277    },
3278    yAxis: {
3279      title: {
3280        text: "Fruit units"
3281      }
3282    },
3283    tooltip: {
3284      shared: !0,
3285      valueSuffix: " units"
3286    },
3287    credits: {
3288      enabled: !1
3289    },
3290    plotOptions: {
3291      areaspline: {
3292        fillOpacity: .5
3293      }
3294    },
3295    series: [{
3296      name: "John",
3297      color: "#4788ff",
3298      data: [3, 4, 3, 5, 4, 10, 12]
3299    }, {

3300      name: "Jane",
3301      color: "#37e6b0",
3302      data: [1, 3, 4, 3, 3, 5, 4]
3303    }]
3304  }), jQuery("#high-columnndbar-chart").length && Highcharts.chart("high-columnndbar-chart", {
3305    chart: {
3306      type: "bar"
3307    },
3308    title: {
3309      text: "Stacked bar chart"
3310    },
3311    xAxis: {
3312      categories: ["Apples", "Oranges", "Pears", "Grapes", "Bananas"]
3313    },
3314    yAxis: {
3315      min: 0,
3316      title: {
3317        text: "Total fruit consumption"
3318      }
3319    },
3320    legend: {
3321      reversed: !0
3322    },
3323    plotOptions: {
3324      series: {
3325        stacking: "normal"
3326      }
3327    },
3328    series: [{
3329      name: "John",
3330      color: "#4788ff",
3331      data: [5, 3, 4, 7, 2]
3332    }, {
3333      name: "Jane",
3334      color: "#ff4b4b",
3335      data: [2, 2, 3, 2, 1]
3336    }, {
3337      name: "Joe",
3338      color: "#37e6b0",
3339      data: [3, 4, 4, 2, 5]
3340    }]
3341  }), jQuery("#high-pie-chart").length && Highcharts.chart("high-pie-chart", {
3342    chart: {
3343      plotBackgroundColor: null,
3344      plotBorderWidth: null,
3345      plotShadow: !1,
3346      type: "pie"
3347    },
3348    colorAxis: {},
3349    title: {
3350      text: "Browser market shares in January, 2018"
3351    },
3352    tooltip: {
3353      pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
3354    },
3355    plotOptions: {
3356      pie: {
3357        allowPointSelect: !0,
3358        cursor: "pointer",
3359        dataLabels: {
3360          enabled: !0,
3361          format: "<b>{point.name}</b>: {point.percentage:.1f} %"
3362        }
3363      }
3364    },
3365    series: [{
3366      name: "Brands",
3367      colorByPoint: !0,
3368      data: [{
3369        name: "Chrome",
3370        y: 61.41,
3371        sliced: !0,
3372        selected: !0,
3373        color: "#4788ff"
3374      }, {
3375        name: "Internet Explorer",
3376        y: 11.84,
3377        color: "#ff4b4b"
3378      }, {
3379        name: "Firefox",
3380        y: 10.85,
3381        color: "#65f9b3"
3382      }, {
3383        name: "Edge",
3384        y: 4.67,
3385        color: "#6ce6f4"
3386      }, {
3387        name: "Other",
3388        y: 2.61
3389      }]
3390    }]
3391  }), jQuery("#high-scatterplot-chart").length && Highcharts.chart("high-scatterplot-chart", {
3392    chart: {
3393      type: "scatter",
3394      zoomType: "xy"
3395    },
3396    accessibility: {
3397      description: "A scatter plot compares the height and weight of 507 individuals by gender. Height in centimeters is plotted on the X-axis and weight in kilograms is plotted on the Y-axis. The chart is interactive, and each data point can be hovered over to expose the height and weight data for each individual. The scatter plot is fairly evenly divided by gender with females dominating the left-hand side of the chart and males dominating the right-hand side. The height data for females ranges from 147.2 to 182.9 centimeters with the greatest concentration between 160 and 165 centimeters. The weight data for females ranges from 42 to 105.2 kilograms with the greatest concentration at around 60 kilograms. The height data for males ranges from 157.2 to 198.1 centimeters with the greatest concentration between 175 and 180 centimeters. The weight data for males ranges from 53.9 to 116.4 kilograms with the greatest concentration at around 80 kilograms."
3398    },
3399    title: {
3400      text: "Height Versus Weight of 507 Individuals by Gender"
3401    },
3402    subtitle: {
3403      text: "Source: Heinz  2003"
3404    },
3405    xAxis: {
3406      title: {
3407        enabled: !0,
3408        text: "Height (cm)"
3409      },
3410      startOnTick: !0,
3411      endOnTick: !0,
3412      showLastLabel: !0
3413    },
3414    yAxis: {
3415      title: {
3416        text: "Weight (kg)"
3417      }
3418    },
3419    legend: {
3420      layout: "vertical",
3421      align: "left",
3422      verticalAlign: "top",
3423      x: 100,
3424      y: 70,
3425      floating: !0,
3426      backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
3427      borderWidth: 1
3428    },
3429    plotOptions: {
3430      scatter: {
3431        marker: {
3432          radius: 5,
3433          states: {
3434            hover: {
3435              enabled: !0,
3436              lineColor: "rgb(100,100,100)"
3437            }
3438          }
3439        },
3440        states: {
3441          hover: {
3442            marker: {
3443              enabled: !1
3444            }
3445          }
3446        },
3447        tooltip: {
3448          headerFormat: "<b>{series.name}</b><br>",
3449          pointFormat: "{point.x} cm, {point.y} kg"
3450        }
3451      }
3452    },
3453    series: [{
3454      name: "Female",
3455      color: "rgba(223, 83, 83, .5)",
3456      data: [
3457        [161.2, 51.6],
3458        [167.5, 59],
3459        [159.5, 49.2],
3460        [157, 63],
3461        [155.8, 53.6],
3462        [170, 59],
3463        [159.1, 47.6],
3464        [166, 69.8],
3465        [176.2, 66.8],
3466        [160.2, 75.2],
3467        [172.7, 62],
3468        [155, 49.2],
3469        [156.5, 67.2],
3470        [164, 53.8],
3471        [160.9, 54.4]
3472      ],
3473      color: "#4788ff"
3474    }, {

3475      name: "Male",
3476      color: "rgba(119, 152, 191, .5)",
3477      data: [
3478        [174, 65.6],
3479        [175.3, 71.8],
3480        [193.5, 80.7],
3481        [186.5, 72.6],
3482        [187.2, 78.8],
3483        [181.5, 74.8],
3484        [184, 86.4],
3485        [184.5, 78.4],
3486        [175, 62],
3487        [184, 81.6],
3488        [180.1, 93],
3489        [175.5, 80.9],
3490        [180.6, 72.7],
3491        [184.4, 68],
3492        [175.5, 70.9],
3493        [180.3, 83.2],
3494        [180.3, 83.2]
3495      ],
3496      color: "#ff4b4b"
3497    }]
3498  }), jQuery("#high-linendcolumn-chart").length && Highcharts.chart("high-linendcolumn-chart", {
3499    chart: {
3500      zoomType: "xy"
3501    },
3502    title: {
3503      text: "Average Monthly Temperature and Rainfall in Tokyo"
3504    },
3505    subtitle: {
3506      text: "Source: WorldClimate.com"
3507    },
3508    xAxis: [{
3509      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
3510      crosshair: !0
3511    }],
3512    yAxis: [{
3513      labels: {
3514        format: "{value}Â°C",
3515        style: {
3516          color: Highcharts.getOptions().colors[1]
3517        }
3518      },
3519      title: {
3520        text: "Temperature",
3521        style: {
3522          color: Highcharts.getOptions().colors[1]
3523        }
3524      }
3525    }, {
3526      title: {
3527        text: "Rainfall",
3528        style: {
3529          color: Highcharts.getOptions().colors[0]
3530        }
3531      },
3532      labels: {
3533        format: "{value} mm",
3534        style: {
3535          color: Highcharts.getOptions().colors[0]
3536        }
3537      },
3538      opposite: !0
3539    }],
3540    tooltip: {
3541      shared: !0
3542    },
3543    legend: {
3544      layout: "vertical",
3545      align: "left",
3546      x: 120,
3547      verticalAlign: "top",
3548      y: 100,
3549      floating: !0,
3550      backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || "rgba(255,255,255,0.25)"
3551    },
3552    series: [{
3553      name: "Rainfall",
3554      type: "column",
3555      yAxis: 1,
3556      data: [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
3557      color: "#4788ff",
3558      tooltip: {
3559        valueSuffix: " mm"
3560      }
3561    }, {
3562      name: "Temperature",
3563      type: "spline",
3564      data: [7, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
3565      color: "#ff4b4b",
3566      tooltip: {
3567        valueSuffix: "Â°C"
3568      }
3569    }]
3570  }), jQuery("#high-dynamic-chart").length && Highcharts.chart("high-dynamic-chart", {
3571    chart: {
3572      type: "spline",
3573      animation: Highcharts.svg,
3574      marginRight: 10,
3575      events: {
3576        load: function() {
3577          var e = this.series[0];
3578          setInterval(function() {
3579            var t = (new Date).getTime(),
3580              a = Math.random();
3581            e.addPoint([t, a], !0, !0)
3582          }, 1e3)
3583        }
3584      }
3585    },
3586    time: {
3587      useUTC: !1
3588    },
3589    title: {
3590      text: "Live random data"
3591    },
3592    accessibility: {
3593      announceNewData: {
3594        enabled: !0,
3595        minAnnounceInterval: 15e3,
3596        announcementFormatter: function(e, t, a) {
3597          return !!a && "New point added. Value: " + a.y
3598        }
3599      }
3600    },
3601    xAxis: {
3602      type: "datetime",
3603      tickPixelInterval: 150
3604    },
3605    yAxis: {
3606      title: {
3607        text: "Value"
3608      },
3609      plotLines: [{
3610        value: 0,
3611        width: 1,
3612        color: "#808080"
3613      }]
3614    },
3615    tooltip: {
3616      headerFormat: "<b>{series.name}</b><br/>",
3617      pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
3618    },
3619    legend: {
3620      enabled: !1
3621    },
3622    exporting: {
3623      enabled: !1
3624    },
3625    series: [{
3626      name: "Random data",
3627      color: "#4788ff",
3628      data: function() {
3629        var e, t = [],
3630          a = (new Date).getTime();
3631        for (e = -19; e <= 0; e += 1) t.push({
3632          x: a + 1e3 * e,
3633          y: Math.random()
3634        });
3635        return t
3636      }()
3637    }]
3638  }), jQuery("#high-3d-chart").length) {
3639  var chart = new Highcharts.Chart({
3640    chart: {
3641      renderTo: "high-3d-chart",
3642      type: "column",
3643      options3d: {
3644        enabled: !0,
3645        alpha: 15,
3646        beta: 15,
3647        depth: 50,
3648        viewDistance: 25
3649      }
3650    },
3651    title: {
3652      text: "Chart rotation demo"
3653    },
3654    subtitle: {
3655      text: "Test options by dragging the sliders below"
3656    },
3657    plotOptions: {
3658      column: {
3659        depth: 25
3660      }
3661    },
3662    series: [{
3663      data: [29.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4,

3663194.1, 95.6, 54.4],
3664      color: "#4788ff"
3665    }]
3666  });
3667
3668  function showValues() {
3669    $("#alpha-value").html(chart.options.chart.options3d.alpha), $("#beta-value").html(chart.options.chart.options3d.beta), $("#depth-value").html(chart.options.chart.options3d.depth)
3670  }
3671  $("#sliders input").on("input change", function() {
3672    chart.options.chart.options3d[this.id] = parseFloat(this.value), showValues(), chart.redraw(!1)
3673  }), showValues()
3674}
3675if (jQuery("#high-gauges-chart").length && Highcharts.chart("high-gauges-chart", {
3676    chart: {
3677      type: "gauge",
3678      plotBackgroundColor: null,
3679      plotBackgroundImage: null,
3680      plotBorderWidth: 0,
3681      plotShadow: !1
3682    },
3683    title: {
3684      text: "Speedometer"
3685    },
3686    pane: {
3687      startAngle: -150,
3688      endAngle: 150,
3689      background: [{
3690        backgroundColor: {
3691          linearGradient: {
3692            x1: 0,
3693            y1: 0,
3694            x2: 0,
3695            y2: 1
3696          },
3697          stops: [
3698            [0, "#FFF"],
3699            [1, "#333"]
3700          ]
3701        },
3702        borderWidth: 0,
3703        outerRadius: "109%"
3704      }, {
3705        backgroundColor: {
3706          linearGradient: {
3707            x1: 0,
3708            y1: 0,
3709            x2: 0,
3710            y2: 1
3711          },
3712          stops: [
3713            [0, "#333"],
3714            [1, "#FFF"]
3715          ]
3716        },
3717        borderWidth: 1,
3718        outerRadius: "107%"
3719      }, {}, {
3720        backgroundColor: "#DDD",
3721        borderWidth: 0,
3722        outerRadius: "105%",
3723        innerRadius: "103%"
3724      }]
3725    },
3726    yAxis: {
3727      min: 0,
3728      max: 200,
3729      minorTickInterval: "auto",
3730      minorTickWidth: 1,
3731      minorTickLength: 10,
3732      minorTickPosition: "inside",
3733      minorTickColor: "#666",
3734      tickPixelInterval: 30,
3735      tickWidth: 2,
3736      tickPosition: "inside",
3737      tickLength: 10,
3738      tickColor: "#666",
3739      labels: {
3740        step: 2,
3741        rotation: "auto"
3742      },
3743      title: {
3744        text: "km/h"
3745      },
3746      plotBands: [{
3747        from: 0,
3748        to: 120,
3749        color: "#55BF3B"
3750      }, {
3751        from: 120,
3752        to: 160,
3753        color: "#DDDF0D"
3754      }, {
3755        from: 160,
3756        to: 200,
3757        color: "#DF5353"
3758      }]
3759    },
3760    series: [{
3761      name: "Speed",
3762      data: [80],
3763      tooltip: {
3764        valueSuffix: " km/h"
3765      }
3766    }]
3767  }, function(e) {
3768    e.renderer.forExport || setInterval(function() {
3769      var t, a = e.series[0].points[0],
3770        n = Math.round(20 * (Math.random() - .5));
3771      ((t = a.y + n) < 0 || t > 200) && (t = a.y - n), a.update(t)
3772    }, 3e3)
3773  }), jQuery("#high-barwithnagative-chart").length) {
3774  var categories = ["0-4", "5-9", "10-14", "15-19", "20-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", "75-79", "80-84", "85-89", "90-94", "95-99", "100 + "];
3775  Highcharts.chart("high-barwithnagative-chart", {
3776    chart: {
3777      type: "bar"
3778    },
3779    title: {
3780      text: "Population pyramid for Germany, 2018"
3781    },
3782    subtitle: {
3783      text: 'Source: <a href="http://populationpyramid.net/germany/2018/">Population Pyramids of the World from 1950 to 2100</a>'
3784    },
3785    accessibility: {
3786      point: {
3787        descriptionFormatter: function(e) {
3788          return e.index + 1 + ", Age " + e.category + ", " + Math.abs(e.y) + "%. " + e.series.name + "."
3789        }
3790      }
3791    },
3792    xAxis: [{
3793      categories: categories,
3794      reversed: !1,
3795      labels: {
3796        step: 1
3797      },
3798      accessibility: {
3799        description: "Age (male)"
3800      }
3801    }, {
3802      opposite: !0,
3803      reversed: !1,
3804      categories: categories,
3805      linkedTo: 0,
3806      labels: {
3807        step: 1
3808      },
3809      accessibility: {
3810        description: "Age (female)"
3811      }
3812    }],
3813    yAxis: {
3814      title: {
3815        text: null
3816      },
3817      labels: {
3818        formatter: function() {
3819          return Math.abs(this.value) + "%"
3820        }
3821      },
3822      accessibility: {
3823        description: "Percentage population",
3824        rangeDescription: "Range: 0 to 5%"
3825      }
3826    },
3827    plotOptions: {
3828      series: {
3829        stacking: "normal"
3830      }
3831    },
3832    tooltip: {
3833      formatter: function() {
3834        return "<b>" + this.series.name + ", age " + this.point.category + "</b><br/>Population: " + Highcharts.numberFormat(Math.abs(this.point.y), 1) + "%"
3835      }
3836    },
3837    series: [{
3838      name: "Male",
3839      data: [-2.2, -2.1, -2.2, -2.4, -2.7, -3, -3.3, -3.2, -2.9, -3.5, -4.4, -4.1, -0],
3840      color: "#4788ff"
3841    }, {

3842      name: "Female",
3843      data: [2.1, 2, 2.1, 2.3, 2.6, 2.9, 3.2, 3.1, 2.9, 3.4, 0],
3844      color: "#ff4b4b"
3845    }]
3846  })
3847}
3848
3849/*--------------Widget Chart 1----------------*/
3850
3851var options = {
3852    chart: {
3853        height: 80,
3854        type: 'area',
3855        sparkline: {
3856            enabled: true
3857        },
3858        group: 'sparklines',
3859
3860    },
3861    dataLabels: {
3862        enabled: false
3863    },
3864    stroke: {
3865        width: 3,
3866        curve: 'smooth'
3867    },
3868    fill: {
3869        type: 'gradient',
3870        gradient: {
3871            shadeIntensity: 1,
3872            opacityFrom: 0.5,
3873            opacityTo: 0,
3874        }
3875    },
3876
3877    series: [{
3878        name: 'series1',
3879        data: [60, 15, 50, 30, 70]
3880    }, ],
3881    colors: ['#50b5ff'],
3882
3883    xaxis: {
3884        type: 'datetime',
3885        categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"],
3886    },
3887    tooltip: {
3888        x: {
3889            format: 'dd/MM/yy HH:mm'
3890        },
3891    }
3892};
3893
3894if(jQuery('#chart-1').length){
3895    var chart = new ApexCharts(
3896        document.querySelector("#chart-1"),
3897        options
3898    );
3899    chart.render();
3900}
3901
3902
3903/*--------------Widget Chart 2----------------*/
3904var options = {
3905    chart: {
3906        height: 80,
3907        type: 'area',
3908        sparkline: {
3909            enabled: true
3910        },
3911        group: 'sparklines',
3912
3913    },
3914    dataLabels: {
3915        enabled: false
3916    },
3917    stroke: {
3918        width: 3,
3919        curve: 'smooth'
3920    },
3921    fill: {
3922        type: 'gradient',
3923        gradient: {
3924            shadeIntensity: 1,
3925            opacityFrom: 0.5,
3926            opacityTo: 0,
3927        }
3928    },
3929    series: [{
3930        name: 'series1',
3931        data: [70, 40, 60, 30, 60]
3932    }, ],
3933    colors: ['#fd7e14'],
3934
3935    xaxis: {
3936        type: 'datetime',
3937        categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"],
3938    },
3939    tooltip: {
3940        x: {
3941            format: 'dd/MM/yy HH:mm'
3942        },
3943    }
3944};
3945
3946if(jQuery('#chart-2').length){
3947    var chart = new ApexCharts(
3948        document.querySelector("#chart-2"),
3949        options
3950    );
3951
3952    chart.render();
3953}
3954
3955/*--------------Widget Chart 3----------------*/
3956var options = {
3957    chart: {
3958        height: 80,
3959        type: 'area',
3960        sparkline: {
3961            enabled: true
3962        },
3963        group: 'sparklines',
3964
3965    },
3966    dataLabels: {
3967        enabled: false
3968    },
3969    stroke: {
3970        width: 3,
3971        curve: 'smooth'
3972    },
3973    fill: {
3974        type: 'gradient',
3975        gradient: {
3976            shadeIntensity: 1,
3977            opacityFrom: 0.5,
3978            opacityTo: 0,
3979        }
3980    },
3981    series: [{
3982        name: 'series1',
3983        data: [60, 40, 60, 40, 70]
3984    }, ],
3985    colors: ['#49f0d3'],
3986
3987    xaxis: {
3988        type: 'datetime',
3989        categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"],
3990    },
3991    tooltip: {
3992        x: {
3993            format: 'dd/MM/yy HH:mm'
3994        },
3995    }
3996};
3997if(jQuery('#chart-3').length){
3998    var chart = new ApexCharts(
3999        document.querySelector("#chart-3"),
4000        options
4001    );
4002    chart.render();
4003}
4004
4005/*--------------Widget Chart 4----------------*/
4006var options = {
4007    chart: {
4008        height: 80,
4009        type: 'area',
4010        sparkline: {
4011            enabled: true
4012        },
4013        group: 'sparklines',
4014
4015    },
4016    dataLabels: {
4017        enabled: false
4018    },
4019    stroke: {
4020        width: 3,
4021        curve: 'smooth'
4022    },
4023    fill: {
4024        type: 'gradient',
4025        gradient: {
4026            shadeIntensity: 1,
4027            opacityFrom: 0.5,
4028            opacityTo: 0,
4029        }
4030    },
4031    series: [{
4032        name: 'series1',
4033        data: [75, 30, 60, 35, 60]
4034    }, ],
4035    colors: ['#ff9b8a'],
4036
4037    xaxis: {
4038        type: 'datetime',
4039        categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"],
4040    },
4041    tooltip: {
4042        x: {
4043            format: 'dd/MM/yy HH:mm'
4044        },
4045    }
4046};
4047
4048if(jQuery('#chart-4').length){
4049    var chart = new ApexCharts(

4050        document.querySelector("#chart-4"),
4051        options
4052    );
4053
4054    chart.render();
4055}
4056
4057/*--------------Widget Box----------------*/
4058
4059if(jQuery('#iq-chart-box1').length){
4060    var options = {
4061      series: [{
4062        name: "Total sales",
4063        data: [10, 10, 35, 10]
4064    }],
4065      colors: ["#50b5ff"],
4066      chart: {
4067      height: 50,
4068      width: 100,
4069      type: 'line',
4070      sparkline: {
4071          enabled: true,
4072      },
4073      zoom: {
4074        enabled: false
4075      }
4076    },
4077    dataLabels: {
4078      enabled: false
4079    },
4080    stroke: {
4081      curve: 'straight'
4082    },
4083    title: {
4084      text: '',
4085      align: 'left'
4086    },
4087    grid: {
4088      row: {
4089        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
4090        opacity: 0.5
4091      },
4092    },
4093    xaxis: {
4094      categories: ['Jan', 'Feb', 'Mar'],
4095    }
4096    };
4097
4098    var chart = new ApexCharts(document.querySelector("#iq-chart-box1"), options);
4099    chart.render();
4100  const body = document.querySelector('body')
4101  if (body.classList.contains('dark')) {
4102    apexChartUpdate(chart, {
4103      dark: true
4104    })
4105  }
4106
4107  document.addEventListener('ChangeColorMode', function (e) {
4108    apexChartUpdate(chart, e.detail)
4109  })
4110}
4111if(jQuery('#iq-chart-box2').length){
4112    var options = {
4113      series: [{
4114        name: "Sale Today",
4115        data: [10, 10, 35, 10]
4116    }],
4117      colors: ["#ff9b8a"],
4118      chart: {
4119      height: 50,
4120      width: 100,
4121      type: 'line',
4122      sparkline: {
4123          enabled: true,
4124      },
4125      zoom: {
4126        enabled: false
4127      }
4128    },
4129    dataLabels: {
4130      enabled: false
4131    },
4132    stroke: {
4133      curve: 'straight'
4134    },
4135    title: {
4136      text: '',
4137      align: 'left'
4138    },
4139    grid: {
4140      row: {
4141        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
4142        opacity: 0.5
4143      },
4144    },
4145    xaxis: {
4146      categories: ['Jan', 'Feb', 'Mar'],
4147    }
4148    };
4149
4150    var chart = new ApexCharts(document.querySelector("#iq-chart-box2"), options);
4151    chart.render();
4152  const body = document.querySelector('body')
4153  if (body.classList.contains('dark')) {
4154    apexChartUpdate(chart, {
4155      dark: true
4156    })
4157  }
4158
4159  document.addEventListener('ChangeColorMode', function (e) {
4160    apexChartUpdate(chart, e.detail)
4161  })
4162}
4163if(jQuery('#iq-chart-box3').length){
4164    var options = {
4165      series: [{
4166        name: "Total Classon",
4167        data: [10, 10, 35, 10]
4168    }],
4169      colors: ["#49f0d3"],
4170      chart: {
4171      height: 50,
4172      width: 100,
4173      type: 'line',
4174      sparkline: {
4175          enabled: true,
4176      },
4177      zoom: {
4178        enabled: false
4179      }
4180    },
4181    dataLabels: {
4182      enabled: false
4183    },
4184    stroke: {
4185      curve: 'straight'
4186    },
4187    title: {
4188      text: '',
4189      align: 'left'
4190    },
4191    grid: {
4192      row: {
4193        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
4194        opacity: 0.5
4195      },
4196    },
4197    xaxis: {
4198      categories: ['Jan', 'Feb', 'Mar'],
4199    }
4200    };
4201
4202    var chart = new ApexCharts(document.querySelector("#iq-chart-box3"), options);
4203    chart.render();
4204  const body = document.querySelector('body')
4205  if (body.classList.contains('dark')) {
4206    apexChartUpdate(chart, {
4207      dark: true
4208    })
4209  }
4210
4211  document.addEventListener('ChangeColorMode', function (e) {
4212    apexChartUpdate(chart, e.detail)
4213  })
4214}
4215if(jQuery('#iq-chart-box4').length){
4216    var options = {
4217      series: [{
4218        name: "Total Profit",
4219        data: [10, 10, 35, 10]
4220    }],
4221      colors: ["#fd7e14"],
4222      chart: {
4223      height: 50,
4224      width: 100,
4225      type: 'line',
4226      sparkline: {
4227          enabled: true,
4228      },
4229      zoom: {
4230        enabled: false
4231      }
4232    },
4233    dataLabels: {
4234      enabled: false
4235    },
4236    stroke: {
4237      curve: 'straight'
4238    },
4239    title: {
4240      text: '',
4241      align: 'left'
4242    },
4243    grid: {
4244      row: {
4245        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
4246        opacity: 0.5
4247      },
4248    },
4249    xaxis: {
4250      categories: ['Jan', 'Feb', 'Mar'],
4251    }
4252    };
4253
4254    var chart = new ApexCharts(document.querySelector("#iq-chart-box4"), options);
4255    chart.render();
4256  const body = document.querySelector('body')
4257  if (body.classList.contains('dark')) {
4258    apexChartUpdate(chart, {
4259      dark: true
4260    })
4261  }
4262
4263  document.addEventListener('ChangeColorMode', function (e) {
4264    apexChartUpdate(chart, e.detail)
4265  })
4266}
4267/*--------------Widget End----------------*/
4268
4269/*-------------- Widget Chart ----------------*/
4270if (jQuery("#ethernet-chart-01").length) {
4271    var options = {
4272      series: [{
4273        name: "Desktops",
4274        data: [5, 30, 6, 20, 5, 18, 10]
4275    }],
4276    colors: ['#4788ff'],
4277      chart: {
4278      height: 60,
4279      width: 100,
4280      type: 'line',
4281      zoom: {
4282        enabled: false
4283      },
4284      sparkline: {
4285        enabled: true,
4286      }
4287    },
4288    dataLabels: {
4289      enabled: false
4290    },
4291    stroke: {
4292      curve: 'smooth',
4293      width: 3
4294    },
4295    title: {
4296      text: '',
4297      align: 'left'
4298    },
4299    grid: {
4300      row: {
4301        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
4302        opacity: 0.5
4303      },
4304    },
4305    xaxis: {
4306      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
4307    }
4308    };
4309
4310    var chart = new ApexCharts(document.querySelector("#ethernet-chart-01"), options);
4311    chart.render();
4312  const body = document.querySelector('body')
4313  if (body.classList.contains('dark')) {
4314    apexChartUpdate(chart, {
4315      dark: true
4316    })
4317  }
4318
4319  document.addEventListener('ChangeColorMode', function (e) {
4320    apexChartUpdate(chart, e.detail)
4321  })
4322}
4323if (jQuery("#ethernet-chart-02").length) {
4324    var options = {
4325      series: [{
4326        name: "Desktops",
4327        data: [5, 20, 4, 18, 3, 15, 10]
4328    }],
4329    colors: ['#1ee2ac'],
4330      chart: {
4331      height: 60,
4332      width: 100,
4333      type: 'line',
4334      zoom: {
4335        enabled: false
4336      },
4337      sparkline: {
4338        enabled: true,
4339      }
4340    },
4341    dataLabels: {
4342      enabled: false
4343    },
4344    stroke: {
4345      curve: 'smooth',
4346      width: 3
4347    },
4348    title: {
4349      text: '',
4350      align: 'left'
4351    },
4352    grid: {
4353      row: {
4354        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
4355        opacity: 0.5
4356      },
4357    },
4358    xaxis: {
4359      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
4360    }
4361    };
4362
4363    var chart = new ApexCharts(document.querySelector("#ethernet-chart-02"), options);
4364    chart.render();
4365  const body = document.querySelector('body')
4366  if (body.classList.contains('dark')) {
4367    apexChartUpdate(chart, {
4368      dark: true
4369    })
4370  }
4371
4372  document.addEventListener('ChangeColorMode', function (e) {
4373    apexChartUpdate(chart, e.detail)
4374  })
4375}
4376if (jQuery("#ethernet-chart-03").length) {
4377    var options = {
4378      series: [{
4379        name: "Desktops",
4380        data: [5, 20, 6, 18, 5, 15, 4]
4381    }],
4382    colors: ['#ff4b4b'],
4383      chart: {
4384      height: 60,
4385      width: 100,
4386      type: 'line',
4387      zoom: {
4388        enabled: false
4389      },
4390      sparkline: {
4391        enabled: true,
4392      }
4393    },
4394    dataLabels: {
4395      enabled: false
4396    },
4397    stroke: {
4398      curve: 'smooth',
4399      width: 3
4400    },
4401    title: {
4402      text: '',
4403      align: 'left'
4404    },
4405    grid: {
4406      row: {
4407        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
4408        opacity: 0.5
4409      },
4410    },
4411    xaxis: {
4412      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
4413    }
4414    };
4415
4416    var chart = new ApexCharts(document.querySelector("#ethernet-chart-03"), options);
4417    chart.render();
4418  const body = document.querySelector('body')
4419  if (body.classList.contains('dark')) {
4420    apexChartUpdate(chart, {
4421      dark: true
4422    })
4423  }
4424
4425  document.addEventListener('ChangeColorMode', function (e) {
4426    apexChartUpdate(chart, e.detail)
4427  })
4428}
4429if (jQuery("#ethernet-chart-04").length) {
4430    var options = {
4431      series: [{
4432        name: "Desktops",
4433        data: [5, 15, 3, 20, 5, 18, 13]
4434    }],
4435    colors: ['#4788ff'],
4436      chart: {
4437      height: 60,
4438      width: 100,
4439      type: 'line',
4440      zoom: {
4441        enabled: false
4442      },
4443      sparkline: {
4444        enabled: true,
4445      }
4446    },
4447    dataLabels: {
4448      enabled: false
4449    },
4450    stroke: {
4451      curve: 'smooth',
4452      width: 3
4453    },
4454    title: {
4455      text: '',
4456      align: 'left'
4457    },
4458    grid: {
4459      row: {
4460        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
4461        opacity: 0.5
4462      },
4463    },
4464    xaxis: {
4465      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
4466    }
4467    };
4468
4469    var chart = new ApexCharts(document.querySelector("#ethernet-chart-04"), options);
4470    chart.render();
4471  const body = document.querySelector('body')
4472  if (body.classList.contains('dark')) {
4473    apexChartUpdate(chart, {
4474      dark: true
4475    })
4476  }
4477
4478  document.addEventListener('ChangeColorMode', function (e) {
4479    apexChartUpdate(chart, e.detail)
4480  })
4481}
4482
4483/*-------------- Widget Chart End ----------------*/
4484
4485/*--------------Widget Chart ----------------*/
4486function getNewSeries(e, t) {
4487  var a = e + TICKINTERVAL;
4488  lastDate = a;
4489  for (var n = 0; n < data.length - 10;

4489 n++) data[n].x = a - XAXISRANGE - TICKINTERVAL, data[n].y = 0;
4490  data.push({
4491    x: a,
4492    y: Math.floor(Math.random() * (t.max - t.min + 1)) + t.min
4493  })
4494}
4495if (jQuery("#chart-9").length) {
4496    var chart9 = new ApexCharts(document.querySelector("#chart-9"), options);
4497    chart9.render(), window.setInterval(function() {
4498        getNewSeries(lastDate, {
4499            min: 10,
4500            max: 90
4501        }), jQuery("#chart-9").length && chart9.updateSeries([{
4502            data: data
4503        }])
4504    }, 1e3)
4505}
4506
4507function generateData(e, t, a) {
4508    for (var n = 0, o = []; n < t;) {
4509        var r = Math.floor(750 * Math.random()) + 1,
4510            i = Math.floor(Math.random() * (a.max - a.min + 1)) + a.min,
4511            c = Math.floor(61 * Math.random()) + 15;
4512        o.push([r, i, c]), 864e5, n++
4513    }
4514    return o
4515}
4516options = {
4517    chart: {
4518        height: 440,
4519        type: "bubble",
4520        stacked: !1,
4521        toolbar: {
4522            show: !1
4523        },
4524        animations: {
4525            enabled: !0,
4526            easing: "linear",
4527            dynamicAnimation: {
4528                speed: 1e3
4529            }
4530        },
4531        sparkline: {
4532            enabled: !0
4533        },
4534        group: "sparklines"
4535    },
4536    dataLabels: {
4537        enabled: !1
4538    },
4539    series: [{
4540        name: "Bubble1",
4541        data: generateData(new Date("11 Feb 2017 GMT").getTime(), 10, {
4542            min: 10,
4543            max: 60
4544        })
4545    }, {
4546        name: "Bubble2",
4547        data: generateData(new Date("11 Feb 2017 GMT").getTime(), 10, {
4548            min: 10,
4549            max: 60
4550        })
4551    }, {
4552        name: "Bubble3",
4553        data: generateData(new Date("11 Feb 2017 GMT").getTime(), 10, {
4554            min: 10,
4555            max: 60
4556        })
4557    }, {
4558        name: "Bubble4",
4559        data: generateData(new Date("11 Feb 2017 GMT").getTime(), 10, {
4560            min: 10,
4561            max: 60
4562        })
4563    }],
4564    fill: {
4565        opacity: .8
4566    },
4567    title: {
4568        show: !1
4569    },
4570    xaxis: {
4571        tickAmount: 8,
4572        type: "category",
4573        labels: {
4574            show: !1
4575        }
4576    },
4577    yaxis: {
4578        max: 70,
4579        labels: {
4580            show: !1
4581        }
4582    },
4583    legend: {
4584        show: !1
4585    }
4586};
4587
4588/*-------------- Widget Chart End ----------------*/
4589/*--------index-----*/
4590if (jQuery("#site-trafic-chart").length) {
4591  var options = {
4592          series: [{
4593            name: "series1",
4594            data: [0, 70, 30, 90, 80, 150]
4595        }, {
4596          name: 'series2',
4597          data: [0, 20, 90, 70, 130, 110]
4598        }],
4599        colors: ['#fe721c','#4788ff'],
4600          chart: {
4601          height: 365,
4602          type: 'line',
4603          zoom: {
4604            enabled: false
4605          }
4606        },
4607        dataLabels: {
4608          enabled: false
4609        },
4610        stroke: {
4611          curve: 'smooth'
4612        },
4613        title: {
4614          text: 'Product Trends by Month',
4615          align: 'left'
4616        },
4617        grid: {
4618          row: {
4619            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
4620            opacity: 0
4621          },
4622        },
4623        xaxis: {
4624          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
4625        },
4626        yaxis: {
4627          title: {
4628            text: ''
4629          },
4630          labels: {
4631            offsetX: -20,
4632            offsetY: 0
4633          },
4634        }
4635        };
4636
4637        if(typeof ApexCharts !== typeof undefined){
4638          var chart = new ApexCharts(document.querySelector("#site-trafic-chart"), options);
4639          chart.render();
4640          const body = document.querySelector('body')
4641          if (body.classList.contains('dark')) {
4642            apexChartUpdate(chart, {
4643              dark: true
4644            })
4645          }
4646
4647          document.addEventListener('ChangeColorMode', function (e) {
4648            apexChartUpdate(chart, e.detail)
4649          })
4650        }
4651}
4652
4653/*---------------------------------------------------------------------
4654   Editable Table
4655-----------------------------------------------------------------------*/
4656const $tableID = $('#table');
4657 const $BTN = $('#export-btn');
4658 const $EXPORT = $('#export');
4659
4660 const newTr = `
4661<tr class="hide">
4662  <td class="pt-3-half" contenteditable="true">Example</td>
4663  <td class="pt-3-half" contenteditable="true">Example</td>
4664  <td class="pt-3-half" contenteditable="true">Example</td>
4665  <td class="pt-3-half" contenteditable="true">Example</td>
4666  <td class="pt-3-half" contenteditable="true">Example</td>
4667  <td class="pt-3-half">
4668    <span class="table-up"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-up" aria-hidden="true"></i></a></span>
4669    <span class="table-down"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i></a></span>
4670  </td>
4671  <td>
4672    <span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 waves-effect waves-light">Remove</button></span>
4673  </td>
4674</tr>`;
4675
4676 $('.table-add').on('click', 'i', () => {
4677
4678   const $clone = $tableID.find('tbody tr').last().clone(true).removeClass('hide table-line');
4679
4680   if ($tableID.find('tbody tr').length === 0) {
4681
4682     $('tbody').append(newTr);
4683   }
4684
4685   $tableID.find('table').append($clone);
4686 });
4687
4688 $tableID.on('click', '.table-remove', function () {
4689
4690   $(this).parents('tr').detach();
4691 });
4692
4693 $tableID.on('click', '.table-up', function () {
4694
4695   const $row = $(this).parents('tr');
4696
4697   if ($row.index() === 1) {
4698     return;
4699   }
4700
4701   $row.prev().before($row.get(0));
4702 });
4703
4704 $tableID.on('click', '.table-down', function () {
4705
4706   const $row = $(this).parents('tr');
4707   $row.next().after($row.get(0));
4708 });
4709
4710 // A few jQuery helpers for exporting only
4711 jQuery.fn.pop = [].pop;
4712 jQuery.fn.shift = [].shift;
4713
4714 $BTN.on('click', () => {
4715
4716   const $rows = $tableID.find('tr:not(:hidden)');
4717   const headers = [];
4718   const data = [];
4719
4720   // Get the headers (add special header logic here)
4721   $($rows.shift()).find('th:not(:empty)').each(function () {
4722
4723     headers.push($(this).text().toLowerCase());
4724   });
4725
4726   // Turn all existing rows into a loopable array
4727   $rows.each(function () {
4728     const $td = $(this).find('td');
4729     const h = {};
4730
4731     // Use the headers from earlier to name our hash keys

4732     headers.forEach((header, i) => {
4733
4734       h[header] = $td.eq(i).text();
4735     });
4736
4737     data.push(h);
4738   });
4739
4740   // Output the result
4741   $EXPORT.text(JSON.stringify(data));
4742 });
4743
4744/*---------------------------------------------------------------------
4745    Form Wizard - 1
4746-----------------------------------------------------------------------*/
4747
4748$(document).ready(function(){
4749
4750    var current_fs, next_fs, previous_fs; //fieldsets
4751    var opacity;
4752    var current = 1;
4753    var steps = $("fieldset").length;
4754
4755    setProgressBar(current);
4756
4757    $(".next").click(function(){
4758
4759    current_fs = $(this).parent();
4760    next_fs = $(this).parent().next();
4761
4762    //Add Class Active
4763    $("#top-tab-list li").eq($("fieldset").index(next_fs)).addClass("active");
4764    $("#top-tab-list li").eq($("fieldset").index(current_fs)).addClass("done");
4765
4766    //show the next fieldset
4767    next_fs.show();
4768    //hide the current fieldset with style
4769    current_fs.animate({opacity: 0}, {
4770    step: function(now) {
4771    // for making fielset appear animation
4772    opacity = 1 - now;
4773
4774    current_fs.css({
4775    'display': 'none',
4776    'position': 'relative',
4777
4778    });
4779
4780    next_fs.css({'opacity': opacity});
4781    },
4782    duration: 500
4783    });
4784    setProgressBar(++current);
4785    });
4786
4787    $(".previous").click(function(){
4788
4789    current_fs = $(this).parent();
4790    previous_fs = $(this).parent().prev();
4791
4792    //Remove class active
4793    $("#top-tab-list li").eq($("fieldset").index(current_fs)).removeClass("active");
4794    $("#top-tab-list li").eq($("fieldset").index(previous_fs)).removeClass("done");
4795
4796    //show the previous fieldset
4797    previous_fs.show();
4798
4799    //hide the current fieldset with style
4800    current_fs.animate({opacity: 0}, {
4801    step: function(now) {
4802    // for making fielset appear animation
4803    opacity = 1 - now;
4804
4805    current_fs.css({
4806    'display': 'none',
4807    'position': 'relative'
4808    });
4809    previous_fs.css({'opacity': opacity});
4810    },
4811    duration: 500
4812    });
4813    setProgressBar(--current);
4814    });
4815
4816    function setProgressBar(curStep){
4817    var percent = parseFloat(100 / steps) * curStep;
4818    percent = percent.toFixed();
4819    $(".progress-bar")
4820    .css("width",percent+"%")
4821    }
4822
4823    $(".submit").click(function(){
4824    return false;
4825    })
4826
4827});
4828
4829 /*---------------------------------------------------------------------
4830   validate form wizard
4831-----------------------------------------------------------------------*/
4832
4833$(document).ready(function () {
4834
4835    var navListItems = $('div.setup-panel div a'),
4836            allWells = $('.setup-content'),
4837            allNextBtn = $('.nextBtn');
4838
4839    allWells.hide();
4840
4841    navListItems.click(function (e) {
4842        e.preventDefault();
4843        var $target = $($(this).attr('href')),
4844                $item = $(this);
4845
4846        if (!$item.hasClass('disabled')) {
4847            navListItems.addClass('active');
4848            $item.parent().addClass('active');
4849            allWells.hide();
4850            $target.show();
4851            $target.find('input:eq(0)').focus();
4852        }
4853    });
4854
4855    allNextBtn.click(function(){
4856        var curStep = $(this).closest(".setup-content"),
4857            curStepBtn = curStep.attr("id"),
4858            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
4859            curInputs = curStep.find("input[type='text'],input[type='email'],input[type='password'],input[type='url'],textarea"),
4860            isValid = true;
4861
4862        $(".form-group").removeClass("has-error");
4863        for(var i=0; i<curInputs.length; i++){
4864            if (!curInputs[i].validity.valid){
4865                isValid = false;
4866                $(curInputs[i]).closest(".form-group").addClass("has-error");
4867            }
4868        }
4869
4870        if (isValid)
4871            nextStepWizard.removeAttr('disabled').trigger('click');
4872    });
4873
4874    $('div.setup-panel div a.active').trigger('click');
4875});
4876 /*---------------------------------------------------------------------
4877   Vertical form wizard
4878-----------------------------------------------------------------------*/
4879$(document).ready(function(){
4880
4881    var current_fs, next_fs, previous_fs; //fieldsets
4882    var opacity;
4883    var current = 1;
4884    var steps = $("fieldset").length;
4885
4886    setProgressBar(current);
4887
4888    $(".next").click(function(){
4889
4890    current_fs = $(this).parent();
4891    next_fs = $(this).parent().next();
4892
4893    //Add Class Active
4894    $("#top-tabbar-vertical li").eq($("fieldset").index(next_fs)).addClass("active");
4895
4896    //show the next fieldset
4897    next_fs.show();
4898    //hide the current fieldset with style
4899    current_fs.animate({opacity: 0}, {
4900    step: function(now) {
4901    // for making fielset appear animation
4902    opacity = 1 - now;
4903
4904    current_fs.css({
4905    'display': 'none',
4906    'position': 'relative'
4907    });
4908    next_fs.css({'opacity': opacity});
4909    },
4910    duration: 500
4911    });
4912    setProgressBar(++current);
4913    });
4914
4915    $(".previous").click(function(){
4916
4917    current_fs = $(this).parent();
4918    previous_fs = $(this).parent().prev();
4919
4920    //Remove class active
4921    $("#top-tabbar-vertical li").eq($("fieldset").index(current_fs)).removeClass("active");
4922
4923    //show the previous fieldset
4924    previous_fs.show();
4925
4926    //hide the current fieldset with style
4927    current_fs.animate({opacity: 0}, {
4928    step: function(now) {
4929    // for making fielset appear animation
4930    opacity = 1 - now;
4931
4932    current_fs.css({
4933    'display': 'none',
4934    'position': 'relative'
4935    });
4936    previous_fs.css({'opacity': opacity});
4937    },
4938    duration: 500
4939    });
4940    setProgressBar(--current);
4941    });
4942
4943    function setProgressBar(curStep){
4944    var percent = parseFloat(100 / steps) * curStep;
4945    percent = percent.toFixed();
4946    $(".progress-bar")
4947    .css("width",percent+"%")
4948    }
4949
4950    $(".submit").click(function(){
4951    return false;

4952    })
4953
4954});
4955
4956
4957/*---------------------------------------------------------------------
4958   Profile Image Edit
4959-----------------------------------------------------------------------*/
4960
4961$(document).ready(function() {
4962    var readURL = function(input) {
4963        if (input.files && input.files[0]) {
4964            var reader = new FileReader();
4965
4966            reader.onload = function (e) {
4967                $('.profile-pic').attr('src', e.target.result);
4968            }
4969
4970            reader.readAsDataURL(input.files[0]);
4971        }
4972    }
4973
4974
4975    $(".file-upload").on('change', function(){
4976        readURL(this);
4977    });
4978
4979    $(".upload-button").on('click', function() {
4980       $(".file-upload").click();
4981    });
4982});
4983
4984// ratting
4985$(function() {
4986  if(typeof $.fn.barrating !== typeof undefined){
4987    $('#example').barrating({
4988      theme: 'fontawesome-stars'
4989    });
4990    $('#bars-number').barrating({
4991      theme: 'bars-1to10'
4992    });
4993    $('#movie-rating').barrating('show',{
4994      theme: 'bars-movie'
4995    });
4996    $('#movie-rating').barrating('set', 'Mediocre');
4997    $('#pill-rating').barrating({
4998      theme: 'bars-pill',
4999      showValues: true,
5000      showSelectedRating: false,
5001      onSelect: function(value, text) {
5002        alert('Selected rating: ' + value);
5003    }
5004    });
5005  } 
5006  if (typeof $.fn.mdbRate !== typeof undefined) {
5007    $('#rateMe1').mdbRate();
5008    $('#face-rating').mdbRate();
5009  }
5010});
5011
5012// quill
5013if (jQuery("#editor").length) {
5014  var quill = new Quill('#editor', {
5015  theme: 'snow'
5016  });
5017}
5018  // With Tooltip
5019  if (jQuery("#quill-toolbar").length) {
5020  var quill = new Quill('#quill-toolbar', {
5021      modules: {
5022        toolbar: '#quill-tool'
5023      },
5024      placeholder: 'Compose an epic...',
5025      theme: 'snow'
5026  });
5027  // Enable all tooltips
5028  $('[data-toggle="tooltip"]').tooltip();
5029
5030  // Can control programmatically too
5031  $('.ql-italic').mouseover();
5032  setTimeout(function() {
5033      $('.ql-italic').mouseout();
5034  }, 2500);
5035}
5036  // file upload
5037  $(".custom-file-input").on("change", function() {
5038    var fileName = $(this).val().split("\\").pop();
5039    $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
5040  });
5041  
5042  //  gallary grid
5043if(typeof $.fn.magnificPopup !== typeof undefined){
5044  $('.image-popup-vertical-fit').magnificPopup({
5045      type: 'image',
5046      mainClass: 'mfp-with-zoom',
5047      gallery: {
5048        enabled: true
5049      },
5050      zoom: {
5051        enabled: true,
5052        duration: 300,
5053        easing: 'ease-in-out',
5054        opener: function (openerElement) {
5055            return openerElement.is('img') ? openerElement : openerElement.find('img');
5056        }
5057      }
5058  });
5059}
5060
5061  // gallary masanarry
5062
5063    var $grid = $('.masonry').masonry({
5064         itemSelector: '.item',
5065        columnWidth: '.grid-sizer',
5066        percentPosition: true
5067    });
5068    $grid.imagesLoaded().progress(function () {
5069        $grid.masonry('layout');
5070    });
5071    if(typeof $.fn.magnificPopup !== typeof undefined){
5072      $('.gallery').magnificPopup({
5073            delegate: 'a',
5074            type: 'image',
5075            gallery: {
5076              enabled: true,
5077              navigateByImgClick: true,
5078              preload: [0, 1]
5079            }
5080      });
5081    }
5082
5083// calender 1 js
5084if (jQuery('#calendar1').length) {
5085  document.addEventListener('DOMContentLoaded', function () {
5086    var calendarEl = document.getElementById('calendar1');
5087
5088    var calendar1 = new FullCalendar.Calendar(calendarEl, {
5089      plugins: ['dayGrid'],
5090      timeZone: 'UTC',
5091      defaultView: 'dayGridMonth',
5092      header: {
5093        left: 'prev,next today',
5094        center: 'title',
5095        right: 'dayGridMonth'
5096      },
5097      events: [
5098        {
5099          groupId: '999',
5100          title: 'Repeating Event',
5101          start: '2020-11-16T16:00:00',
5102          color: '#01041b'
5103        },
5104        {
5105          title: 'Birthday Party',
5106          start: '2020-11-28T07:00:00',
5107          color: '#4731b6'
5108        },
5109        {
5110          title: 'Meeting',
5111          start: '2020-11-12T14:30:00',
5112          color: '#15ca92'
5113        },
5114        {
5115          title: 'Birthday Party',
5116          start: '2020-11-02T07:00:00',
5117          color: '#fe721c'
5118        },
5119        {
5120          title: 'Birthday Party',
5121          start: '2020-11-13T07:00:00',
5122          color: '#ff4b4b'
5123        },
5124
5125        {
5126          title: 'Meeting',
5127          start: '2020-11-12T14:30:00',
5128          color: '#15ca92'
5129        },
5130
5131        {
5132          title: 'Click for Google',
5133          url: 'http://google.com/',
5134          start: '2020-11-28',
5135          color:'#4731b6'
5136        },
5137        {
5138          title: 'All Day Event',
5139          start: '2020-12-10',
5140          color: '#4788ff'
5141        },
5142        {
5143          title: 'Long Event',
5144          start: '2020-12-07',
5145          end: '2020-02-10',
5146          color: '#876cfe'
5147        },
5148        {
5149          groupId: '999',
5150          title: 'Repeating Event',
5151          start: '2020-12-10T16:00:00',
5152          color: '#4788ff'
5153        },
5154        {
5155          groupId: '999',
5156          title: 'Repeating Event',
5157          start: '2020-12-16T16:00:00',
5158          color: '#37e6b0'
5159        }
5160      ]
5161    });
5162    calendar1.render();
5163  });
5164}
5165
5166
5167//layou-1
5168
5169  if (jQuery("#layout-1-chart-01").length) {
5170  var options = {
5171    series: [70, 30],
5172    chart: {
5173    height: 300,
5174    type: 'radialBar',
5175  },
5176  plotOptions: {
5177    radialBar: {
5178      dataLabels: {
5179        name: {
5180          fontSize: '22px',
5181        },
5182        value: {
5183          fontSize: '16px',
5184        },
5185        total: {
5186          show: true,
5187          label: 'Total',
5188          formatter: function (w) {
5189            return 249
5190          }
5191        }
5192      },
5193      track: {
5194        	strokeWidth: '42%',
5195        },
5196        
5197    }
5198  },
5199    colors: ['#05bbc9', '#876cfe'],
5200    stroke: {
5201      lineCap: "round",
5202    },
5203  };
5204
5205    var chart = new ApexCharts(document.querySelector("#layout-1-chart-01"), options);
5206  chart.render();
5207   const body = document.querySelector('body')
5208    if (body.classList.contains('dark')) {
5209      apexChartUpdate(chart, {
5210        dark: true
5211      })
5212    }
5213
5214    document.addEventListener('ChangeColorMode', function (e) {
5215      apexChartUpdate(chart, e.detail)
5216    })
5217}
5218  if (jQuery("#layout-1-chart-02").length) {
5219    var options = {
5220      series: [{
5221      data: [18, 22, 28, 45,34,20]
5222    }],
5223      chart: {
5224      height: 200,
5225      type: 'bar',
5226      events: {

5227        click: function(chart, w, e) {
5228        }
5229      },
5230      sparkline: {
5231        enabled: true,
5232      }
5233    },
5234      colors: ["#fe721c", "#4788ff", "#05bbc9", "#876cfe", "#00cc96", "#e72c30"],
5235    plotOptions: {
5236      bar: {
5237        columnWidth: '35%',
5238        distributed: true
5239      }
5240    },
5241    dataLabels: {
5242      enabled: false
5243    },
5244    legend: {
5245      show: false
5246    },
5247    xaxis: {
5248      categories: [
5249        ['India'],
5250        ['U.S.A'],
5251        ['Canada'],
5252        ['Africa'], 
5253      ],
5254      labels: {
5255        style: {
5256          colors: ["#4788ff","#37e6b0","#fe721c","#876cfe"],
5257          fontSize: '12px'
5258        }
5259      }
5260    }
5261  };
5262
5263    var chart = new ApexCharts(document.querySelector("#layout-1-chart-02"), options);
5264  chart.render();
5265    const body = document.querySelector('body')
5266    if (body.classList.contains('dark')) {
5267      apexChartUpdate(chart, {
5268        dark: true
5269      })
5270    }
5271
5272    document.addEventListener('ChangeColorMode', function (e) {
5273      apexChartUpdate(chart, e.detail)
5274    })
5275}
5276  if (jQuery("#layout-1-chart-03").length) {
5277    var options = {
5278      series: [{
5279        name: ' Clicks',
5280        type: 'column',
5281        data: [23, 11, 22, 27, 13, 22, 37, 21]
5282      }, {
5283          name: ' Sales',
5284        type: 'area',
5285        data: [44, 55, 41, 67, 22, 43, 21, 41]
5286      }, {
5287          name: 'Commission',
5288        type: 'line',
5289        data: [30, 25, 36, 30, 45, 35, 64, 52]
5290      }],
5291      chart: {
5292        height: 370,
5293        type: 'line',
5294        stacked: false,
5295      },
5296      stroke: {
5297        width: [0, 2, 5],
5298        curve: 'smooth'
5299      },
5300      plotOptions: {
5301        bar: {
5302          columnWidth: '50%'
5303        }
5304      },
5305
5306      fill: {
5307        opacity: [0.85, 0.25, 1],
5308        gradient: {
5309          inverseColors: false,
5310          shade: 'light',
5311          type: "vertical",
5312          opacityFrom: 0.85,
5313          opacityTo: 0.55,
5314          stops: [0, 100, 100, 100]
5315        }
5316      },
5317      labels: ['01/01/2019', '02/01/2019', '03/01/2019', '04/01/2019', '05/01/2019', '06/01/2019', '07/01/2019',
5318        '08/01/2019'
5319      ],
5320      colors: ['#05bbc9', '#fe721c', '#00cc96'],
5321      markers: {
5322        size: 0
5323      },
5324      xaxis: {
5325        type: 'datetime',
5326      },
5327      yaxis: {
5328        show: true,
5329        labels: {
5330          minWidth: 20,
5331          maxWidth: 20
5332        }
5333      },
5334      tooltip: {
5335        shared: true,
5336        intersect: false,
5337        y: {
5338          formatter: function (y) {
5339            if (typeof y !== "undefined") {
5340              return y.toFixed(0) + " points";
5341            }
5342            return y;
5343
5344          }
5345        }
5346      }
5347    };
5348
5349    var chart = new ApexCharts(document.querySelector("#layout-1-chart-03"), options);
5350    chart.render();
5351    const body = document.querySelector('body')
5352    if (body.classList.contains('dark')) {
5353      apexChartUpdate(chart, {
5354        dark: true
5355      })
5356    }
5357
5358    document.addEventListener('ChangeColorMode', function (e) {
5359      apexChartUpdate(chart, e.detail)
5360    })
5361  }
5362
5363
5364  if (jQuery('#layout-1-chart-04').length) {
5365    am4core.ready(function () {
5366
5367      // Themes begin
5368      am4core.useTheme(am4themes_animated);
5369      // Themes end
5370
5371      var continents = {
5372        "AF": 0,
5373        "AN": 1,
5374        "AS": 2,
5375        "EU": 3,
5376        "NA": 4,
5377        "OC": 5,
5378        "SA": 6
5379      }
5380
5381      // Create map instance
5382      var chart = am4core.create("layout-1-chart-04", am4maps.MapChart);
5383      chart.projection = new am4maps.projections.Miller();
5384
5385      // Create map polygon series for world map
5386      var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
5387      worldSeries.useGeodata = true;
5388      worldSeries.geodata = am4geodata_worldLow;
5389      worldSeries.exclude = ["AQ"];
5390
5391      var worldPolygon = worldSeries.mapPolygons.template;
5392      worldPolygon.tooltipText = "{name}";
5393      worldPolygon.nonScalingStroke = true;
5394      worldPolygon.strokeOpacity = 0.5;
5395      worldPolygon.fill = am4core.color("#eee");
5396      worldPolygon.propertyFields.fill = "color";
5397
5398      var hs = worldPolygon.states.create("hover");
5399      hs.properties.fill = chart.colors.getIndex(9);
5400
5401
5402      // Create country specific series (but hide it for now)
5403      var countrySeries = chart.series.push(new am4maps.MapPolygonSeries());
5404      countrySeries.useGeodata = true;
5405      countrySeries.hide();
5406      countrySeries.geodataSource.events.on("done", function (ev) {
5407        worldSeries.hide();
5408        countrySeries.show();
5409      });
5410
5411      var countryPolygon = countrySeries.mapPolygons.template;
5412      countryPolygon.tooltipText = "{name}";
5413      countryPolygon.nonScalingStroke = true;
5414      countryPolygon.strokeOpacity = 0.5;
5415      countryPolygon.fill = am4core.color("#eee");
5416
5417      var hs = countryPolygon.states.create("hover");
5418      hs.properties.fill = chart.colors.getIndex(9);
5419
5420      // Set up click events
5421      worldPolygon.events.on("hit", function (ev) {
5422        ev.target.series.chart.zoomToMapObject(ev.target);
5423        var map = ev.target.dataItem.dataContext.map;
5424        if (map) {
5425          ev.target.isHover = false;

5426          countrySeries.geodataSource.url = "https://www.amcharts.com/lib/4/geodata/json/" + map + ".json";
5427          countrySeries.geodataSource.load();
5428        }
5429      });
5430
5431      // Set up data for countries
5432      var data = [];
5433      for (var id in am4geodata_data_countries2) {
5434        if (am4geodata_data_countries2.hasOwnProperty(id)) {
5435          var country = am4geodata_data_countries2[id];
5436          if (country.maps.length) {
5437            data.push({
5438              id: id,
5439              color: chart.colors.getIndex(continents[country.continent_code]),
5440              map: country.maps[0]
5441            });
5442          }
5443        }
5444      }
5445      worldSeries.data = data;
5446
5447      // Zoom control
5448      chart.zoomControl = new am4maps.ZoomControl();
5449
5450      var homeButton = new am4core.Button();
5451      homeButton.events.on("hit", function () {
5452        worldSeries.show();
5453        countrySeries.hide();
5454        chart.goHome();
5455      });
5456
5457      homeButton.icon = new am4core.Sprite();
5458      homeButton.padding(7, 5, 7, 5);
5459      homeButton.width = 30;
5460      homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
5461      homeButton.marginBottom = 10;
5462      homeButton.parent = chart.zoomControl;
5463      homeButton.insertBefore(chart.zoomControl.plusButton);
5464
5465      const body = document.querySelector('body')
5466      if (body.classList.contains('dark')) {
5467        amChartUpdate(chart, {
5468          dark: true
5469        })
5470      }
5471
5472      document.addEventListener('ChangeColorMode', function (e) {
5473        amChartUpdate(chart, e.detail)
5474      })
5475
5476    });
5477  }
5478
5479  if (jQuery("#layout-1-chart-05").length) {
5480    const options = {
5481      series: [{
5482        name: 'Week',
5483        data: [80, 50, 30, 40, 100, 20],
5484      }, {
5485        name: 'Month',
5486        data: [20, 30, 40, 80, 20, 80],
5487      }, {
5488        name: 'Year',
5489        data: [44, 76, 78, 13, 43, 10],
5490      }],
5491      colors: ["#43d396", "#fe721c", "#876cfe"],
5492      chart: {
5493        height: 360,
5494        type: 'radar',
5495        dropShadow: {
5496          enabled: true,
5497          blur: 1,
5498          left: 1,
5499          top: 1
5500        }
5501      },
5502
5503      stroke: {
5504        width: 2
5505      },
5506      fill: {
5507        opacity: 0.1
5508      },
5509      markers: {
5510        size: 0
5511      },
5512      xaxis: {
5513        categories: ['2011', '2012', '2013', '2014', '2015', '2016']
5514      }
5515    };
5516
5517    const chart = new ApexCharts(document.querySelector("#layout-1-chart-05"), options);
5518    chart.render();
5519    const body = document.querySelector('body')
5520    if (body.classList.contains('dark')) {
5521      apexChartUpdate(chart, {
5522        dark: true
5523      })
5524    }
5525
5526    document.addEventListener('ChangeColorMode', function (e) {
5527      apexChartUpdate(chart, e.detail)
5528    })
5529  }
5530
5531  if (jQuery("#layout-1-chart-06").length) {
5532  var options = {
5533          series: [{
5534          name: 'Total Likes',
5535          data: [86, 65, 96, 46, 30, 58,97]
5536        }, {
5537          name: 'Total Share',
5538          data: [55, 95, 45, 98, 55, 99,44]
5539        }],
5540          chart: {
5541          type: 'bar',
5542          height: 310
5543        },
5544    colors: ['#05bbc9','#876cfe'],
5545
5546        plotOptions: {
5547          bar: {
5548            horizontal: false,
5549            columnWidth: '25%',
5550            endingShape: 'rounded'
5551          },
5552        },
5553        dataLabels: {
5554          enabled: false
5555        },
5556        stroke: {
5557          show: true,
5558          width: 2,
5559          colors: ['transparent']
5560        },
5561        xaxis: {
5562          categories: ['2020 Q1', '2020 Q2', '2020 Q3', '2020 Q4', '2020 Q5', '2020 Q6', '2020 Q7'],
5563        },
5564      yaxis: {
5565        show: true,
5566        labels: {
5567          minWidth: 20,
5568          maxWidth: 20
5569        }
5570      },
5571        fill: {
5572          opacity: 1
5573        },
5574        tooltip: {
5575          y: {
5576            formatter: function (val) {
5577              return "$ " + val + " thousands"
5578            }
5579          }
5580        }
5581        };
5582
5583    var chart = new ApexCharts(document.querySelector("#layout-1-chart-06"), options);
5584        chart.render();
5585}
5586//layout-2
5587  if (jQuery('#layout-2-chart-01').length) {
5588    const options = {
5589      series: [{
5590        name: 'Successful deals',
5591        data: [30, 50, 35, 60, 40, 60, 60]
5592      }, {
5593        name: 'Failed deals',
5594        data: [40, 50, 55, 50, 30, 80, 30]
5595      }],
5596      chart: {
5597        type: 'bar',
5598        height: 330,
5599        stacked: true
5600      },
5601      colors: ["#05bbc9", "#dff6f8"],
5602
5603      plotOptions: {
5604        bar: {
5605          horizontal: false,
5606          columnWidth: '15%',
5607          endingShape: 'rounded'
5608        },
5609      },
5610      legend: {
5611        show: false
5612      },
5613      dataLabels: {
5614        enabled: false
5615      },
5616      stroke: {
5617        show: true,
5618        width: 2,
5619        colors: ['transparent']
5620      },
5621      xaxis: {
5622        categories: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
5623        labels: {
5624          minHeight: 20,
5625          maxHeight: 20
5626        }
5627      },
5628      yaxis: {
5629        title: {
5630          text: ''
5631        },
5632        labels: {
5633          minWidth: 19,
5634          maxWidth: 19,
5635        }
5636      },
5637      xaxis: {
5638        labels: {
5639          maxHight: 50,
5640        },
5641      },
5642      fill: {
5643        opacity: 1
5644      },
5645      tooltip: {
5646        y: {
5647          formatter: function (val) {
5648            return "$ " + val + " thousands"
5649          }
5650        }
5651      }
5652    };
5653
5654    const chart = new ApexCharts(document.querySelector("#layout-2-chart-01"), options);
5655    chart.render();
5656    const body = document.querySelector('body')
5657    if (body.classList.contains('dark')) {
5658      apexChartUpdate(chart, {
5659        dark: true
5660      })
5661    }
5662
5663    document.addEventListener('ChangeColorMode', function (e) {
5664      apexChartUpdate(chart, e.detail)
5665    })
5666  }
5667  if (jQuery("#layout-2-chart-02").length) {
5668    var options = {
5669      series: [{
5670        name: 'Top',
5671        data: [20, 65, 10, 120, 30, 80, 40]
5672
5673      }, {
5674        name: 'New',
5675        data: [40, 0, 100, 50, 90, 40, 20]
5676
5677      }],
5678      colors: ["#05bbc9", "#ff4b4b"],
5679      chart: {
5680        height: 300,
5681        type: 'line',
5682        zoom: {
5683          enabled: false
5684        },
5685        sparkline: {
5686          enabled: false,
5687        }
5688      },
5689      dataLabels: {
5690        enabled: false
5691      },
5692      stroke: {
5693        curve: 'smooth',
5694        width: 3
5695      },
5696      title: {
5697        text: '',
5698        align: 'left'
5699      },
5700      fill: {
5701        opacity: 1
5702      },
5703      grid: {
5704        row: {
5705          colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
5706          opacity: 0.5,
5707
5708        },
5709
5710      },
5711      xaxis: {
5712        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
5713        labels: {
5714          minHeight: 22,
5715          maxHeight: 35,
5716        }
5717      },
5718      yaxis: {
5719        labels: {
5720          offsetY: 0,
5721          minWidth: 15,
5722          maxWidth: 15,
5723        }
5724      },
5725      legend: {
5726        position: 'top',
5727        offsetX: -20        
5728      },
5729    };
5730
5731    var chart = new ApexCharts(document.querySelector("#layout-2-chart-02"), options);
5732    chart.render();
5733    const body = document.querySelector('body')
5734    if (body.classList.contains('dark')) {
5735      apexChartUpdate(chart, {
5736        dark: true
5737      })
5738    }
5739
5740    document.addEventListener('ChangeColorMode', function (e) {
5741      apexChartUpdate(chart, e.detail)
5742    })
5743
5744  }
5745  if (jQuery('#layout-2-chart-03').length) {
5746    Highcharts.chart('layout-2-chart-03', {
5747      chart: {

5748        plotBackgroundColor: null,
5749        plotBorderWidth: null,
5750        plotShadow: false,
5751        height: 300,
5752        type: 'pie'
5753      },
5754      title: {
5755        text: ''
5756      },
5757      tooltip: {
5758        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
5759      },
5760      accessibility: {
5761        point: {
5762          valueSuffix: '%'
5763        }
5764      },
5765      plotOptions: {
5766        pie: {
5767          allowPointSelect: true,
5768          cursor: 'pointer',
5769          dataLabels: {
5770            enabled: false
5771          },
5772          showInLegend: true
5773        }
5774      },
5775      colors: ["#fe721c", "#05bbc9", "#876cfe"],
5776      series: [{
5777        name: 'Brands',
5778        colorByPoint: true,
5779        data: [{
5780          name: 'Desktop',
5781          y: 30,
5782          sliced: true,
5783          selected: true
5784        }, {
5785            name: 'Mobile',
5786          y: 40
5787        },{
5788            name: 'Tablet',
5789          y: 30
5790        }]
5791      }]
5792    });
5793    const body = document.querySelector('body')
5794    if (body.classList.contains('dark')) {
5795      apexChartUpdate(chart, {
5796        dark: true
5797      })
5798    }
5799
5800    document.addEventListener('ChangeColorMode', function (e) {
5801      apexChartUpdate(chart, e.detail)
5802    })
5803  }
5804  if (jQuery('#layout-2-chart-04').length) {
5805    am4core.ready(function () {
5806
5807      // Themes begin
5808      am4core.useTheme(am4themes_animated);
5809      // Themes end
5810
5811      var continents = {
5812        "AF": 0,
5813        "AN": 1,
5814        "AS": 2,
5815        "EU": 3,
5816        "NA": 4,
5817        "OC": 5,
5818        "SA": 6
5819      }
5820
5821      // Create map instance
5822      var chart = am4core.create("layout-2-chart-04", am4maps.MapChart);
5823      chart.projection = new am4maps.projections.Miller();
5824
5825      // Create map polygon series for world map
5826      var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
5827      worldSeries.useGeodata = true;
5828      worldSeries.geodata = am4geodata_worldLow;
5829      worldSeries.exclude = ["AQ"];
5830
5831      var worldPolygon = worldSeries.mapPolygons.template;
5832      worldPolygon.tooltipText = "{name}";
5833      worldPolygon.nonScalingStroke = true;
5834      worldPolygon.strokeOpacity = 0.5;
5835      worldPolygon.fill = am4core.color("#eee");
5836      worldPolygon.propertyFields.fill = "color";
5837
5838      var hs = worldPolygon.states.create("hover");
5839      hs.properties.fill = chart.colors.getIndex(9);
5840
5841
5842      // Create country specific series (but hide it for now)
5843      var countrySeries = chart.series.push(new am4maps.MapPolygonSeries());
5844      countrySeries.useGeodata = true;
5845      countrySeries.hide();
5846      countrySeries.geodataSource.events.on("done", function (ev) {
5847        worldSeries.hide();
5848        countrySeries.show();
5849      });
5850
5851      var countryPolygon = countrySeries.mapPolygons.template;
5852      countryPolygon.tooltipText = "{name}";
5853      countryPolygon.nonScalingStroke = true;
5854      countryPolygon.strokeOpacity = 0.5;
5855      countryPolygon.fill = am4core.color("#eee");
5856
5857      var hs = countryPolygon.states.create("hover");
5858      hs.properties.fill = chart.colors.getIndex(9);
5859
5860      // Set up click events
5861      worldPolygon.events.on("hit", function (ev) {
5862        ev.target.series.chart.zoomToMapObject(ev.target);
5863        var map = ev.target.dataItem.dataContext.map;
5864        if (map) {
5865          ev.target.isHover = false;
5866          countrySeries.geodataSource.url = "https://www.amcharts.com/lib/4/geodata/json/" + map + ".json";
5867          countrySeries.geodataSource.load();
5868        }
5869      });
5870
5871      // Set up data for countries
5872      var data = [];
5873      for (var id in am4geodata_data_countries2) {
5874        if (am4geodata_data_countries2.hasOwnProperty(id)) {
5875          var country = am4geodata_data_countries2[id];
5876          if (country.maps.length) {
5877            data.push({
5878              id: id,
5879              color: chart.colors.getIndex(continents[country.continent_code]),
5880              map: country.maps[0]
5881            });
5882          }
5883        }
5884      }
5885      worldSeries.data = data;
5886
5887      // Zoom control
5888      chart.zoomControl = new am4maps.ZoomControl();
5889
5890      var homeButton = new am4core.Button();
5891      homeButton.events.on("hit", function () {
5892        worldSeries.show();
5893        countrySeries.hide();
5894        chart.goHome();
5895      });
5896
5897      homeButton.icon = new am4core.Sprite();
5898      homeButton.padding(7, 5, 7, 5);
5899      homeButton.width = 30;
5900      homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10

5900L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
5901      homeButton.marginBottom = 10;
5902      homeButton.parent = chart.zoomControl;
5903      homeButton.insertBefore(chart.zoomControl.plusButton);
5904
5905      const body = document.querySelector('body')
5906      if (body.classList.contains('dark')) {
5907        amChartUpdate(chart, {
5908          dark: true
5909        })
5910      }
5911
5912      document.addEventListener('ChangeColorMode', function (e) {
5913        amChartUpdate(chart, e.detail)
5914      })
5915
5916    });
5917  }
5918  //layout-3
5919
5920  if (jQuery("#layout-3-chart-01").length) {
5921    am4core.ready(function () {
5922
5923      // Themes begin
5924      am4core.useTheme(am4themes_animated);
5925      // Themes end
5926
5927      // Create map instance
5928      var chart = am4core.create("layout-3-chart-01", am4maps.MapChart);
5929      // Set map definition
5930      chart.geodata = am4geodata_worldLow;
5931
5932      // Set projection
5933      chart.projection = new am4maps.projections.Miller();
5934
5935      // Create map polygon series
5936      var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
5937
5938      // Exclude Antartica
5939      polygonSeries.exclude = ["AQ"];
5940
5941      // Make map load polygon (like country names) data from GeoJSON
5942      polygonSeries.useGeodata = true;
5943
5944      // Configure series
5945      var polygonTemplate = polygonSeries.mapPolygons.template;
5946      polygonTemplate.fill = '#585858';
5947
5948      polygonTemplate.tooltipText = "{name}";
5949      polygonTemplate.polygon.fillOpacity = 0.6;
5950
5951
5952      // Create hover state and set alternative fill color
5953      var hs = polygonTemplate.states.create("hover");
5954      hs.properties.fill = chart.colors.getIndex(0);
5955
5956      // Add image series
5957      var imageSeries = chart.series.push(new am4maps.MapImageSeries());
5958      imageSeries.mapImages.template.propertyFields.longitude = "longitude";
5959      imageSeries.mapImages.template.propertyFields.latitude = "latitude";
5960      imageSeries.mapImages.template.tooltipText = "{title}";
5961      imageSeries.mapImages.template.propertyFields.url = "url";
5962
5963      var circle = imageSeries.mapImages.template.createChild(am4core.Circle);
5964      circle.radius = 3;
5965      circle.propertyFields.fill = "color";
5966
5967      var circle2 = imageSeries.mapImages.template.createChild(am4core.Circle);
5968      circle2.radius = 3;
5969      circle2.propertyFields.fill = "color";
5970
5971
5972      circle2.events.on("inited", function (event) {
5973        animateBullet(event.target);
5974      })
5975
5976
5977      function animateBullet(circle) {
5978        var animation = circle.animate([{ property: "scale", from: 1, to: 5 }, { property: "opacity", from: 1, to: 0 }], 1000, am4core.ease.circleOut);
5979        animation.events.on("animationended", function (event) {
5980          animateBullet(event.target.object);
5981        })
5982      }
5983
5984      var colorSet = new am4core.ColorSet();
5985
5986      imageSeries.data = [{
5987        "title": "Brussels",
5988        "latitude": 50.8371,
5989        "longitude": 4.3676,
5990        "color": colorSet.next()
5991      }, {
5992        "title": "Copenhagen",
5993        "latitude": 55.6763,
5994        "longitude": 12.5681,
5995        "color": colorSet.next()
5996      }, {
5997        "title": "Paris",
5998        "latitude": 48.8567,
5999        "longitude": 2.3510,
6000        "color": colorSet.next()
6001      }, {
6002        "title": "Reykjavik",
6003        "latitude": 64.1353,
6004        "longitude": -21.8952,
6005        "color": colorSet.next()
6006      }, {
6007        "title": "Moscow",
6008        "latitude": 55.7558,
6009        "longitude": 37.6176,
6010        "color": colorSet.next()
6011      }, {
6012        "title": "Madrid",
6013        "latitude": 40.4167,
6014        "longitude": -3.7033,
6015        "color": colorSet.next()
6016      }, {
6017        "title": "London",
6018        "latitude": 51.5002,
6019        "longitude": -0.1262,
6020        "url": "http://www.google.co.uk",
6021        "color": colorSet.next()
6022      }, {
6023        "title": "Peking",
6024        "latitude": 39.9056,
6025        "longitude": 116.3958,
6026        "color": colorSet.next()
6027      }, {
6028        "title": "New Delhi",
6029        "latitude": 28.6353,
6030        "longitude": 77.2250,
6031        "color": colorSet.next()
6032      }, {
6033        "title": "Tokyo",
6034        "latitude": 35.6785,
6035        "longitude": 139.6823,
6036        "url": "http://www.google.co.jp",
6037        "color": colorSet.next()
6038      }, {
6039        "title": "Ankara",
6040        "latitude": 39.9439,
6041        "longitude": 32.8560,
6042        "color": colorSet.next()
6043      }, {
6044        "title": "Buenos Aires",
6045        "latitude": -34.6118,
6046        "longitude": -58.4173,
6047        "color": colorSet.next()
6048      }, {
6049        "title": "Brasilia",
6050        "latitude": -15.7801,
6051        "longitude": -47.9292,
6052        "color": colorSet.next()
6053      }, {
6054        "title": "Ottawa",
6055        "latitude": 45.4235,
6056        "longitude": -75.6979,
6057        "color": colorSet.next()
6058      }, {
6059        "title": "Washington",
6060        "latitude": 38.8921,
6061        "longitude": -77.0241,
6062        "color": colorSet.next()
6063      }, {
6064        "title": "Kinshasa",
6065        "latitude": -4.3369,
6066        "longitude": 15.3271,
6067        "color": colorSet.next()
6068      }, {
6069        "title": "Cairo",
6070        "latitude": 30.0571,
6071        "longitude": 31.2272,
6072        "color": colorSet.next()
6073      }, {
6074        "title": "Pretoria",
6075        "latitude": -25.7463,
6076        "longitude": 28.1876,
6077        "color": colorSet.next()
6078      }];
6079
6080      const body = document.querySelector('body')
6081      if (body.classList.contains('dark')) {
6082        amChartUpdate(chart, {
6083          dark: true
6084        })
6085      }
6086
6087      document.addEventListener('ChangeColorMode', function (e) {
6088        amChartUpdate(chart, e.detail)
6089      })
6090
6091    });
6092  }
6093
6094  if (jQuery('#layout-3-chart-02').length) {
6095    Highcharts.chart('layout-3-chart-02', {
6096      chart: {

6097        plotBackgroundColor: null,
6098        plotBorderWidth: null,
6099        plotShadow: false,
6100        height: 300,
6101        type: 'pie'
6102      },
6103      title: {
6104        text: ''
6105      },
6106      tooltip: {
6107        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
6108      },
6109      accessibility: {
6110        point: {
6111          valueSuffix: '%'
6112        }
6113      },
6114      plotOptions: {
6115        pie: {
6116          allowPointSelect: true,
6117          cursor: 'pointer',
6118          dataLabels: {
6119            enabled: false
6120          },
6121          showInLegend: true
6122        }
6123      },
6124      colors: ["#876cfe", "#05bbc9"],
6125      series: [{
6126        name: 'Brands',
6127        colorByPoint: true,
6128        data: [{
6129          name: 'Man : 3,272978',
6130          y: 80,
6131          sliced: true,
6132          selected: true
6133        }, {
6134            name: 'Woman : 83,272978',
6135          y: 30
6136        }]
6137      }]
6138    });
6139  }
6140  if (jQuery("#layout-3-chart-03").length) {
6141    const options = {
6142      series: [{
6143        name: 'Frauds',
6144        data: [53, 55, 45, 40, 40, 28, 35, 25, 2]
6145      }, {
6146          name: 'Paid Clicks',
6147        data: [63, 62, 52, 72, 55, 80, 70, 50, 60]
6148      }, {
6149          name: 'Total Clicks',
6150        data: [150, 135, 144, 115, 120, 114, 133, 124, 100]
6151      }],
6152      colors: ['#05bbc9', '#ffca44', '#876cfe'],
6153      labels: ['20 Feb', '21 Feb', '22 Feb', '23 Feb', '24 Feb', '25 Feb', '25 Feb', '26 Feb', '27 Feb', '28 Feb' ],
6154      chart: {
6155        type: 'bar',
6156        height: 330,
6157        stacked: true,
6158        zoom: {
6159          enabled: true
6160        }
6161      },
6162      responsive: [{
6163        breakpoint: 480,
6164        options: {
6165          legend: {
6166            position: 'bottom',
6167            offsetX: -10,
6168            offsetY: 0
6169          }
6170        }
6171      }],
6172      plotOptions: {
6173        bar: {
6174          horizontal: false,
6175          columnWidth: '12%',
6176          endingShape: 'rounded'
6177        },
6178      },
6179      xaxis: {
6180        show: true
6181        
6182      },
6183      yaxis: {
6184        show: true,
6185        labels: {
6186          minWidth: 20,
6187          maxWidth: 20
6188        }
6189      },
6190      legend: {
6191        position: 'bottom',
6192        offsetX: 0,
6193        offsetY: -10
6194
6195      },
6196      fill: {
6197        opacity: 1
6198      },
6199      dataLabels: {
6200        enabled: false
6201      }
6202      
6203    };
6204    const chart = new ApexCharts(document.querySelector("#layout-3-chart-03"), options);
6205    chart.render();
6206    const body = document.querySelector('body')
6207    if (body.classList.contains('dark')) {
6208      apexChartUpdate(chart, {
6209        dark: true
6210      })
6211    }
6212
6213    document.addEventListener('ChangeColorMode', function (e) {
6214      apexChartUpdate(chart, e.detail)
6215    })
6216  }
6217  
6218  if (jQuery("#layout-3-chart-04").length) {
6219    var options = {
6220      series: [86, 40, 53, 63],
6221      chart: {
6222        height: 350,
6223        type: 'radialBar',
6224      },
6225      plotOptions: {
6226        radialBar: {
6227          dataLabels: {
6228            name: {
6229              fontSize: '22px',
6230            },
6231            value: {
6232              fontSize: '16px',
6233            },
6234            total: {
6235              show: true,
6236              label: 'Total',
6237              formatter: function (w) {
6238                // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
6239                return 249
6240              }
6241            }
6242          }
6243        }
6244      },
6245      colors: ['#876cfe', '#4788ff', '#ffca44', '#fe721c'],
6246      labels: ['Picture view', 'Comments', 'Video plays', 'Impressions'],
6247    };
6248
6249    var chart = new ApexCharts(document.querySelector("#layout-3-chart-04"), options);
6250    chart.render();
6251    const body = document.querySelector('body')
6252    if (body.classList.contains('dark')) {
6253      apexChartUpdate(chart, {
6254        dark: true
6255      })
6256    }
6257
6258    document.addEventListener('ChangeColorMode', function (e) {
6259      apexChartUpdate(chart, e.detail)
6260    })
6261
6262  }
6263})(jQuery);
6264
6265

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.