$(function() { "use strict"; // chart 1 var options = { series: [{ name: "Total Orders", data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257] }], chart: { type: "bar", width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#3361ff" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#3361ff"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 0, curve: "smooth" }, colors: ["#3361ff"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart1"), options); chart.render(); // chart 2 var options = { series: [{ name: "Total Revenue", data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257] }], chart: { type: "bar", width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#12bf24" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#12bf24"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 0, curve: "smooth" }, colors: ["#12bf24"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart2"), options); chart.render(); // chart 3 var options = { series: [{ name: "Bounce Rate", data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257] }], chart: { type: "bar", width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#e72e7a" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#e72e7a"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 0, curve: "smooth" }, colors: ["#e72e7a"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart3"), options); chart.render(); // chart 4 var options = { series: [{ name: "New Users", data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257] }], chart: { type: "bar", width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#ff6632" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#ff6632"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 0, curve: "smooth" }, colors: ["#ff6632"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart4"), options); chart.render(); // chart 5 var options = { series: [{ name: "Total Orders", data: [240, 160, 671, 414, 555, 257, 901, 555, 257] }], chart: { type: "line", width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#ff6632" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#ff6632"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2.5, curve: "smooth" }, colors: ["#e72e7a"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart5"), options); chart.render(); // chart 6 var options = { series: [{ name: "Total Income", data: [240, 160, 671, 414, 555, 257, 901, 555, 257] }], chart: { type: "line", width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#3461ff" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#3461ff"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2.5, curve: "smooth" }, colors: ["#3461ff"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart6"), options); chart.render(); // chart 7 var options = { series: [{ name: "Comments", data: [240, 160, 671, 414, 555, 257, 901, 555, 257] }], chart: { type: "line", width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#ff6632" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#ff6632"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2.5, curve: "smooth" }, colors: ["#ff6632"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart7"), options); chart.render(); // chart 8 var options = { series: [{ name: "Comments", data: [240, 160, 671, 414, 555, 257, 901, 555, 257] }], chart: { type: "line", width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#32bfff" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#32bfff"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2.5, curve: "smooth" }, colors: ["#32bfff"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart8"), options); chart.render(); // chart 7 var options = { series: [{ name: "Comments", data: [240, 160, 671, 414, 555, 257, 901, 555, 257] }], chart: { type: "area", width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#e72e2e" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#3461ff"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2.5, curve: "smooth" }, colors: ["#3461ff"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart9"), options); chart.render(); // chart 10 var options = { series: [{ name: "Comments", data: [240, 160, 671, 414, 555, 257, 901, 555, 257] }], chart: { type: "area", width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#e72e2e" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#e72e2e"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2.5, curve: "smooth" }, colors: ["#e72e2e"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart10"), options); chart.render(); // chart 11 var options = { series: [{ name: "Comments", data: [240, 160, 671, 414, 555, 257, 901, 555, 257] }], chart: { type: "area", width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#12bf24" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#12bf24"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2.5, curve: "smooth" }, colors: ["#12bf24"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart11"), options); chart.render(); // chart 12 var options = { series: [{ name: "Comments", data: [240, 160, 671, 414, 555, 257, 901, 555, 257] }], chart: { type: "area", width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#8932ff" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#8932ff"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2.5, curve: "smooth" }, colors: ["#8932ff"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart12"), options); chart.render(); // chart 13 var options = { series: [{ name: "Messages", data: [240, 160, 671, 414, 555, 257, 901, 555, 257] }], chart: { type: "area", //width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#e72e2e" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#3461ff"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2.5, curve: "smooth" }, colors: ["#3461ff"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart13"), options); chart.render(); // chart 14 var options = { series: [{ name: "Storage", data: [240, 160, 671, 414, 555, 257, 901, 555, 257] }], chart: { type: "line", // width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#ff6632" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#ff6632"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2.5, curve: "smooth" }, colors: ["#ff6632"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart14"), options); chart.render(); // chart 15 var options = { series: [{ name: "Members", data: [240, 160, 671, 414, 555, 257, 901, 555, 257] }], chart: { type: "area", // width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#12bf24" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#12bf24"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2.5, curve: "smooth" }, colors: ["#12bf24"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart15"), options); chart.render(); // chart 16 var options = { series: [{ name: "New Tasks", data: [240, 160, 671, 414, 555, 257, 901, 555, 257] }], chart: { type: "bar", // width: 130, height: 50, toolbar: { show: !1 }, zoom: { enabled: !1 }, dropShadow: { enabled: 0, top: 3, left: 14, blur: 4, opacity: .12, color: "#8932ff" }, sparkline: { enabled: !0 } }, markers: { size: 0, colors: ["#8932ff"], strokeColors: "#fff", strokeWidth: 2, hover: { size: 7 } }, plotOptions: { bar: { horizontal: !1, columnWidth: "35%", endingShape: "rounded" } }, dataLabels: { enabled: !1 }, stroke: { show: !0, width: 2.5, curve: "smooth" }, colors: ["#8932ff"], xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, fill: { opacity: 1 }, tooltip: { theme: "dark", fixed: { enabled: !1 }, x: { show: !1 }, y: { title: { formatter: function(e) { return "" } } }, marker: { show: !1 } } }; var chart = new ApexCharts(document.querySelector("#chart16"), options); chart.render(); $('#chart17').easyPieChart({ easing: 'easeOutBounce', barColor : '#e72e7a', lineWidth: 8, trackColor : 'rgb(231 46 122 / 15%)', scaleColor: false, onStep: function(from, to, percent) { $(this.el).find('.w_percent').text(Math.round(percent)); } }); $('#chart18').easyPieChart({ easing: 'easeOutBounce', barColor : '#3461ff', lineWidth: 8, trackColor : 'rgb(52 97 255 / 15%)', scaleColor: false, onStep: function(from, to, percent) { $(this.el).find('.w_percent').text(Math.round(percent)); } }); $('#chart19').easyPieChart({ easing: 'easeOutBounce', barColor : '#12bf24', lineWidth: 8, trackColor : 'rgb(18 191 36 / 15%)', scaleColor: false, onStep: function(from, to, percent) { $(this.el).find('.w_percent').text(Math.round(percent)); } }); $('#chart20').easyPieChart({ easing: 'easeOutBounce', barColor : '#ff6632', lineWidth: 8, trackColor : 'rgb(255 102 50 / 15%)', scaleColor: false, onStep: function(from, to, percent) { $(this.el).find('.w_percent').text(Math.round(percent)); } }); });