(function(jQuery) { "use strict"; // for apexchart function apexChartUpdate(chart, detail) { let color = getComputedStyle(document.documentElement).getPropertyValue('--dark'); if (detail.dark) { color = getComputedStyle(document.documentElement).getPropertyValue('--white'); } chart.updateOptions({ chart: { foreColor: color } }) } // for am chart function amChartUpdate(chart, detail) { // let color = getComputedStyle(document.documentElement).getPropertyValue('--dark'); if (detail.dark) { // color = getComputedStyle(document.documentElement).getPropertyValue('--white'); chart.stroke = am4core.color(getComputedStyle(document.documentElement).getPropertyValue('--white')); } chart.validateData(); } /*--------------------------------------------------------------------- Apex Charts -----------------------------------------------------------------------*/ if (jQuery("#apex-basic").length) { options = { chart: { height: 350, type: "line", zoom: { enabled: !1 } }, colors: ["#4788ff"], series: [{ name: "Desktops", data: [10, 41, 35, 51, 49, 62, 69, 91, 148] }], dataLabels: { enabled: !1 }, stroke: { curve: "straight" }, title: { text: "Product Trends by Month", align: "left" }, grid: { row: { colors: ["#f3f3f3", "transparent"], opacity: .5 } }, xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"] } }; if(typeof ApexCharts !== typeof undefined){ (chart = new ApexCharts(document.querySelector("#apex-basic"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } } if (jQuery("#apex-line-area").length) { options = { chart: { height: 350, type: "area" }, dataLabels: { enabled: !1 }, stroke: { curve: "smooth" }, colors: ["#4788ff", "#ff4b4b"], series: [{ name: "series1", data: [31, 40, 28, 51, 42, 109, 100] }, { name: "series2", data: [11, 32, 45, 32, 34, 52, 41] }], xaxis: { type: "datetime", 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"] }, tooltip: { x: { format: "dd/MM/yy HH:mm" } } }; (chart = new ApexCharts(document.querySelector("#apex-line-area"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#apex-bar").length) { options = { chart: { height: 350, type: "bar" }, plotOptions: { bar: { horizontal: !0 } }, dataLabels: { enabled: !1 }, colors: ["#4788ff"], series: [{ data: [470, 540, 580, 690, 1100, 1200, 1380] }], xaxis: { categories: ["Netherlands", "Italy", "France", "Japan", "United States", "China", "Germany"] } }; (chart = new ApexCharts(document.querySelector("#apex-bar"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#apex-column").length) { options = { chart: { height: 350, type: "bar" }, plotOptions: { bar: { horizontal: !1, columnWidth: "55%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2, colors: ["transparent"] }, colors: ["#4788ff", "#37e6b0", "#ff4b4b"], series: [{ name: "Net Profit", data: [44, 55, 57, 56, 61, 58] }, { name: "Revenue", data: [76, 85, 101, 98, 87, 105] }, { name: "Free Cash Flow", data: [35, 41, 36, 26, 45, 48] }], xaxis: { categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul"] }, yaxis: { title: { text: "$ (thousands)" } }, fill: { opacity: 1 }, tooltip: { y: { formatter: function(e) { return "$ " + e + " thousands" } } } }; (chart = new ApexCharts(document.querySelector("#apex-column"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#apex-mixed-chart").length) { options = { chart: { height: 350, type: "line", stacked: !1 }, stroke: { width: [0, 2, 5], curve: "smooth" }, plotOptions: { bar: { columnWidth: "50%" } }, colors: ["#ff4b4b", "#37e6b0", "#4788ff"], series: [{ name: "Facebook", type: "column", data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30] }, { name: "Vine", type: "area", data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43] }, { name: "Dribbble", type: "line", data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39] }], fill: { opacity: [.85, .25, 1], gradient: { inverseColors: !1, shade: "light", type: "vertical", opacityFrom: .85, opacityTo: .55, stops: [0, 100, 100, 100] } }, 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"], markers: { size: 0 }, xaxis: { type: "datetime" }, yaxis: { min: 0 }, tooltip: { shared: !0, intersect: !1, y: { formatter: function(e) { return void 0 !== e ? e.toFixed(0) + " views" : e } } }, legend: { labels: { useSeriesColors: !0 }, markers: { customHTML: [function() { return "" }, function() { return "" }, function() { return "" }] } } }; (chart = new ApexCharts(document.querySelector("#apex-mixed-chart"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#apex-candlestick-chart").length) { options = { chart: { height: 350, type: "candlestick" }, colors: ["#4788ff", "#37e6b0", "#37e6b0"], series: [{ data: [{ x: new Date(15387786e5), y: [6629.81, 6650.5, 6623.04, 6633.33] }, { x: new Date(15387804e5), y: [6632.01, 6643.59, 6620, 6630.11] }, { x: new Date(15387822e5), y: [6630.71, 6648.95, 6623.34, 6635.65] }, { x: new Date(1538784e6), y: [6635.65, 6651, 6629.67, 6638.24] }, { x: new Date(15387858e5), y: [6638.24, 6640, 6620, 6624.47] }, { x: new Date(15387876e5), y: [6624.53, 6636.03, 6621.68, 6624.31] }, { x: new Date(15387894e5), y: [6624.61, 6632.2, 6617, 6626.02] }, { x: new Date(15387912e5), y: [6627, 6627.62, 6584.22, 6603.02] }, { x: new Date(1538793e6), y: [6605, 6608.03, 6598.95, 6604.01] }, { x: new Date(15387948e5), y: [6604.5, 6614.4, 6602.26, 6608.02] }, { x: new Date(15387966e5), y: [6608.02, 6610.68, 6601.99, 6608.91] }, { x: new Date(15387984e5), y: [6608.91, 6618.99, 6608.01, 6612] }, { x: new Date(15388002e5), y: [6612, 6615.13, 6605.09, 6612] }, { x: new Date(1538802e6), y: [6612, 6624.12, 6608.43, 6622.95] }, { x: new Date(15388038e5), y: [6623.91, 6623.91, 6615, 6615.67] }, { x: new Date(15388056e5), y: [6618.69, 6618.74, 6610, 6610.4] }, { x: new Date(15388074e5), y: [6611, 6622.78, 6610.4, 6614.9] }, { x: new Date(15388092e5), y: [6614.9, 6626.2, 6613.33, 6623.45] }, { x: new Date(1538811e6), y: [6623.48, 6627, 6618.38, 6620.35] }, { x: new Date(15388128e5), y: [6619.43, 6620.35, 6610.05, 6615.53] }, { x: new Date(15388146e5), y: [6615.53, 6617.93, 6610, 6615.19] }, { x: new Date(15388164e5), y: [6615.19, 6621.6, 6608.2, 6620] }, { x: new Date(15388182e5), y: [6619.54, 6625.17, 6614.15, 6620] }, { x: new Date(153882e7), y: [6620.33, 6634.15, 6617.24, 6624.61] }, { x: new Date(15388218e5), y: [6625.95, 6626, 6611.66, 6617.58] }, { x: new Date(15388236e5), y: [6619, 6625.97, 6595.27, 6598.86] }, { x: new Date(15388254e5), y: [6598.86, 6598.88, 6570, 6587.16] }, { x: new Date(15388272e5), y: [6588.86, 6600, 6580, 6593.4] }, { x: new Date(1538829e6), y: [6593.99, 6598.89, 6585, 6587.81] }, { x: new Date(15388308e5), y: [6587.81, 6592.73, 6567.14, 6578] }, { x: new Date(15388326e5), y: [6578.35, 6581.72, 6567.39, 6579] }, { x: new Date(15388344e5), y: [6579.38, 6580.92, 6566.77, 6575.96] }, { x: new Date(15388362e5), y: [6575.96, 6589, 6571.77, 6588.92] }, { x: new Date(1538838e6), y: [6588.92, 6594, 6577.55, 6589.22] }, { x: new Date(15388398e5), y: [6589.3, 6598.89, 6589.1, 6596.08] }, { x: new Date(15388416e5), y: [6597.5, 6600, 6588.39, 6596.25] }, { x: new Date(15388434e5), y: [6598.03, 6600, 6588.73, 6595.97] }, { x: new Date(15388452e5), y: [6595.97, 6602.01, 6588.17, 6602] }, { x: new Date(1538847e6), y: [6602, 6607, 6596.51, 6599.95] }, { x: new Date(15388488e5), y: [6600.63, 6601.21, 6590.39, 6591.02] }, { x: new Date(15388506e5), y: [6591.02, 6603.08, 6591, 6591] }, { x: new Date(15388524e5), y: [6591, 6601.32, 6585, 6592] }, { x: new Date(15388542e5), y: [6593.13, 6596.01, 6590, 6593.34] }, { x: new Date(1538856e6), y: [6593.34, 6604.76, 6582.63, 6593.86] }, { x: new Date(15388578e5), y: [6593.86, 6604.28, 6586.57, 6600.01] }, { x: new Date(15388596e5), y: [6601.81, 6603.21, 6592.78, 6596.25] }, { x: new Date(15388614e5), y: [6596.25, 6604.2, 6590, 6602.99] }, { x: new Date(15388632e5), y: [6602.99, 6606, 6584.99, 6587.81] }, { x: new Date(1538865e6), y: [6587.81, 6595, 6583.27, 6591.96] }, { x: new Date(15388668e5), y: [6591.97, 6596.07, 6585, 6588.39] }, { x: new Date(15388686e5), y: [6587.6, 6598.21, 6587.6, 6594.27] }, { x: new Date(15388704e5), y: [6596.44, 6601, 6590, 6596.55] }, { x: new Date(15388722e5), y: [6598.91, 6605, 6596.61, 6600.02] }, { x: new Date(1538874e6), y: [6600.55, 6605, 6589.14, 6593.01] }, { x: new Date(15388758e5), y: [6593.15, 6605, 6592, 6603.06] }] }], title: { text: "CandleStick Chart", align: "left" }, xaxis: { type: "datetime" }, yaxis: { tooltip: { enabled: !0 } } }; (chart = new ApexCharts(document.querySelector("#apex-candlestick-chart"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#apex-bubble-chart").length) { function generateData(e, t, a) { for (var n = 0, o = []; n < t;) { var r = Math.floor(Math.random() * (a.max - a.min + 1)) + a.min, i = Math.floor(61 * Math.random()) + 15; o.push([e, r, i]), e += 864e5, n++ } return o } options = { chart: { height: 350, type: "bubble" }, dataLabels: { enabled: !1 }, series: [{ name: "Product1", data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, { min: 10, max: 40 }) }, { name: "Product2", data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, { min: 10, max: 40 }) }, { name: "Product3", data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, { min: 10, max: 40 }) }], fill: { type: "gradient" }, colors: ["#4788ff", "#37e6b0", "#37e6b0"], title: { text: "3D Bubble Chart" }, xaxis: { tickAmount: 12, type: "datetime", labels: { rotate: 0 } }, yaxis: { max: 40 }, theme: { palette: "palette2" } }; (chart = new ApexCharts(document.querySelector("#apex-bubble-chart"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#apex-scatter-chart").length) { options = { chart: { height: 350, type: "scatter", zoom: { enabled: !0, type: "xy" } }, colors: ["#4788ff", "#ff4b4b", "#37e6b0"], series: [{ name: "SAMPLE A", data: [ [16.4, 5.4], [21.7, 2], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, .3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7] ] }, { name: "SAMPLE B", data: [ [36.4, 13.4], [1.7, 11], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [.9, 10], [4.5, 17.1], [10.9, 10], [.1, 14.7] ] }, { name: "SAMPLE C", data: [ [21.7, 3], [23.6, 3.5], [28, 4], [27.1, .3], [16.4, 4], [13.6, 0], [19, 5], [22.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [29.6, 6], [31.6, 8], [21.6, 5], [20.9, 4], [22.4, 0], [32.6, 10.3], [29.7, 20.8] ] }], xaxis: { tickAmount: 5, labels: { formatter: function(e) { return parseFloat(e).toFixed(1) } } }, yaxis: { tickAmount: 5 } }; (chart = new ApexCharts(document.querySelector("#apex-scatter-chart"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#apex-radialbar-chart").length) { options = { chart: { height: 350, type: "radialBar" }, plotOptions: { radialBar: { dataLabels: { name: { fontSize: "22px" }, value: { fontSize: "16px" }, total: { show: !0, label: "Total", formatter: function(e) { return 249 } } } } }, series: [44, 55, 67, 83], labels: ["Apples", "Oranges", "Bananas", "Berries"], colors: ["#4788ff", "#ff4b4b", "#876cfe", "#37e6b0"] }; (chart = new ApexCharts(document.querySelector("#apex-radialbar-chart"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#apex-pie-chart").length) { options = { chart: { width: 380, type: "pie" }, labels: ["Team A", "Team B", "Team C", "Team D", "Team E"], series: [44, 55, 13, 43, 22], colors: ["#4788ff", "#ff4b4b", "#876cfe", "#37e6b0", "#c8c8c8"], responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: "bottom" } } }] }; (chart = new ApexCharts(document.querySelector("#apex-pie-chart"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#advanced-chart").length) { var options = { series: [ { name: 'Bob', data: [ { x: 'Design', y: [ new Date('2019-03-05').getTime(), new Date('2019-03-08').getTime() ] }, { x: 'Code', y: [ new Date('2019-03-02').getTime(), new Date('2019-03-05').getTime() ] }, { x: 'Code', y: [ new Date('2019-03-05').getTime(), new Date('2019-03-07').getTime() ] }, { x: 'Test', y: [ new Date('2019-03-03').getTime(), new Date('2019-03-09').getTime() ] }, { x: 'Test', y: [ new Date('2019-03-08').getTime(), new Date('2019-03-11').getTime() ] }, { x: 'Validation', y: [ new Date('2019-03-11').getTime(), new Date('2019-03-16').getTime() ] }, { x: 'Design', y: [ new Date('2019-03-01').getTime(), new Date('2019-03-03').getTime() ] } ] }, { name: 'Joe', data: [ { x: 'Design', y: [ new Date('2019-03-02').getTime(), new Date('2019-03-05').getTime() ] }, { x: 'Test', y: [ new Date('2019-03-06').getTime(), new Date('2019-03-16').getTime() ] }, { x: 'Code', y: [ new Date('2019-03-03').getTime(), new Date('2019-03-07').getTime() ] }, { x: 'Deployment', y: [ new Date('2019-03-20').getTime(), new Date('2019-03-22').getTime() ] }, { x: 'Design', y: [ new Date('2019-03-10').getTime(), new Date('2019-03-16').getTime() ] } ] }, { name: 'Dan', data: [ { x: 'Code', y: [ new Date('2019-03-10').getTime(), new Date('2019-03-17').getTime() ] }, { x: 'Validation', y: [ new Date('2019-03-05').getTime(), new Date('2019-03-09').getTime() ] }, ] } ], colors: ["#4788ff", "#ff4b4b", "#37e6b0"], chart: { height: 450, type: 'rangeBar' }, plotOptions: { bar: { horizontal: true, barHeight: '80%' } }, xaxis: { type: 'datetime' }, stroke: { width: 1 }, fill: { type: 'solid', opacity: 0.6 }, legend: { position: 'top', horizontalAlign: 'left' } }; (chart = new ApexCharts(document.querySelector("#advanced-chart"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#radar-multiple-chart").length) { var options = { series: [{ name: 'Series 1', data: [80, 50, 30, 40, 100, 20], }, { name: 'Series 2', data: [20, 30, 40, 80, 20, 80], }, { name: 'Series 3', data: [44, 76, 78, 13, 43, 10], }], colors: ["#4788ff", "#ff4b4b", "#37e6b0"], chart: { height: 350, type: 'radar', dropShadow: { enabled: true, blur: 1, left: 1, top: 1 } }, title: { text: 'Radar Chart - Multi Series' }, stroke: { width: 2 }, fill: { opacity: 0.1 }, markers: { size: 0 }, xaxis: { categories: ['2011', '2012', '2013', '2014', '2015', '2016'] } }; (chart = new ApexCharts(document.querySelector("#radar-multiple-chart"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } /*--------------------------------------------------------------------- Am Charts -----------------------------------------------------------------------*/ if(jQuery('#am-simple-chart').length){ am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("am-simple-chart", am4charts.XYChart); chart.colors.list = [am4core.color("#32BDEA"),am4core.color("#6c757d")]; // Add data chart.data = [{ "country": "USA", "visits": 2025 }, { "country": "China", "visits": 1882 }, { "country": "Japan", "visits": 1809 }, { "country": "Germany", "visits": 1322 }, { "country": "UK", "visits": 1122 }, { "country": "France", "visits": 1114 }]; // Create axes var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "country"; categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.minGridDistance = 30; categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) { if (target.dataItem && target.dataItem.index & 2 == 2) { return dy + 25; } return dy; }); var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); // Create series var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueY = "visits"; series.dataFields.categoryX = "country"; series.name = "Visits"; series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]"; series.columns.template.fillOpacity = .8; var columnTemplate = series.columns.template; columnTemplate.strokeWidth = 2; columnTemplate.strokeOpacity = 1; const body = document.querySelector('body') if (body.classList.contains('dark')) { amChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { amChartUpdate(chart, e.detail) }) }); // end am4core.ready() } if(jQuery('#am-columnlinr-chart').length){ am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("am-columnlinr-chart", am4charts.XYChart); chart.colors.list = [am4core.color("#4788ff"),]; // Export chart.exporting.menu = new am4core.ExportMenu(); // Data for both series var data = [ { "year": "2009", "income": 23.5, "expenses": 21.1 }, { "year": "2010", "income": 26.2, "expenses": 30.5 }, { "year": "2011", "income": 30.1, "expenses": 34.9 }, { "year": "2012", "income": 29.5, "expenses": 31.1 }, { "year": "2013", "income": 30.6, "expenses": 28.2, "lineDash": "5,5", }, { "year": "2014", "income": 34.1, "expenses": 32.9, "strokeWidth": 1, "columnDash": "5,5", "fillOpacity": 0.2, "additional": "(projection)" } ]; /* Create axes */ var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "year"; categoryAxis.renderer.minGridDistance = 30; /* Create value axis */ var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); /* Create series */ var columnSeries = chart.series.push(new am4charts.ColumnSeries()); columnSeries.name = "Income"; columnSeries.dataFields.valueY = "income"; columnSeries.dataFields.categoryX = "year"; columnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} in {categoryX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]" columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity"; columnSeries.columns.template.propertyFields.stroke = "stroke"; columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth"; columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash"; columnSeries.tooltip.label.textAlign = "middle"; var lineSeries = chart.series.push(new am4charts.LineSeries()); lineSeries.name = "Expenses"; lineSeries.dataFields.valueY = "expenses"; lineSeries.dataFields.categoryX = "year"; lineSeries.stroke = am4core.color("#4788ff"); lineSeries.strokeWidth = 3; lineSeries.propertyFields.strokeDasharray = "lineDash"; lineSeries.tooltip.label.textAlign = "middle"; var bullet = lineSeries.bullets.push(new am4charts.Bullet()); bullet.fill = am4core.color("#fdd400"); // tooltips grab fill from parent by default bullet.tooltipText = "[#fff font-size: 15px]{name} in {categoryX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]" var circle = bullet.createChild(am4core.Circle); circle.radius = 4; circle.fill = am4core.color("#fff"); circle.strokeWidth = 3; chart.data = data; const body = document.querySelector('body') if (body.classList.contains('dark')) { amChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { amChartUpdate(chart, e.detail) }) }); } if(jQuery('#am-stackedcolumn-chart').length){ am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("am-stackedcolumn-chart", am4charts.XYChart); chart.colors.list = [am4core.color("#ff4b4b"), am4core.color("#37e6b0"), am4core.color("#fe721c")]; // Add data chart.data = [{ "year": "2016", "europe": 2.5, "namerica": 2.5, "asia": 2.1, "lamerica": 0.3, "meast": 0.2 }, { "year": "2017", "europe": 2.6, "namerica": 2.7, "asia": 2.2, "lamerica": 0.3, "meast": 0.3 }, { "year": "2018", "europe": 2.8, "namerica": 2.9, "asia": 2.4, "lamerica": 0.3, "meast": 0.3 }]; // Create axes var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "year"; categoryAxis.renderer.grid.template.location = 0; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis.renderer.inside = true; valueAxis.renderer.labels.template.disabled = true; valueAxis.min = 0; // Create series function createSeries(field, name) { // Set up series var series = chart.series.push(new am4charts.ColumnSeries()); series.name = name; series.dataFields.valueY = field; series.dataFields.categoryX = "year"; series.sequencedInterpolation = true; // Make it stacked series.stacked = true; // Configure columns series.columns.template.width = am4core.percent(60); series.columns.template.tooltipText = "[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}"; // Add label var labelBullet = series.bullets.push(new am4charts.LabelBullet()); labelBullet.label.text = "{valueY}"; labelBullet.locationY = 0.5; return series; } createSeries("europe", "Europe"); createSeries("namerica", "North America"); createSeries("asia", "Asia-Pacific"); // Legend chart.legend = new am4charts.Legend(); const body = document.querySelector('body') if (body.classList.contains('dark')) { amChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { amChartUpdate(chart, e.detail) }) }); // end am4core.ready() } if(jQuery('#am-barline-chart').length){ am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end var chart = am4core.create("am-barline-chart", am4charts.XYChart); chart.colors.list = [am4core.color("#4788ff"), am4core.color("#37e6b0")]; chart.data = [{ "year": "2005", "income": 23.5, "expenses": 18.1 }, { "year": "2006", "income": 26.2, "expenses": 22.8 }, { "year": "2007", "income": 30.1, "expenses": 23.9 }, { "year": "2008", "income": 29.5, "expenses": 25.1 }, { "year": "2009", "income": 24.6, "expenses": 25 }]; //create category axis for years var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "year"; categoryAxis.renderer.inversed = true; categoryAxis.renderer.grid.template.location = 0; //create value axis for income and expenses var valueAxis = chart.xAxes.push(new am4charts.ValueAxis()); valueAxis.renderer.opposite = true; //create columns var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.categoryY = "year"; series.dataFields.valueX = "income"; series.name = "Income"; series.columns.template.fillOpacity = 0.5; series.columns.template.strokeOpacity = 0; series.tooltipText = "Income in {categoryY}: {valueX.value}"; //create line var lineSeries = chart.series.push(new am4charts.LineSeries()); lineSeries.dataFields.categoryY = "year"; lineSeries.dataFields.valueX = "expenses"; lineSeries.name = "Expenses"; lineSeries.strokeWidth = 3; lineSeries.tooltipText = "Expenses in {categoryY}: {valueX.value}"; //add bullets var circleBullet = lineSeries.bullets.push(new am4charts.CircleBullet()); circleBullet.circle.fill = am4core.color("#fff"); circleBullet.circle.strokeWidth = 2; //add chart cursor chart.cursor = new am4charts.XYCursor(); chart.cursor.behavior = "zoomY"; //add legend chart.legend = new am4charts.Legend(); const body = document.querySelector('body') if (body.classList.contains('dark')) { amChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { amChartUpdate(chart, e.detail) }) }); // end am4core.ready() } if(jQuery('#am-datedata-chart').length){ am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("am-datedata-chart", am4charts.XYChart); chart.colors.list = [am4core.color("#57aeff")]; // Add data chart.data = [{ "date": "2012-07-27", "value": 13 }, { "date": "2012-07-28", "value": 11 }, { "date": "2012-07-29", "value": 15 }, { "date": "2012-07-30", "value": 16 }, { "date": "2012-07-31", "value": 18 }, { "date": "2012-08-01", "value": 13 }, { "date": "2012-08-02", "value": 22 }, { "date": "2012-08-03", "value": 23 }, { "date": "2012-08-04", "value": 20 }, { "date": "2012-08-05", "value": 17 }, { "date": "2012-08-06", "value": 16 }, { "date": "2012-08-07", "value": 18 }, { "date": "2012-08-08", "value": 21 }, { "date": "2012-08-09", "value": 26 }, { "date": "2012-08-10", "value": 24 }, { "date": "2012-08-11", "value": 29 }, { "date": "2012-08-12", "value": 32 }, { "date": "2012-08-13", "value": 18 }, { "date": "2012-08-14", "value": 24 }, { "date": "2012-08-15", "value": 22 }, { "date": "2012-08-16", "value": 18 }, { "date": "2012-08-17", "value": 19 }, { "date": "2012-08-18", "value": 14 }, { "date": "2012-08-19", "value": 15 }, { "date": "2012-08-20", "value": 12 }, { "date": "2012-08-21", "value": 8 }, { "date": "2012-08-22", "value": 9 }, { "date": "2012-08-23", "value": 8 }, { "date": "2012-08-24", "value": 7 }, { "date": "2012-08-25", "value": 5 }, { "date": "2012-08-26", "value": 11 }, { "date": "2012-08-27", "value": 13 }, { "date": "2012-08-28", "value": 18 }, { "date": "2012-08-29", "value": 20 }, { "date": "2012-08-30", "value": 29 }, { "date": "2012-08-31", "value": 33 }, { "date": "2012-09-01", "value": 42 }, { "date": "2012-09-02", "value": 35 }, { "date": "2012-09-03", "value": 31 }, { "date": "2012-09-04", "value": 47 }, { "date": "2012-09-05", "value": 52 }, { "date": "2012-09-06", "value": 46 }, { "date": "2012-09-07", "value": 41 }, { "date": "2012-09-08", "value": 43 }, { "date": "2012-09-09", "value": 40 }, { "date": "2012-09-10", "value": 39 }, { "date": "2012-09-11", "value": 34 }, { "date": "2012-09-12", "value": 29 }, { "date": "2012-09-13", "value": 34 }, { "date": "2012-09-14", "value": 37 }, { "date": "2012-09-15", "value": 42 }, { "date": "2012-09-16", "value": 49 }, { "date": "2012-09-17", "value": 46 }, { "date": "2012-09-18", "value": 47 }, { "date": "2012-09-19", "value": 55 }, { "date": "2012-09-20", "value": 59 }, { "date": "2012-09-21", "value": 58 }, { "date": "2012-09-22", "value": 57 }, { "date": "2012-09-23", "value": 61 }, { "date": "2012-09-24", "value": 59 }, { "date": "2012-09-25", "value": 67 }, { "date": "2012-09-26", "value": 65 }, { "date": "2012-09-27", "value": 61 }, { "date": "2012-09-28", "value": 66 }, { "date": "2012-09-29", "value": 69 }, { "date": "2012-09-30", "value": 71 }, { "date": "2012-10-01", "value": 67 }, { "date": "2012-10-02", "value": 63 }, { "date": "2012-10-03", "value": 46 }, { "date": "2012-10-04", "value": 32 }, { "date": "2012-10-05", "value": 21 }, { "date": "2012-10-06", "value": 18 }, { "date": "2012-10-07", "value": 21 }, { "date": "2012-10-08", "value": 28 }, { "date": "2012-10-09", "value": 27 }, { "date": "2012-10-10", "value": 36 }, { "date": "2012-10-11", "value": 33 }, { "date": "2012-10-12", "value": 31 }, { "date": "2012-10-13", "value": 30 }, { "date": "2012-10-14", "value": 34 }, { "date": "2012-10-15", "value": 38 }, { "date": "2012-10-16", "value": 37 }, { "date": "2012-10-17", "value": 44 }, { "date": "2012-10-18", "value": 49 }, { "date": "2012-10-19", "value": 53 }, { "date": "2012-10-20", "value": 57 }, { "date": "2012-10-21", "value": 60 }, { "date": "2012-10-22", "value": 61 }, { "date": "2012-10-23", "value": 69 }, { "date": "2012-10-24", "value": 67 }, { "date": "2012-10-25", "value": 72 }, { "date": "2012-10-26", "value": 77 }, { "date": "2012-10-27", "value": 75 }, { "date": "2012-10-28", "value": 70 }, { "date": "2012-10-29", "value": 72 }, { "date": "2012-10-30", "value": 70 }, { "date": "2012-10-31", "value": 72 }, { "date": "2012-11-01", "value": 73 }, { "date": "2012-11-02", "value": 67 }, { "date": "2012-11-03", "value": 68 }, { "date": "2012-11-04", "value": 65 }, { "date": "2012-11-05", "value": 71 }, { "date": "2012-11-06", "value": 75 }, { "date": "2012-11-07", "value": 74 }, { "date": "2012-11-08", "value": 71 }, { "date": "2012-11-09", "value": 76 }, { "date": "2012-11-10", "value": 77 }, { "date": "2012-11-11", "value": 81 }, { "date": "2012-11-12", "value": 83 }, { "date": "2012-11-13", "value": 80 }, { "date": "2012-11-14", "value": 81 }, { "date": "2012-11-15", "value": 87 }, { "date": "2012-11-16", "value": 82 }, { "date": "2012-11-17", "value": 86 }, { "date": "2012-11-18", "value": 80 }, { "date": "2012-11-19", "value": 87 }, { "date": "2012-11-20", "value": 83 }, { "date": "2012-11-21", "value": 85 }, { "date": "2012-11-22", "value": 84 }, { "date": "2012-11-23", "value": 82 }, { "date": "2012-11-24", "value": 73 }, { "date": "2012-11-25", "value": 71 }, { "date": "2012-11-26", "value": 75 }, { "date": "2012-11-27", "value": 79 }, { "date": "2012-11-28", "value": 70 }, { "date": "2012-11-29", "value": 73 }, { "date": "2012-11-30", "value": 61 }, { "date": "2012-12-01", "value": 62 }, { "date": "2012-12-02", "value": 66 }, { "date": "2012-12-03", "value": 65 }, { "date": "2012-12-04", "value": 73 }, { "date": "2012-12-05", "value": 79 }, { "date": "2012-12-06", "value": 78 }, { "date": "2012-12-07", "value": 78 }, { "date": "2012-12-08", "value": 78 }, { "date": "2012-12-09", "value": 74 }, { "date": "2012-12-10", "value": 73 }, { "date": "2012-12-11", "value": 75 }, { "date": "2012-12-12", "value": 70 }, { "date": "2012-12-13", "value": 77 }, { "date": "2012-12-14", "value": 67 }, { "date": "2012-12-15", "value": 62 }, { "date": "2012-12-16", "value": 64 }, { "date": "2012-12-17", "value": 61 }, { "date": "2012-12-18", "value": 59 }, { "date": "2012-12-19", "value": 53 }, { "date": "2012-12-20", "value": 54 }, { "date": "2012-12-21", "value": 56 }, { "date": "2012-12-22", "value": 59 }, { "date": "2012-12-23", "value": 58 }, { "date": "2012-12-24", "value": 55 }, { "date": "2012-12-25", "value": 52 }, { "date": "2012-12-26", "value": 54 }, { "date": "2012-12-27", "value": 50 }, { "date": "2012-12-28", "value": 50 }, { "date": "2012-12-29", "value": 51 }, { "date": "2012-12-30", "value": 52 }, { "date": "2012-12-31", "value": 58 }, { "date": "2013-01-01", "value": 60 }, { "date": "2013-01-02", "value": 67 }, { "date": "2013-01-03", "value": 64 }, { "date": "2013-01-04", "value": 66 }, { "date": "2013-01-05", "value": 60 }, { "date": "2013-01-06", "value": 63 }, { "date": "2013-01-07", "value": 61 }, { "date": "2013-01-08", "value": 60 }, { "date": "2013-01-09", "value": 65 }, { "date": "2013-01-10", "value": 75 }, { "date": "2013-01-11", "value": 77 }, { "date": "2013-01-12", "value": 78 }, { "date": "2013-01-13", "value": 70 }, { "date": "2013-01-14", "value": 70 }, { "date": "2013-01-15", "value": 73 }, { "date": "2013-01-16", "value": 71 }, { "date": "2013-01-17", "value": 74 }, { "date": "2013-01-18", "value": 78 }, { "date": "2013-01-19", "value": 85 }, { "date": "2013-01-20", "value": 82 }, { "date": "2013-01-21", "value": 83 }, { "date": "2013-01-22", "value": 88 }, { "date": "2013-01-23", "value": 85 }, { "date": "2013-01-24", "value": 85 }, { "date": "2013-01-25", "value": 80 }, { "date": "2013-01-26", "value": 87 }, { "date": "2013-01-27", "value": 84 }, { "date": "2013-01-28", "value": 83 }, { "date": "2013-01-29", "value": 84 }, { "date": "2013-01-30", "value": 81 }]; // Set input format for the dates chart.dateFormatter.inputDateFormat = "yyyy-MM-dd"; // Create axes var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); // Create series var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.valueY = "value"; series.dataFields.dateX = "date"; series.tooltipText = "{value}" series.strokeWidth = 2; series.minBulletDistance = 15; // Drop-shaped tooltips series.tooltip.background.cornerRadius = 20; series.tooltip.background.strokeOpacity = 0; series.tooltip.pointerOrientation = "vertical"; series.tooltip.label.minWidth = 40; series.tooltip.label.minHeight = 40; series.tooltip.label.textAlign = "middle"; series.tooltip.label.textValign = "middle"; // Make bullets grow on hover var bullet = series.bullets.push(new am4charts.CircleBullet()); bullet.circle.strokeWidth = 2; bullet.circle.radius = 4; bullet.circle.fill = am4core.color("#fff"); var bullethover = bullet.states.create("hover"); bullethover.properties.scale = 1.3; // Make a panning cursor chart.cursor = new am4charts.XYCursor(); chart.cursor.behavior = "panXY"; chart.cursor.xAxis = dateAxis; chart.cursor.snapToSeries = series; // Create vertical scrollbar and place it before the value axis chart.scrollbarY = new am4core.Scrollbar(); chart.scrollbarY.parent = chart.leftAxesContainer; chart.scrollbarY.toBack(); // Create a horizontal scrollbar with previe and place it underneath the date axis chart.scrollbarX = new am4charts.XYChartScrollbar(); chart.scrollbarX.series.push(series); chart.scrollbarX.parent = chart.bottomAxesContainer; dateAxis.start = 0.79; dateAxis.keepSelection = true; const body = document.querySelector('body') if (body.classList.contains('dark')) { amChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { amChartUpdate(chart, e.detail) }) }); // end am4core.ready() } if(jQuery('#am-linescrollzomm-chart').length){ am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("am-linescrollzomm-chart", am4charts.XYChart); chart.colors.list = [am4core.color("#57aeff")]; // Add data chart.data = generateChartData(); // Create axes var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); dateAxis.renderer.minGridDistance = 50; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); // Create series var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.valueY = "visits"; series.dataFields.dateX = "date"; series.strokeWidth = 2; series.minBulletDistance = 10; series.tooltipText = "{valueY}"; series.tooltip.pointerOrientation = "vertical"; series.tooltip.background.cornerRadius = 20; series.tooltip.background.fillOpacity = 0.5; series.tooltip.label.padding(12,12,12,12) // Add scrollbar chart.scrollbarX = new am4charts.XYChartScrollbar(); chart.scrollbarX.series.push(series); // Add cursor chart.cursor = new am4charts.XYCursor(); chart.cursor.xAxis = dateAxis; chart.cursor.snapToSeries = series; function generateChartData() { var chartData = []; var firstDate = new Date(); firstDate.setDate(firstDate.getDate() - 1000); var visits = 1200; for (var i = 0; i < 500; i++) { var newDate = new Date(firstDate); newDate.setDate(newDate.getDate() + i); visits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10); chartData.push({ date: newDate, visits: visits }); } return chartData; } const body = document.querySelector('body') if (body.classList.contains('dark')) { amChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { amChartUpdate(chart, e.detail) }) }); } if(jQuery('#am-zoomable-chart').length){ am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("am-zoomable-chart", am4charts.XYChart); chart.colors.list = [am4core.color("#57aeff")]; // Add data chart.data = [ { "date": "2012-07-27", "value": 13 }, { "date": "2012-07-28", "value": 11 }, { "date": "2012-07-29", "value": 15 }, { "date": "2012-07-30", "value": 16 }, { "date": "2012-07-31", "value": 18 }, { "date": "2012-08-01", "value": 13 }, { "date": "2012-08-02", "value": 22 }, { "date": "2012-08-03", "value": 23 }, { "date": "2012-08-04", "value": 20 }, { "date": "2012-08-05", "value": 17 }, { "date": "2012-08-06", "value": 16 }, { "date": "2012-08-07", "value": 18 }, { "date": "2012-08-08", "value": 21 }, { "date": "2012-08-09", "value": 26 }, { "date": "2012-08-10", "value": 24 }, { "date": "2012-08-11", "value": 29 }, { "date": "2012-08-12", "value": 32 }, { "date": "2012-08-13", "value": 18 }, { "date": "2012-08-14", "value": 24 }, { "date": "2012-08-15", "value": 22 }, { "date": "2012-08-16", "value": 18 }, { "date": "2012-08-17", "value": 19 }, { "date": "2012-08-18", "value": 14 }, { "date": "2012-08-19", "value": 15 }, { "date": "2012-08-20", "value": 12 }, { "date": "2012-08-21", "value": 8 }, { "date": "2012-08-22", "value": 9 }, { "date": "2012-08-23", "value": 8 }, { "date": "2012-08-24", "value": 7 }, { "date": "2012-08-25", "value": 5 }, { "date": "2012-08-26", "value": 11 }, { "date": "2012-08-27", "value": 13 }, { "date": "2012-08-28", "value": 18 }, { "date": "2012-08-29", "value": 20 }, { "date": "2012-08-30", "value": 29 }, { "date": "2012-08-31", "value": 33 }, { "date": "2012-09-01", "value": 42 }, { "date": "2012-09-02", "value": 35 }, { "date": "2012-09-03", "value": 31 }, { "date": "2012-09-04", "value": 47 }, { "date": "2012-09-05", "value": 52 }, { "date": "2012-09-06", "value": 46 }, { "date": "2012-09-07", "value": 41 }, { "date": "2012-09-08", "value": 43 }, { "date": "2012-09-09", "value": 40 }, { "date": "2012-09-10", "value": 39 }, { "date": "2012-09-11", "value": 34 }, { "date": "2012-09-12", "value": 29 }, { "date": "2012-09-13", "value": 34 }, { "date": "2012-09-14", "value": 37 }, { "date": "2012-09-15", "value": 42 }, { "date": "2012-09-16", "value": 49 }, { "date": "2012-09-17", "value": 46 }, { "date": "2012-09-18", "value": 47 }, { "date": "2012-09-19", "value": 55 }, { "date": "2012-09-20", "value": 59 }, { "date": "2012-09-21", "value": 58 }, { "date": "2012-09-22", "value": 57 }, { "date": "2012-09-23", "value": 61 }, { "date": "2012-09-24", "value": 59 }, { "date": "2012-09-25", "value": 67 }, { "date": "2012-09-26", "value": 65 }, { "date": "2012-09-27", "value": 61 }, { "date": "2012-09-28", "value": 66 }, { "date": "2012-09-29", "value": 69 }, { "date": "2012-09-30", "value": 71 }, { "date": "2012-10-01", "value": 67 }, { "date": "2012-10-02", "value": 63 }, { "date": "2012-10-03", "value": 46 }, { "date": "2012-10-04", "value": 32 }, { "date": "2012-10-05", "value": 21 }, { "date": "2012-10-06", "value": 18 }, { "date": "2012-10-07", "value": 21 }, { "date": "2012-10-08", "value": 28 }, { "date": "2012-10-09", "value": 27 }, { "date": "2012-10-10", "value": 36 }, { "date": "2012-10-11", "value": 33 }, { "date": "2012-10-12", "value": 31 }, { "date": "2012-10-13", "value": 30 }, { "date": "2012-10-14", "value": 34 }, { "date": "2012-10-15", "value": 38 }, { "date": "2012-10-16", "value": 37 }, { "date": "2012-10-17", "value": 44 }, { "date": "2012-10-18", "value": 49 }, { "date": "2012-10-19", "value": 53 }, { "date": "2012-10-20", "value": 57 }, { "date": "2012-10-21", "value": 60 }, { "date": "2012-10-22", "value": 61 }, { "date": "2012-10-23", "value": 69 }, { "date": "2012-10-24", "value": 67 }, { "date": "2012-10-25", "value": 72 }, { "date": "2012-10-26", "value": 77 }, { "date": "2012-10-27", "value": 75 }, { "date": "2012-10-28", "value": 70 }, { "date": "2012-10-29", "value": 72 }, { "date": "2012-10-30", "value": 70 }, { "date": "2012-10-31", "value": 72 }, { "date": "2012-11-01", "value": 73 }, { "date": "2012-11-02", "value": 67 }, { "date": "2012-11-03", "value": 68 }, { "date": "2012-11-04", "value": 65 }, { "date": "2012-11-05", "value": 71 }, { "date": "2012-11-06", "value": 75 }, { "date": "2012-11-07", "value": 74 }, { "date": "2012-11-08", "value": 71 }, { "date": "2012-11-09", "value": 76 }, { "date": "2012-11-10", "value": 77 }, { "date": "2012-11-11", "value": 81 }, { "date": "2012-11-12", "value": 83 }, { "date": "2012-11-13", "value": 80 }, { "date": "2012-11-18", "value": 80 }, { "date": "2012-11-19", "value": 87 }, { "date": "2012-11-20", "value": 83 }, { "date": "2012-11-21", "value": 85 }, { "date": "2012-11-22", "value": 84 }, { "date": "2012-11-23", "value": 82 }, { "date": "2012-11-24", "value": 73 }, { "date": "2012-11-25", "value": 71 }, { "date": "2012-11-26", "value": 75 }, { "date": "2012-11-27", "value": 79 }, { "date": "2012-11-28", "value": 70 }, { "date": "2012-11-29", "value": 73 }, { "date": "2012-11-30", "value": 61 }, { "date": "2012-12-01", "value": 62 }, { "date": "2012-12-02", "value": 66 }, { "date": "2012-12-03", "value": 65 }, { "date": "2012-12-04", "value": 73 }, { "date": "2012-12-05", "value": 79 }, { "date": "2012-12-06", "value": 78 }, { "date": "2012-12-07", "value": 78 }, { "date": "2012-12-08", "value": 78 }, { "date": "2012-12-09", "value": 74 }, { "date": "2012-12-10", "value": 73 }, { "date": "2012-12-11", "value": 75 }, { "date": "2012-12-12", "value": 70 }, { "date": "2012-12-13", "value": 77 }, { "date": "2012-12-14", "value": 67 }, { "date": "2012-12-15", "value": 62 }, { "date": "2012-12-16", "value": 64 }, { "date": "2012-12-17", "value": 61 }, { "date": "2012-12-18", "value": 59 }, { "date": "2012-12-19", "value": 53 }, { "date": "2012-12-20", "value": 54 }, { "date": "2012-12-21", "value": 56 }, { "date": "2012-12-22", "value": 59 }, { "date": "2012-12-23", "value": 58 }, { "date": "2012-12-24", "value": 55 }, { "date": "2012-12-25", "value": 52 }, { "date": "2012-12-26", "value": 54 }, { "date": "2012-12-27", "value": 50 }, { "date": "2012-12-28", "value": 50 }, { "date": "2012-12-29", "value": 51 }, { "date": "2012-12-30", "value": 52 }, { "date": "2012-12-31", "value": 58 }, { "date": "2013-01-01", "value": 60 }, { "date": "2013-01-02", "value": 67 }, { "date": "2013-01-03", "value": 64 }, { "date": "2013-01-04", "value": 66 }, { "date": "2013-01-05", "value": 60 }, { "date": "2013-01-06", "value": 63 }, { "date": "2013-01-07", "value": 61 }, { "date": "2013-01-08", "value": 60 }, { "date": "2013-01-09", "value": 65 }, { "date": "2013-01-10", "value": 75 }, { "date": "2013-01-11", "value": 77 }, { "date": "2013-01-12", "value": 78 }, { "date": "2013-01-13", "value": 70 }, { "date": "2013-01-14", "value": 70 }, { "date": "2013-01-15", "value": 73 }, { "date": "2013-01-16", "value": 71 }, { "date": "2013-01-17", "value": 74 }, { "date": "2013-01-18", "value": 78 }, { "date": "2013-01-19", "value": 85 }, { "date": "2013-01-20", "value": 82 }, { "date": "2013-01-21", "value": 83 }, { "date": "2013-01-22", "value": 88 }, { "date": "2013-01-23", "value": 85 }, { "date": "2013-01-24", "value": 85 }, { "date": "2013-01-25", "value": 80 }, { "date": "2013-01-26", "value": 87 }, { "date": "2013-01-27", "value": 84 }, { "date": "2013-01-28", "value": 83 }, { "date": "2013-01-29", "value": 84 }, { "date": "2013-01-30", "value": 81 } ]; // Create axes var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); dateAxis.renderer.grid.template.location = 0; dateAxis.renderer.minGridDistance = 50; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); // Create series var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.valueY = "value"; series.dataFields.dateX = "date"; series.strokeWidth = 3; series.fillOpacity = 0.5; // Add vertical scrollbar chart.scrollbarY = new am4core.Scrollbar(); chart.scrollbarY.marginLeft = 0; // Add cursor chart.cursor = new am4charts.XYCursor(); chart.cursor.behavior = "zoomY"; chart.cursor.lineX.disabled = true; const body = document.querySelector('body') if (body.classList.contains('dark')) { amChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { amChartUpdate(chart, e.detail) }) }); // end am4core.ready() } if(jQuery('#am-radar-chart').length){ am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end /* Create chart instance */ var chart = am4core.create("am-radar-chart", am4charts.RadarChart); chart.colors.list = [am4core.color("#4788ff")]; /* Add data */ chart.data = [{ "country": "Lithuania", "litres": 501 }, { "country": "Czechia", "litres": 301 }, { "country": "Ireland", "litres": 266 }, { "country": "Germany", "litres": 165 }, { "country": "Australia", "litres": 139 }, { "country": "Austria", "litres": 336 }, { "country": "UK", "litres": 290 }, { "country": "Belgium", "litres": 325 }, { "country": "The Netherlands", "litres": 40 }]; /* Create axes */ var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "country"; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis.renderer.axisFills.template.fill = chart.colors.getIndex(2); valueAxis.renderer.axisFills.template.fillOpacity = 0.05; /* Create and configure series */ var series = chart.series.push(new am4charts.RadarSeries()); series.dataFields.valueY = "litres"; series.dataFields.categoryX = "country"; series.name = "Sales"; series.strokeWidth = 3; const body = document.querySelector('body') if (body.classList.contains('dark')) { amChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { amChartUpdate(chart, e.detail) }) }); // end am4core.ready() } if(jQuery('#am-polar-chart').length){ am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end /* Create chart instance */ var chart = am4core.create("am-polar-chart", am4charts.RadarChart); /* Add data */ chart.data = [ { "direction": "N", "value": 8 }, { "direction": "NE", "value": 9 }, { "direction": "E", "value": 4.5 }, { "direction": "SE", "value": 3.5 }, { "direction": "S", "value": 9.2 }, { "direction": "SW", "value": 8.4 }, { "direction": "W", "value": 11.1 }, { "direction": "NW", "value": 10 } ]; /* Create axes */ var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "direction"; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); //valueAxis.renderer.gridType = "polygons"; var range = categoryAxis.axisRanges.create(); range.category = "NW"; range.endCategory = "NW"; range.axisFill.fill = am4core.color("#4788ff"); range.axisFill.fillOpacity = 0.3; var range2 = categoryAxis.axisRanges.create(); range2.category = "N"; range2.endCategory = "N"; range2.axisFill.fill = am4core.color("#ff4b4b"); range2.axisFill.fillOpacity = 0.3; var range3 = categoryAxis.axisRanges.create(); range3.category = "SE"; range3.endCategory = "SW"; range3.axisFill.fill = am4core.color("#37e6b0"); range3.axisFill.fillOpacity = 0.3; range3.locations.endCategory = 0; /* Create and configure series */ var series = chart.series.push(new am4charts.RadarSeries()); series.dataFields.valueY = "value"; series.dataFields.categoryX = "direction"; series.name = "Wind direction"; series.strokeWidth = 3; series.fillOpacity = 0.2; const body = document.querySelector('body') if (body.classList.contains('dark')) { amChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { amChartUpdate(chart, e.detail) }) }); // end am4core.ready() } if(jQuery('#am-polarscatter-chart').length){ am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end /* Create chart instance */ var chart = am4core.create("am-polarscatter-chart", am4charts.RadarChart); chart.colors.list = [am4core.color("#4788ff"),am4core.color("#fe721c"),am4core.color("#37e6b0")]; /* Add data */ chart.data = [{ "country": "Lithuania", "litres": 501, "units": 250 }, { "country": "Czech Republic", "litres": 301, "units": 222 }, { "country": "Ireland", "litres": 266, "units": 179 }, { "country": "Germany", "litres": 165, "units": 298 }, { "country": "Australia", "litres": 139, "units": 299 }]; /* Create axes */ var xAxis = chart.xAxes.push(new am4charts.ValueAxis()); xAxis.renderer.maxLabelPosition = 0.99; var yAxis = chart.yAxes.push(new am4charts.ValueAxis()); yAxis.renderer.labels.template.verticalCenter = "bottom"; yAxis.renderer.labels.template.horizontalCenter = "right"; yAxis.renderer.maxLabelPosition = 0.99; yAxis.renderer.labels.template.paddingBottom = 1; yAxis.renderer.labels.template.paddingRight = 3; /* Create and configure series */ var series1 = chart.series.push(new am4charts.RadarSeries()); series1.bullets.push(new am4charts.CircleBullet()); series1.strokeOpacity = 0; series1.dataFields.valueX = "x"; series1.dataFields.valueY = "y"; series1.name = "Series #1"; series1.sequencedInterpolation = true; series1.sequencedInterpolationDelay = 10; series1.data = [ { "x": 83, "y": 5.1 }, { "x": 44, "y": 5.8 }, { "x": 76, "y": 9 }, { "x": 2, "y": 1.4 }, { "x": 100, "y": 8.3 }, { "x": 96, "y": 1.7 }, { "x": 68, "y": 3.9 }, { "x": 0, "y": 3 }, { "x": 100, "y": 4.1 }, { "x": 16, "y": 5.5 }, { "x": 71, "y": 6.8 }, { "x": 100, "y": 7.9 }, { "x": 35, "y": 8 }, { "x": 44, "y": 6 }, { "x": 64, "y": 0.7 }, { "x": 53, "y": 3.3 }, { "x": 92, "y": 4.1 }, { "x": 43, "y": 7.3 }, { "x": 15, "y": 7.5 }, { "x": 43, "y": 4.3 }, { "x": 90, "y": 9.9 } ]; var series2 = chart.series.push(new am4charts.RadarSeries()); series2.bullets.push(new am4charts.CircleBullet()); series2.strokeOpacity = 0; series2.dataFields.valueX = "x"; series2.dataFields.valueY = "y"; series2.name = "Series #2"; series2.sequencedInterpolation = true; series2.sequencedInterpolationDelay = 10; series2.data = [ { "x": 178, "y": 1.3 }, { "x": 129, "y": 3.4 }, { "x": 99, "y": 2.4 }, { "x": 80, "y": 9.9 }, { "x": 118, "y": 9.4 }, { "x": 103, "y": 8.7 }, { "x": 91, "y": 4.2 }, { "x": 151, "y": 1.2 }, { "x": 168, "y": 5.2 }, { "x": 168, "y": 1.6 }, { "x": 152, "y": 1.2 }, { "x": 138, "y": 7.7 }, { "x": 107, "y": 3.9 }, { "x": 124, "y": 0.7 }, { "x": 130, "y": 2.6 }, { "x": 86, "y": 9.2 }, { "x": 169, "y": 7.5 }, { "x": 122, "y": 9.9 }, { "x": 100, "y": 3.8 }, { "x": 172, "y": 4.1 }, { "x": 140, "y": 7.3 }, { "x": 161, "y": 2.3 }, { "x": 141, "y": 0.9 } ]; var series3 = chart.series.push(new am4charts.RadarSeries()); series3.bullets.push(new am4charts.CircleBullet()); series3.strokeOpacity = 0; series3.dataFields.valueX = "x"; series3.dataFields.valueY = "y"; series3.name = "Series #3"; series3.sequencedInterpolation = true; series3.sequencedInterpolationDelay = 10; series3.data = [ { "x": 419, "y": 4.9 }, { "x": 417, "y": 5.5 }, { "x": 434, "y": 0.1 }, { "x": 344, "y": 2.5 }, { "x": 279, "y": 7.5 }, { "x": 307, "y": 8.4 }, { "x": 279, "y": 9 }, { "x": 220, "y": 8.4 }, { "x": 201, "y": 9.7 }, { "x": 288, "y": 1.2 }, { "x": 333, "y": 7.4 }, { "x": 308, "y": 1.9 }, { "x": 330, "y": 8 }, { "x": 408, "y": 1.7 }, { "x": 274, "y": 0.8 }, { "x": 296, "y": 3.1 }, { "x": 279, "y": 4.3 }, { "x": 379, "y": 5.6 }, { "x": 175, "y": 6.8 } ]; /* Add legend */ chart.legend = new am4charts.Legend(); /* Add cursor */ chart.cursor = new am4charts.RadarCursor(); const body = document.querySelector('body') if (body.classList.contains('dark')) { amChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { amChartUpdate(chart, e.detail) }) }); // end am4core.ready() } if(jQuery('#am-3dpie-chart').length){ am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end var chart = am4core.create("am-3dpie-chart", am4charts.PieChart3D); chart.hiddenState.properties.opacity = 0; // this creates initial fade-in chart.legend = new am4charts.Legend(); chart.data = [ { country: "Lithuania", litres: 501.9, fill: "red" }, { country: "Germany", litres: 165.8 }, { country: "Australia", litres: 139.9 }, { country: "Austria", litres: 128.3 }, { country: "UK", litres: 99 }, { country: "Belgium", litres: 60 } ]; var series = chart.series.push(new am4charts.PieSeries3D()); series.colors.list = [am4core.color("#4788ff"),am4core.color("#37e6b0"),am4core.color("#ff4b4b"), am4core.color("#fe721c"),am4core.color("#876cfe"),am4core.color("#01041b")]; series.dataFields.value = "litres"; series.dataFields.category = "country"; const body = document.querySelector('body') if (body.classList.contains('dark')) { amChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { amChartUpdate(chart, e.detail) }) }); // end am4core.ready() } if(jQuery('#am-layeredcolumn-chart').length){ am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("am-layeredcolumn-chart", am4charts.XYChart); chart.colors.list = [am4core.color("#37e6b0"),am4core.color("#4788ff")]; // Add percent sign to all numbers chart.numberFormatter.numberFormat = "#.#'%'"; // Add data chart.data = [{ "country": "USA", "year2004": 3.5, "year2005": 4.2 }, { "country": "UK", "year2004": 1.7, "year2005": 3.1 }, { "country": "Canada", "year2004": 2.8, "year2005": 2.9 }, { "country": "Japan", "year2004": 2.6, "year2005": 2.3 }, { "country": "France", "year2004": 1.4, "year2005": 2.1 }, { "country": "Brazil", "year2004": 2.6, "year2005": 4.9 }]; // Create axes var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "country"; categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.minGridDistance = 30; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis.title.text = "GDP growth rate"; valueAxis.title.fontWeight = 800; // Create series var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueY = "year2004"; series.dataFields.categoryX = "country"; series.clustered = false; series.tooltipText = "GDP grow in {categoryX} (2004): [bold]{valueY}[/]"; var series2 = chart.series.push(new am4charts.ColumnSeries()); series2.dataFields.valueY = "year2005"; series2.dataFields.categoryX = "country"; series2.clustered = false; series2.columns.template.width = am4core.percent(50); series2.tooltipText = "GDP grow in {categoryX} (2005): [bold]{valueY}[/]"; chart.cursor = new am4charts.XYCursor(); chart.cursor.lineX.disabled = true; chart.cursor.lineY.disabled = true; const body = document.querySelector('body') if (body.classList.contains('dark')) { amChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { amChartUpdate(chart, e.detail) }) }); // end am4core.ready() } /*--------------------------------------------------------------------- Morris Charts -----------------------------------------------------------------------*/ if(jQuery('#morris-line-chart').length){ new Morris.Line({ // ID of the element in which to draw the chart. element: 'morris-line-chart', // Chart data records -- each entry in this array corresponds to a point on // the chart. data: [ { year: '2008', value: 20 }, { year: '2009', value: 10 }, { year: '2010', value: 5 }, { year: '2011', value: 5 }, { year: '2012', value: 20 } ], // The name of the data record attribute that contains x-values. xkey: 'year', // A list of names of data record attributes that contain y-values. ykeys: ['value'], // Labels for the ykeys -- will be displayed when you hover over the // chart. labels: ['Value'], lineColors: ['#4788ff'] }); } if(jQuery('#morris-bar-chart').length){ Morris.Bar({ element: 'morris-bar-chart', data: [ {x: '2011 Q1', y: 3, z: 2, a: 3}, {x: '2011 Q2', y: 2, z: null, a: 1}, {x: '2011 Q3', y: 0, z: 2, a: 4}, {x: '2011 Q4', y: 2, z: 4, a: 3} ], xkey: 'x', ykeys: ['y', 'z', 'a'], labels: ['Y', 'Z', 'A'], barColors: ['#4788ff', '#fe721c', '#37e6b0'], hoverCallback: function (index, options, content, row) { return ''; } }).on('click', function(i, row){ console.log(i, row); }); } if(jQuery('#morris-area-chart').length){ var area = new Morris.Area({ element: 'morris-area-chart', resize: true, data: [ {y: '2011 Q1', item1: 2666, item2: 2666}, {y: '2011 Q2', item1: 2778, item2: 2294}, {y: '2011 Q3', item1: 4912, item2: 1969}, {y: '2011 Q4', item1: 3767, item2: 3597}, {y: '2012 Q1', item1: 6810, item2: 1914}, {y: '2012 Q2', item1: 5670, item2: 4293}, {y: '2012 Q3', item1: 4820, item2: 3795}, {y: '2012 Q4', item1: 15073, item2: 5967}, {y: '2013 Q1', item1: 10687, item2: 4460}, {y: '2013 Q2', item1: 8432, item2: 5713} ], xkey: 'y', ykeys: ['item1', 'item2'], labels: ['Item 1', 'Item 2'], lineColors: ['#75e275', '#75bcff'], hoverCallback: function (index, options, content, row) { return ''; } }); } if(jQuery('#morris-donut-chart').length){ var donut = new Morris.Donut({ element: 'morris-donut-chart', resize: true, colors: ["#4788ff", "#ff4b4b", "#37e6b0"], data: [ {label: "Download Sales", value: 12}, {label: "In-Store Sales", value: 30}, {label: "Mail-Order Sales", value: 20} ], hideHover: 'auto' }); } /*--------------------------------------------------------------------- High Charts -----------------------------------------------------------------------*/ if (jQuery("#high-basicline-chart").length && Highcharts.chart("high-basicline-chart", { chart: { type: "spline", inverted: !0 }, title: { text: "Atmosphere Temperature by Altitude" }, subtitle: { text: "According to the Standard Atmosphere Model" }, xAxis: { reversed: !1, title: { enabled: !0, text: "Altitude" }, labels: { format: "{value} km" }, maxPadding: .05, showLastLabel: !0 }, yAxis: { title: { text: "Temperature" }, labels: { format: "{value}°" }, lineWidth: 2 }, legend: { enabled: !1 }, tooltip: { headerFormat: "{series.name}
", pointFormat: "{point.x} km: {point.y}°C" }, plotOptions: { spline: { marker: { enable: !1 } } }, series: [{ name: "Temperature", color: "#4788ff", data: [ [0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5] ] }] }), jQuery("#high-area-chart").length && Highcharts.chart("high-area-chart", { chart: { type: "areaspline" }, title: { text: "Average fruit consumption during one week" }, legend: { layout: "vertical", align: "left", verticalAlign: "top", x: 150, y: 100, floating: !0, borderWidth: 1, backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || "#FFFFFF" }, xAxis: { categories: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], plotBands: [{ from: 4.5, to: 6.5, color: "rgba(68, 170, 213, .2)" }] }, yAxis: { title: { text: "Fruit units" } }, tooltip: { shared: !0, valueSuffix: " units" }, credits: { enabled: !1 }, plotOptions: { areaspline: { fillOpacity: .5 } }, series: [{ name: "John", color: "#4788ff", data: [3, 4, 3, 5, 4, 10, 12] }, { name: "Jane", color: "#37e6b0", data: [1, 3, 4, 3, 3, 5, 4] }] }), jQuery("#high-columnndbar-chart").length && Highcharts.chart("high-columnndbar-chart", { chart: { type: "bar" }, title: { text: "Stacked bar chart" }, xAxis: { categories: ["Apples", "Oranges", "Pears", "Grapes", "Bananas"] }, yAxis: { min: 0, title: { text: "Total fruit consumption" } }, legend: { reversed: !0 }, plotOptions: { series: { stacking: "normal" } }, series: [{ name: "John", color: "#4788ff", data: [5, 3, 4, 7, 2] }, { name: "Jane", color: "#ff4b4b", data: [2, 2, 3, 2, 1] }, { name: "Joe", color: "#37e6b0", data: [3, 4, 4, 2, 5] }] }), jQuery("#high-pie-chart").length && Highcharts.chart("high-pie-chart", { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: !1, type: "pie" }, colorAxis: {}, title: { text: "Browser market shares in January, 2018" }, tooltip: { pointFormat: "{series.name}: {point.percentage:.1f}%" }, plotOptions: { pie: { allowPointSelect: !0, cursor: "pointer", dataLabels: { enabled: !0, format: "{point.name}: {point.percentage:.1f} %" } } }, series: [{ name: "Brands", colorByPoint: !0, data: [{ name: "Chrome", y: 61.41, sliced: !0, selected: !0, color: "#4788ff" }, { name: "Internet Explorer", y: 11.84, color: "#ff4b4b" }, { name: "Firefox", y: 10.85, color: "#65f9b3" }, { name: "Edge", y: 4.67, color: "#6ce6f4" }, { name: "Other", y: 2.61 }] }] }), jQuery("#high-scatterplot-chart").length && Highcharts.chart("high-scatterplot-chart", { chart: { type: "scatter", zoomType: "xy" }, accessibility: { 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." }, title: { text: "Height Versus Weight of 507 Individuals by Gender" }, subtitle: { text: "Source: Heinz 2003" }, xAxis: { title: { enabled: !0, text: "Height (cm)" }, startOnTick: !0, endOnTick: !0, showLastLabel: !0 }, yAxis: { title: { text: "Weight (kg)" } }, legend: { layout: "vertical", align: "left", verticalAlign: "top", x: 100, y: 70, floating: !0, backgroundColor: Highcharts.defaultOptions.chart.backgroundColor, borderWidth: 1 }, plotOptions: { scatter: { marker: { radius: 5, states: { hover: { enabled: !0, lineColor: "rgb(100,100,100)" } } }, states: { hover: { marker: { enabled: !1 } } }, tooltip: { headerFormat: "{series.name}
", pointFormat: "{point.x} cm, {point.y} kg" } } }, series: [{ name: "Female", color: "rgba(223, 83, 83, .5)", data: [ [161.2, 51.6], [167.5, 59], [159.5, 49.2], [157, 63], [155.8, 53.6], [170, 59], [159.1, 47.6], [166, 69.8], [176.2, 66.8], [160.2, 75.2], [172.7, 62], [155, 49.2], [156.5, 67.2], [164, 53.8], [160.9, 54.4] ], color: "#4788ff" }, { name: "Male", color: "rgba(119, 152, 191, .5)", data: [ [174, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8], [181.5, 74.8], [184, 86.4], [184.5, 78.4], [175, 62], [184, 81.6], [180.1, 93], [175.5, 80.9], [180.6, 72.7], [184.4, 68], [175.5, 70.9], [180.3, 83.2], [180.3, 83.2] ], color: "#ff4b4b" }] }), jQuery("#high-linendcolumn-chart").length && Highcharts.chart("high-linendcolumn-chart", { chart: { zoomType: "xy" }, title: { text: "Average Monthly Temperature and Rainfall in Tokyo" }, subtitle: { text: "Source: WorldClimate.com" }, xAxis: [{ categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], crosshair: !0 }], yAxis: [{ labels: { format: "{value}°C", style: { color: Highcharts.getOptions().colors[1] } }, title: { text: "Temperature", style: { color: Highcharts.getOptions().colors[1] } } }, { title: { text: "Rainfall", style: { color: Highcharts.getOptions().colors[0] } }, labels: { format: "{value} mm", style: { color: Highcharts.getOptions().colors[0] } }, opposite: !0 }], tooltip: { shared: !0 }, legend: { layout: "vertical", align: "left", x: 120, verticalAlign: "top", y: 100, floating: !0, backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || "rgba(255,255,255,0.25)" }, series: [{ name: "Rainfall", type: "column", yAxis: 1, data: [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], color: "#4788ff", tooltip: { valueSuffix: " mm" } }, { name: "Temperature", type: "spline", data: [7, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], color: "#ff4b4b", tooltip: { valueSuffix: "°C" } }] }), jQuery("#high-dynamic-chart").length && Highcharts.chart("high-dynamic-chart", { chart: { type: "spline", animation: Highcharts.svg, marginRight: 10, events: { load: function() { var e = this.series[0]; setInterval(function() { var t = (new Date).getTime(), a = Math.random(); e.addPoint([t, a], !0, !0) }, 1e3) } } }, time: { useUTC: !1 }, title: { text: "Live random data" }, accessibility: { announceNewData: { enabled: !0, minAnnounceInterval: 15e3, announcementFormatter: function(e, t, a) { return !!a && "New point added. Value: " + a.y } } }, xAxis: { type: "datetime", tickPixelInterval: 150 }, yAxis: { title: { text: "Value" }, plotLines: [{ value: 0, width: 1, color: "#808080" }] }, tooltip: { headerFormat: "{series.name}
", pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}
{point.y:.2f}" }, legend: { enabled: !1 }, exporting: { enabled: !1 }, series: [{ name: "Random data", color: "#4788ff", data: function() { var e, t = [], a = (new Date).getTime(); for (e = -19; e <= 0; e += 1) t.push({ x: a + 1e3 * e, y: Math.random() }); return t }() }] }), jQuery("#high-3d-chart").length) { var chart = new Highcharts.Chart({ chart: { renderTo: "high-3d-chart", type: "column", options3d: { enabled: !0, alpha: 15, beta: 15, depth: 50, viewDistance: 25 } }, title: { text: "Chart rotation demo" }, subtitle: { text: "Test options by dragging the sliders below" }, plotOptions: { column: { depth: 25 } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], color: "#4788ff" }] }); function showValues() { $("#alpha-value").html(chart.options.chart.options3d.alpha), $("#beta-value").html(chart.options.chart.options3d.beta), $("#depth-value").html(chart.options.chart.options3d.depth) } $("#sliders input").on("input change", function() { chart.options.chart.options3d[this.id] = parseFloat(this.value), showValues(), chart.redraw(!1) }), showValues() } if (jQuery("#high-gauges-chart").length && Highcharts.chart("high-gauges-chart", { chart: { type: "gauge", plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: !1 }, title: { text: "Speedometer" }, pane: { startAngle: -150, endAngle: 150, background: [{ backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, "#FFF"], [1, "#333"] ] }, borderWidth: 0, outerRadius: "109%" }, { backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, "#333"], [1, "#FFF"] ] }, borderWidth: 1, outerRadius: "107%" }, {}, { backgroundColor: "#DDD", borderWidth: 0, outerRadius: "105%", innerRadius: "103%" }] }, yAxis: { min: 0, max: 200, minorTickInterval: "auto", minorTickWidth: 1, minorTickLength: 10, minorTickPosition: "inside", minorTickColor: "#666", tickPixelInterval: 30, tickWidth: 2, tickPosition: "inside", tickLength: 10, tickColor: "#666", labels: { step: 2, rotation: "auto" }, title: { text: "km/h" }, plotBands: [{ from: 0, to: 120, color: "#55BF3B" }, { from: 120, to: 160, color: "#DDDF0D" }, { from: 160, to: 200, color: "#DF5353" }] }, series: [{ name: "Speed", data: [80], tooltip: { valueSuffix: " km/h" } }] }, function(e) { e.renderer.forExport || setInterval(function() { var t, a = e.series[0].points[0], n = Math.round(20 * (Math.random() - .5)); ((t = a.y + n) < 0 || t > 200) && (t = a.y - n), a.update(t) }, 3e3) }), jQuery("#high-barwithnagative-chart").length) { 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 + "]; Highcharts.chart("high-barwithnagative-chart", { chart: { type: "bar" }, title: { text: "Population pyramid for Germany, 2018" }, subtitle: { text: 'Source: Population Pyramids of the World from 1950 to 2100' }, accessibility: { point: { descriptionFormatter: function(e) { return e.index + 1 + ", Age " + e.category + ", " + Math.abs(e.y) + "%. " + e.series.name + "." } } }, xAxis: [{ categories: categories, reversed: !1, labels: { step: 1 }, accessibility: { description: "Age (male)" } }, { opposite: !0, reversed: !1, categories: categories, linkedTo: 0, labels: { step: 1 }, accessibility: { description: "Age (female)" } }], yAxis: { title: { text: null }, labels: { formatter: function() { return Math.abs(this.value) + "%" } }, accessibility: { description: "Percentage population", rangeDescription: "Range: 0 to 5%" } }, plotOptions: { series: { stacking: "normal" } }, tooltip: { formatter: function() { return "" + this.series.name + ", age " + this.point.category + "
Population: " + Highcharts.numberFormat(Math.abs(this.point.y), 1) + "%" } }, series: [{ name: "Male", 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], color: "#4788ff" }, { name: "Female", data: [2.1, 2, 2.1, 2.3, 2.6, 2.9, 3.2, 3.1, 2.9, 3.4, 0], color: "#ff4b4b" }] }) } /*--------------Widget Chart 1----------------*/ var options = { chart: { height: 80, type: 'area', sparkline: { enabled: true }, group: 'sparklines', }, dataLabels: { enabled: false }, stroke: { width: 3, curve: 'smooth' }, fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.5, opacityTo: 0, } }, series: [{ name: 'series1', data: [60, 15, 50, 30, 70] }, ], colors: ['#50b5ff'], xaxis: { type: 'datetime', 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"], }, tooltip: { x: { format: 'dd/MM/yy HH:mm' }, } }; if(jQuery('#chart-1').length){ var chart = new ApexCharts( document.querySelector("#chart-1"), options ); chart.render(); } /*--------------Widget Chart 2----------------*/ var options = { chart: { height: 80, type: 'area', sparkline: { enabled: true }, group: 'sparklines', }, dataLabels: { enabled: false }, stroke: { width: 3, curve: 'smooth' }, fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.5, opacityTo: 0, } }, series: [{ name: 'series1', data: [70, 40, 60, 30, 60] }, ], colors: ['#fd7e14'], xaxis: { type: 'datetime', 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"], }, tooltip: { x: { format: 'dd/MM/yy HH:mm' }, } }; if(jQuery('#chart-2').length){ var chart = new ApexCharts( document.querySelector("#chart-2"), options ); chart.render(); } /*--------------Widget Chart 3----------------*/ var options = { chart: { height: 80, type: 'area', sparkline: { enabled: true }, group: 'sparklines', }, dataLabels: { enabled: false }, stroke: { width: 3, curve: 'smooth' }, fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.5, opacityTo: 0, } }, series: [{ name: 'series1', data: [60, 40, 60, 40, 70] }, ], colors: ['#49f0d3'], xaxis: { type: 'datetime', 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"], }, tooltip: { x: { format: 'dd/MM/yy HH:mm' }, } }; if(jQuery('#chart-3').length){ var chart = new ApexCharts( document.querySelector("#chart-3"), options ); chart.render(); } /*--------------Widget Chart 4----------------*/ var options = { chart: { height: 80, type: 'area', sparkline: { enabled: true }, group: 'sparklines', }, dataLabels: { enabled: false }, stroke: { width: 3, curve: 'smooth' }, fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.5, opacityTo: 0, } }, series: [{ name: 'series1', data: [75, 30, 60, 35, 60] }, ], colors: ['#ff9b8a'], xaxis: { type: 'datetime', 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"], }, tooltip: { x: { format: 'dd/MM/yy HH:mm' }, } }; if(jQuery('#chart-4').length){ var chart = new ApexCharts( document.querySelector("#chart-4"), options ); chart.render(); } /*--------------Widget Box----------------*/ if(jQuery('#iq-chart-box1').length){ var options = { series: [{ name: "Total sales", data: [10, 10, 35, 10] }], colors: ["#50b5ff"], chart: { height: 50, width: 100, type: 'line', sparkline: { enabled: true, }, zoom: { enabled: false } }, dataLabels: { enabled: false }, stroke: { curve: 'straight' }, title: { text: '', align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, xaxis: { categories: ['Jan', 'Feb', 'Mar'], } }; var chart = new ApexCharts(document.querySelector("#iq-chart-box1"), options); chart.render(); const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if(jQuery('#iq-chart-box2').length){ var options = { series: [{ name: "Sale Today", data: [10, 10, 35, 10] }], colors: ["#ff9b8a"], chart: { height: 50, width: 100, type: 'line', sparkline: { enabled: true, }, zoom: { enabled: false } }, dataLabels: { enabled: false }, stroke: { curve: 'straight' }, title: { text: '', align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, xaxis: { categories: ['Jan', 'Feb', 'Mar'], } }; var chart = new ApexCharts(document.querySelector("#iq-chart-box2"), options); chart.render(); const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if(jQuery('#iq-chart-box3').length){ var options = { series: [{ name: "Total Classon", data: [10, 10, 35, 10] }], colors: ["#49f0d3"], chart: { height: 50, width: 100, type: 'line', sparkline: { enabled: true, }, zoom: { enabled: false } }, dataLabels: { enabled: false }, stroke: { curve: 'straight' }, title: { text: '', align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, xaxis: { categories: ['Jan', 'Feb', 'Mar'], } }; var chart = new ApexCharts(document.querySelector("#iq-chart-box3"), options); chart.render(); const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if(jQuery('#iq-chart-box4').length){ var options = { series: [{ name: "Total Profit", data: [10, 10, 35, 10] }], colors: ["#fd7e14"], chart: { height: 50, width: 100, type: 'line', sparkline: { enabled: true, }, zoom: { enabled: false } }, dataLabels: { enabled: false }, stroke: { curve: 'straight' }, title: { text: '', align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, xaxis: { categories: ['Jan', 'Feb', 'Mar'], } }; var chart = new ApexCharts(document.querySelector("#iq-chart-box4"), options); chart.render(); const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } /*--------------Widget End----------------*/ /*-------------- Widget Chart ----------------*/ if (jQuery("#ethernet-chart-01").length) { var options = { series: [{ name: "Desktops", data: [5, 30, 6, 20, 5, 18, 10] }], colors: ['#4788ff'], chart: { height: 60, width: 100, type: 'line', zoom: { enabled: false }, sparkline: { enabled: true, } }, dataLabels: { enabled: false }, stroke: { curve: 'smooth', width: 3 }, title: { text: '', align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], } }; var chart = new ApexCharts(document.querySelector("#ethernet-chart-01"), options); chart.render(); const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#ethernet-chart-02").length) { var options = { series: [{ name: "Desktops", data: [5, 20, 4, 18, 3, 15, 10] }], colors: ['#1ee2ac'], chart: { height: 60, width: 100, type: 'line', zoom: { enabled: false }, sparkline: { enabled: true, } }, dataLabels: { enabled: false }, stroke: { curve: 'smooth', width: 3 }, title: { text: '', align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], } }; var chart = new ApexCharts(document.querySelector("#ethernet-chart-02"), options); chart.render(); const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#ethernet-chart-03").length) { var options = { series: [{ name: "Desktops", data: [5, 20, 6, 18, 5, 15, 4] }], colors: ['#ff4b4b'], chart: { height: 60, width: 100, type: 'line', zoom: { enabled: false }, sparkline: { enabled: true, } }, dataLabels: { enabled: false }, stroke: { curve: 'smooth', width: 3 }, title: { text: '', align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], } }; var chart = new ApexCharts(document.querySelector("#ethernet-chart-03"), options); chart.render(); const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#ethernet-chart-04").length) { var options = { series: [{ name: "Desktops", data: [5, 15, 3, 20, 5, 18, 13] }], colors: ['#4788ff'], chart: { height: 60, width: 100, type: 'line', zoom: { enabled: false }, sparkline: { enabled: true, } }, dataLabels: { enabled: false }, stroke: { curve: 'smooth', width: 3 }, title: { text: '', align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], } }; var chart = new ApexCharts(document.querySelector("#ethernet-chart-04"), options); chart.render(); const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } /*-------------- Widget Chart End ----------------*/ /*--------------Widget Chart ----------------*/ function getNewSeries(e, t) { var a = e + TICKINTERVAL; lastDate = a; for (var n = 0; n < data.length - 10; n++) data[n].x = a - XAXISRANGE - TICKINTERVAL, data[n].y = 0; data.push({ x: a, y: Math.floor(Math.random() * (t.max - t.min + 1)) + t.min }) } if (jQuery("#chart-9").length) { var chart9 = new ApexCharts(document.querySelector("#chart-9"), options); chart9.render(), window.setInterval(function() { getNewSeries(lastDate, { min: 10, max: 90 }), jQuery("#chart-9").length && chart9.updateSeries([{ data: data }]) }, 1e3) } function generateData(e, t, a) { for (var n = 0, o = []; n < t;) { var r = Math.floor(750 * Math.random()) + 1, i = Math.floor(Math.random() * (a.max - a.min + 1)) + a.min, c = Math.floor(61 * Math.random()) + 15; o.push([r, i, c]), 864e5, n++ } return o } options = { chart: { height: 440, type: "bubble", stacked: !1, toolbar: { show: !1 }, animations: { enabled: !0, easing: "linear", dynamicAnimation: { speed: 1e3 } }, sparkline: { enabled: !0 }, group: "sparklines" }, dataLabels: { enabled: !1 }, series: [{ name: "Bubble1", data: generateData(new Date("11 Feb 2017 GMT").getTime(), 10, { min: 10, max: 60 }) }, { name: "Bubble2", data: generateData(new Date("11 Feb 2017 GMT").getTime(), 10, { min: 10, max: 60 }) }, { name: "Bubble3", data: generateData(new Date("11 Feb 2017 GMT").getTime(), 10, { min: 10, max: 60 }) }, { name: "Bubble4", data: generateData(new Date("11 Feb 2017 GMT").getTime(), 10, { min: 10, max: 60 }) }], fill: { opacity: .8 }, title: { show: !1 }, xaxis: { tickAmount: 8, type: "category", labels: { show: !1 } }, yaxis: { max: 70, labels: { show: !1 } }, legend: { show: !1 } }; /*-------------- Widget Chart End ----------------*/ /*--------------------------------------------------------------------- Editable Table -----------------------------------------------------------------------*/ const $tableID = $('#table'); const $BTN = $('#export-btn'); const $EXPORT = $('#export'); const newTr = ` Example Example Example Example Example `; $('.table-add').on('click', 'i', () => { const $clone = $tableID.find('tbody tr').last().clone(true).removeClass('hide table-line'); if ($tableID.find('tbody tr').length === 0) { $('tbody').append(newTr); } $tableID.find('table').append($clone); }); $tableID.on('click', '.table-remove', function () { $(this).parents('tr').detach(); }); $tableID.on('click', '.table-up', function () { const $row = $(this).parents('tr'); if ($row.index() === 1) { return; } $row.prev().before($row.get(0)); }); $tableID.on('click', '.table-down', function () { const $row = $(this).parents('tr'); $row.next().after($row.get(0)); }); // A few jQuery helpers for exporting only jQuery.fn.pop = [].pop; jQuery.fn.shift = [].shift; $BTN.on('click', () => { const $rows = $tableID.find('tr:not(:hidden)'); const headers = []; const data = []; // Get the headers (add special header logic here) $($rows.shift()).find('th:not(:empty)').each(function () { headers.push($(this).text().toLowerCase()); }); // Turn all existing rows into a loopable array $rows.each(function () { const $td = $(this).find('td'); const h = {}; // Use the headers from earlier to name our hash keys headers.forEach((header, i) => { h[header] = $td.eq(i).text(); }); data.push(h); }); // Output the result $EXPORT.text(JSON.stringify(data)); }); /*--------------------------------------------------------------------- Form Wizard - 1 -----------------------------------------------------------------------*/ $(document).ready(function(){ var current_fs, next_fs, previous_fs; //fieldsets var opacity; var current = 1; var steps = $("fieldset").length; setProgressBar(current); $(".next").click(function(){ current_fs = $(this).parent(); next_fs = $(this).parent().next(); //Add Class Active $("#top-tab-list li").eq($("fieldset").index(next_fs)).addClass("active"); $("#top-tab-list li").eq($("fieldset").index(current_fs)).addClass("done"); //show the next fieldset next_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now) { // for making fielset appear animation opacity = 1 - now; current_fs.css({ 'display': 'none', 'position': 'relative', }); next_fs.css({'opacity': opacity}); }, duration: 500 }); setProgressBar(++current); }); $(".previous").click(function(){ current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); //Remove class active $("#top-tab-list li").eq($("fieldset").index(current_fs)).removeClass("active"); $("#top-tab-list li").eq($("fieldset").index(previous_fs)).removeClass("done"); //show the previous fieldset previous_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now) { // for making fielset appear animation opacity = 1 - now; current_fs.css({ 'display': 'none', 'position': 'relative' }); previous_fs.css({'opacity': opacity}); }, duration: 500 }); setProgressBar(--current); }); function setProgressBar(curStep){ var percent = parseFloat(100 / steps) * curStep; percent = percent.toFixed(); $(".progress-bar") .css("width",percent+"%") } $(".submit").click(function(){ return false; }) }); /*--------------------------------------------------------------------- validate form wizard -----------------------------------------------------------------------*/ $(document).ready(function () { var navListItems = $('div.setup-panel div a'), allWells = $('.setup-content'), allNextBtn = $('.nextBtn'); allWells.hide(); navListItems.click(function (e) { e.preventDefault(); var $target = $($(this).attr('href')), $item = $(this); if (!$item.hasClass('disabled')) { navListItems.addClass('active'); $item.parent().addClass('active'); allWells.hide(); $target.show(); $target.find('input:eq(0)').focus(); } }); allNextBtn.click(function(){ var curStep = $(this).closest(".setup-content"), curStepBtn = curStep.attr("id"), nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"), curInputs = curStep.find("input[type='text'],input[type='email'],input[type='password'],input[type='url'],textarea"), isValid = true; $(".form-group").removeClass("has-error"); for(var i=0; i response.json()) .then(data => { chart.data = data.map(item => ({ k: item.k, sse: item.sse, centroid_awal: item.centroid_awal.join(", ") })); console.log("Data yang dimuat ke chart:", chart.data); }); } // Load data default saat pertama kali (curas) loadChartData('curanmor'); // Event listener dropdown document.querySelectorAll('.chart-option').forEach(item => { item.addEventListener('click', function(e) { e.preventDefault(); const selected = this.getAttribute('data-value'); loadChartData(selected); document.getElementById('dropdownMenuButton002').innerHTML = this.innerText + ''; }); }); }); } if (jQuery("#layout1-chart-3").length) { options = { series: [{ name: "Desktops", data: [17, 23, 15, 28, 22, 32] }], colors: ['#FF7E41'], chart: { height: 150, type: 'line', zoom: { enabled: false }, dropShadow: { enabled: true, color: '#000', top: 12, left: 1, blur: 2, opacity: 0.2 }, toolbar: { show: false }, sparkline: { enabled: true, } }, dataLabels: { enabled: false }, stroke: { curve: 'smooth', width: 3 }, title: { text: '', align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], } }; const chart = new ApexCharts(document.querySelector("#layout1-chart-3"), options); chart.render(); const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#layout1-chart-4").length) { options = { series: [{ name: "Desktops", data: [17, 23, 15, 28, 22, 32] }], colors: ['#32BDEA'], chart: { height: 150, type: 'line', zoom: { enabled: false }, dropShadow: { enabled: true, color: '#000', top: 12, left: 1, blur: 2, opacity: 0.2 }, toolbar: { show: false }, sparkline: { enabled: true, } }, dataLabels: { enabled: false }, stroke: { curve: 'smooth', width: 3 }, title: { text: '', align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], } }; const chart = new ApexCharts(document.querySelector("#layout1-chart-4"), options); chart.render(); const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#layout1-chart-5").length) { options = { series: [{ name: 'Total Likes', data: [86, 80, 84, 95, 83, 75, 88, 76, 86, 93, 85, 65] }, { name: 'Total Share', data: [76, 72, 76, 85, 74, 69, 80, 68, 78, 85, 77, 55] }], chart: { type: 'bar', height: 300 }, colors: ['#32BDEA','#FF7E41'], plotOptions: { bar: { horizontal: false, columnWidth: '30%', endingShape: 'rounded' }, }, dataLabels: { enabled: false }, stroke: { show: true, width: 3, colors: ['transparent'] }, xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], labels: { minWidth: 0, maxWidth: 0 } }, yaxis: { show: true, labels: { minWidth: 20, maxWidth: 20 } }, fill: { opacity: 1 }, tooltip: { y: { formatter: function (val) { return "$ " + val + " thousands" } } } }; const chart = new ApexCharts(document.querySelector("#layout1-chart-5"), options); chart.render(); const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } /*--------------------------------------------------------------------- Report Charts ---------------------------------------------------------------------*/ if (jQuery("#report-chart1").length) { options = { chart: { height: 350, type: "candlestick" }, series: [{ data: [{ x: new Date(15387786e5), y: [6629.81, 6650.5, 6623.04, 6633.33] }, { x: new Date(15387804e5), y: [6632.01, 6643.59, 6620, 6630.11] }, { x: new Date(15387822e5), y: [6630.71, 6648.95, 6623.34, 6635.65] }, { x: new Date(1538784e6), y: [6635.65, 6651, 6629.67, 6638.24] }, { x: new Date(15387858e5), y: [6638.24, 6640, 6620, 6624.47] }, { x: new Date(15387876e5), y: [6624.53, 6636.03, 6621.68, 6624.31] }, { x: new Date(15387894e5), y: [6624.61, 6632.2, 6617, 6626.02] }, { x: new Date(15387912e5), y: [6627, 6627.62, 6584.22, 6603.02] }, { x: new Date(1538793e6), y: [6605, 6608.03, 6598.95, 6604.01] }, { x: new Date(15387948e5), y: [6604.5, 6614.4, 6602.26, 6608.02] }, { x: new Date(15387966e5), y: [6608.02, 6610.68, 6601.99, 6608.91] }, { x: new Date(15387984e5), y: [6608.91, 6618.99, 6608.01, 6612] }, { x: new Date(15388002e5), y: [6612, 6615.13, 6605.09, 6612] }, { x: new Date(1538802e6), y: [6612, 6624.12, 6608.43, 6622.95] }, { x: new Date(15388038e5), y: [6623.91, 6623.91, 6615, 6615.67] }, { x: new Date(15388056e5), y: [6618.69, 6618.74, 6610, 6610.4] }, { x: new Date(15388074e5), y: [6611, 6622.78, 6610.4, 6614.9] }, { x: new Date(15388092e5), y: [6614.9, 6626.2, 6613.33, 6623.45] }, { x: new Date(1538811e6), y: [6623.48, 6627, 6618.38, 6620.35] }, { x: new Date(15388128e5), y: [6619.43, 6620.35, 6610.05, 6615.53] }, { x: new Date(15388146e5), y: [6615.53, 6617.93, 6610, 6615.19] }, { x: new Date(15388164e5), y: [6615.19, 6621.6, 6608.2, 6620] }, { x: new Date(15388182e5), y: [6619.54, 6625.17, 6614.15, 6620] }, { x: new Date(153882e7), y: [6620.33, 6634.15, 6617.24, 6624.61] }, { x: new Date(15388218e5), y: [6625.95, 6626, 6611.66, 6617.58] }, { x: new Date(15388236e5), y: [6619, 6625.97, 6595.27, 6598.86] }, { x: new Date(15388254e5), y: [6598.86, 6598.88, 6570, 6587.16] }, { x: new Date(15388272e5), y: [6588.86, 6600, 6580, 6593.4] }, { x: new Date(1538829e6), y: [6593.99, 6598.89, 6585, 6587.81] }, { x: new Date(15388308e5), y: [6587.81, 6592.73, 6567.14, 6578] }, { x: new Date(15388326e5), y: [6578.35, 6581.72, 6567.39, 6579] }, { x: new Date(15388344e5), y: [6579.38, 6580.92, 6566.77, 6575.96] }, { x: new Date(15388362e5), y: [6575.96, 6589, 6571.77, 6588.92] }, { x: new Date(1538838e6), y: [6588.92, 6594, 6577.55, 6589.22] }, { x: new Date(15388398e5), y: [6589.3, 6598.89, 6589.1, 6596.08] }, { x: new Date(15388416e5), y: [6597.5, 6600, 6588.39, 6596.25] }, { x: new Date(15388434e5), y: [6598.03, 6600, 6588.73, 6595.97] }, { x: new Date(15388452e5), y: [6595.97, 6602.01, 6588.17, 6602] }, { x: new Date(1538847e6), y: [6602, 6607, 6596.51, 6599.95] }, { x: new Date(15388488e5), y: [6600.63, 6601.21, 6590.39, 6591.02] }, { x: new Date(15388506e5), y: [6591.02, 6603.08, 6591, 6591] }, { x: new Date(15388524e5), y: [6591, 6601.32, 6585, 6592] }, { x: new Date(15388542e5), y: [6593.13, 6596.01, 6590, 6593.34] }, { x: new Date(1538856e6), y: [6593.34, 6604.76, 6582.63, 6593.86] }, { x: new Date(15388578e5), y: [6593.86, 6604.28, 6586.57, 6600.01] }, { x: new Date(15388596e5), y: [6601.81, 6603.21, 6592.78, 6596.25] }, { x: new Date(15388614e5), y: [6596.25, 6604.2, 6590, 6602.99] }, { x: new Date(15388632e5), y: [6602.99, 6606, 6584.99, 6587.81] }, { x: new Date(1538865e6), y: [6587.81, 6595, 6583.27, 6591.96] }, { x: new Date(15388668e5), y: [6591.97, 6596.07, 6585, 6588.39] }, { x: new Date(15388686e5), y: [6587.6, 6598.21, 6587.6, 6594.27] }, { x: new Date(15388704e5), y: [6596.44, 6601, 6590, 6596.55] }, { x: new Date(15388722e5), y: [6598.91, 6605, 6596.61, 6600.02] }] }], title: { text: "$45,78956", align: "left" }, xaxis: { type: "datetime" }, yaxis: { tooltip: { enabled: !0 }, labels: { offsetX: -2, offsetY: 0, minWidth: 30, maxWidth: 30, } }, plotOptions: { candlestick: { colors: { upward: '#FF7E41', downward: '#32BDEA' } } } }; (chart = new ApexCharts(document.querySelector("#report-chart1"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#report-chart02").length) { var options = { series: [ { name: 'Desktops', data: [ { x: 'ABC', y: 10 }, { x: 'DEF', y: 60 }, { x: 'XYZ', y: 41 } ] }, { name: 'Mobile', data: [ { x: 'ABCD', y: 10 }, { x: 'DEFG', y: 20 }, { x: 'WXYZ', y: 51 }, { x: 'PQR', y: 30 }, { x: 'MNO', y: 20 }, { x: 'CDE', y: 30 } ] } ], legend: { show: false }, chart: { height: 350, type: 'treemap' }, title: { text: 'Multi-dimensional Treemap', align: 'center' } }; (chart = new ApexCharts(document.querySelector("#report-chart02"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery('#report-chart2').length) { am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end // create chart var chart = am4core.create("report-chart2", am4charts.TreeMap); chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect chart.colors.list = [am4core.color("#32bdea"),am4core.color("#ff7e41"), am4core.color("#e83e8c")]; chart.data = [{ name: "First", children: [ { name: "", value: 130, }, { name: "", value: 90, }, { name: "", value: 80, } ] }, { name: "Second", children: [ { name: "", value: 150 }, { name: "", value: 40 }, { name: "", value: 100 } ] }, { name: "Third", children: [ { name: "", value: 250 }, { name: "", value: 148 }, { name: "", value: 126 }, { name: "", value: 26 } ] }]; chart.colors.step = 2; // define data fields chart.dataFields.value = "value"; chart.dataFields.name = "name"; chart.dataFields.children = "children"; chart.zoomable = false; var bgColor = new am4core.InterfaceColorSet().getFor("background"); // level 0 series template var level0SeriesTemplate = chart.seriesTemplates.create("0"); var level0ColumnTemplate = level0SeriesTemplate.columns.template; level0ColumnTemplate.column.cornerRadius(10, 10, 10, 10); level0ColumnTemplate.fillOpacity = 0; level0ColumnTemplate.strokeWidth = 4; level0ColumnTemplate.strokeOpacity = 0; // level 1 series template var level1SeriesTemplate = chart.seriesTemplates.create("1"); var level1ColumnTemplate = level1SeriesTemplate.columns.template; level1SeriesTemplate.tooltip.animationDuration = 0; level1SeriesTemplate.strokeOpacity = 1; level1ColumnTemplate.column.cornerRadius(10, 10, 10, 10) level1ColumnTemplate.fillOpacity = 1; level1ColumnTemplate.strokeWidth = 4; level1ColumnTemplate.stroke = bgColor; var bullet1 = level1SeriesTemplate.bullets.push(new am4charts.LabelBullet()); bullet1.locationY = 0.5; bullet1.locationX = 0.5; bullet1.label.text = "{name}"; bullet1.label.fill = am4core.color("#ffffff"); chart.maxLevels = 2; }); // end am4core.ready() } if (jQuery("#report-chart3").length) { options = { series: [ { name: 'Bob', data: [ { x: 'Design', y: [ new Date('2019-03-05').getTime(), new Date('2019-03-08').getTime() ] }, { x: 'Code', y: [ new Date('2019-03-02').getTime(), new Date('2019-03-05').getTime() ] }, { x: 'Code', y: [ new Date('2019-03-05').getTime(), new Date('2019-03-07').getTime() ] }, { x: 'Test', y: [ new Date('2019-03-03').getTime(), new Date('2019-03-09').getTime() ] }, { x: 'Test', y: [ new Date('2019-03-08').getTime(), new Date('2019-03-11').getTime() ] }, { x: 'Validation', y: [ new Date('2019-03-11').getTime(), new Date('2019-03-16').getTime() ] }, { x: 'Design', y: [ new Date('2019-03-01').getTime(), new Date('2019-03-03').getTime() ] } ] }, { name: 'Joe', data: [ { x: 'Design', y: [ new Date('2019-03-02').getTime(), new Date('2019-03-05').getTime() ] }, { x: 'Test', y: [ new Date('2019-03-06').getTime(), new Date('2019-03-16').getTime() ] }, { x: 'Code', y: [ new Date('2019-03-03').getTime(), new Date('2019-03-07').getTime() ] }, { x: 'Deployment', y: [ new Date('2019-03-20').getTime(), new Date('2019-03-22').getTime() ] }, { x: 'Design', y: [ new Date('2019-03-10').getTime(), new Date('2019-03-16').getTime() ] } ] }, { name: 'Dan', data: [ { x: 'Code', y: [ new Date('2019-03-10').getTime(), new Date('2019-03-17').getTime() ] }, { x: 'Validation', y: [ new Date('2019-03-05').getTime(), new Date('2019-03-09').getTime() ] }, ] } ], chart: { height: 350, type: 'rangeBar' }, colors: ['#32BDEA', '#e83e8c', '#FF7E41'], plotOptions: { bar: { horizontal: true, barHeight: '80%' } }, xaxis: { type: 'datetime' }, stroke: { width: 1 }, fill: { type: 'solid', opacity: 1 }, legend: { position: 'top', horizontalAlign: 'left' } }; (chart = new ApexCharts(document.querySelector("#report-chart3"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } if (jQuery("#report-chart4").length) { options = { series: [{ name: "SAMPLE A", data: [ [16.4, 5.4], [10.9, 7.4],[10.9, 8.2], [16.4, 1.8], [13.6, 0.3], [27.1, 2.3], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [21.7, 1.8], [29.9, 1.5], [27.1, 0.8], [22.1, 2]] },{ name: "SAMPLE B", data: [ [36.4, 13.4], [1.7, 11], [1.4, 7], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [12.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]] },{ name: "SAMPLE C", data: [ [21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [19, 5], [22.4, 3], [24.5, 3], [32.6, 3], [21.6, 5], [20.9, 4], [22.4, 0], [32.6, 10.3], [29.7, 20.8], [24.5, 0.8], [21.4, 0], [21.7, 6.9], [28.6, 7.7]] }], chart: { height: 350, type: 'scatter', zoom: { enabled: true, type: 'xy' } }, colors: ['#32BDEA', '#e83e8c', '#FF7E41'], xaxis: { tickAmount: 10, labels: { formatter: function(val) { return parseFloat(val).toFixed(1) } } }, yaxis: { tickAmount: 7, show: true, labels: { minWidth: 20, maxWidth: 20 } } }; (chart = new ApexCharts(document.querySelector("#report-chart4"), options)).render() const body = document.querySelector('body') if (body.classList.contains('dark')) { apexChartUpdate(chart, { dark: true }) } document.addEventListener('ChangeColorMode', function (e) { apexChartUpdate(chart, e.detail) }) } })(jQuery);