1457 lines
28 KiB
JavaScript
1457 lines
28 KiB
JavaScript
|
$(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));
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|