1002 lines
24 KiB
JavaScript
1002 lines
24 KiB
JavaScript
|
$(function() {
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
|
||
|
|
// chart 1
|
||
|
|
var options = {
|
||
|
|
series: [{
|
||
|
|
name: "Total Orders",
|
||
|
|
data: [240, 160, 671, 414, 555, 257]
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
type: "line",
|
||
|
|
//width: 100%,
|
||
|
|
height: 40,
|
||
|
|
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("#chart1"), options);
|
||
|
|
//chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 2
|
||
|
|
var options = {
|
||
|
|
series: [{
|
||
|
|
name: "Total Views",
|
||
|
|
data: [400, 555, 257, 640, 460, 671, 350]
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
type: "bar",
|
||
|
|
//width: 100%,
|
||
|
|
height: 40,
|
||
|
|
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("#chart2"), options);
|
||
|
|
//chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 3
|
||
|
|
var options = {
|
||
|
|
series: [{
|
||
|
|
name: "Revenue",
|
||
|
|
data: [240, 160, 555, 257, 671, 414]
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
type: "line",
|
||
|
|
//width: 100%,
|
||
|
|
height: 40,
|
||
|
|
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("#chart3"), options);
|
||
|
|
//chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 4
|
||
|
|
var options = {
|
||
|
|
series: [{
|
||
|
|
name: "Customers",
|
||
|
|
data: [400, 555, 257, 640, 460, 671, 350]
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
type: "bar",
|
||
|
|
//width: 100%,
|
||
|
|
height: 40,
|
||
|
|
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("#chart4"), options);
|
||
|
|
// chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 5
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
series: [{
|
||
|
|
name: "Revenue",
|
||
|
|
data: [240, 460, 171, 657, 160, 471, 340, 230, 458, 98]
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
type: "area",
|
||
|
|
// width: 130,
|
||
|
|
stacked: true,
|
||
|
|
height: 280,
|
||
|
|
toolbar: {
|
||
|
|
show: !1
|
||
|
|
},
|
||
|
|
zoom: {
|
||
|
|
enabled: !1
|
||
|
|
},
|
||
|
|
dropShadow: {
|
||
|
|
enabled: 0,
|
||
|
|
top: 3,
|
||
|
|
left: 14,
|
||
|
|
blur: 4,
|
||
|
|
opacity: .12,
|
||
|
|
color: "#3461ff"
|
||
|
|
},
|
||
|
|
sparkline: {
|
||
|
|
enabled: !1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
markers: {
|
||
|
|
size: 0,
|
||
|
|
colors: ["#3461ff"],
|
||
|
|
strokeColors: "#fff",
|
||
|
|
strokeWidth: 2,
|
||
|
|
hover: {
|
||
|
|
size: 7
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
row: {
|
||
|
|
colors: ["transparent", "transparent"],
|
||
|
|
opacity: .2
|
||
|
|
},
|
||
|
|
borderColor: "#f1f1f1"
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
horizontal: !1,
|
||
|
|
columnWidth: "25%",
|
||
|
|
//endingShape: "rounded"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: !1
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
show: !0,
|
||
|
|
width: [2.5],
|
||
|
|
//colors: ["#3461ff"],
|
||
|
|
curve: "smooth"
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
shade: 'light',
|
||
|
|
type: 'vertical',
|
||
|
|
shadeIntensity: 0.5,
|
||
|
|
gradientToColors: ['#3461ff'],
|
||
|
|
inverseColors: false,
|
||
|
|
opacityFrom: 0.5,
|
||
|
|
opacityTo: 0.1,
|
||
|
|
// stops: [0, 100]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
colors: ["#3461ff"],
|
||
|
|
xaxis: {
|
||
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||
|
|
},
|
||
|
|
responsive: [{
|
||
|
|
breakpoint: 1000,
|
||
|
|
options: {
|
||
|
|
chart: {
|
||
|
|
type: "area",
|
||
|
|
// width: 130,
|
||
|
|
stacked: true,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
theme: "dark"
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var chart = new ApexCharts(document.querySelector("#chart5"), options);
|
||
|
|
//chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart6
|
||
|
|
|
||
|
|
/*var chart = new Chart(document.getElementById('chart6'), {
|
||
|
|
type: 'doughnut',
|
||
|
|
data: {
|
||
|
|
labels: ["Mobile", "Desktop", "Tablet"],
|
||
|
|
datasets: [{
|
||
|
|
label: "Device Users",
|
||
|
|
backgroundColor: ["#8ea8fd", "#3461ff", "#c1cfff"],
|
||
|
|
data: [2478, 5267, 1834]
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
cutoutPercentage: 85,
|
||
|
|
responsive: true,
|
||
|
|
legend: {
|
||
|
|
display: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
// chart 7
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
chart: {
|
||
|
|
height: 300,
|
||
|
|
type: 'radialBar',
|
||
|
|
toolbar: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
radialBar: {
|
||
|
|
//startAngle: -135,
|
||
|
|
//endAngle: 225,
|
||
|
|
hollow: {
|
||
|
|
margin: 0,
|
||
|
|
size: '80%',
|
||
|
|
background: 'transparent',
|
||
|
|
image: undefined,
|
||
|
|
imageOffsetX: 0,
|
||
|
|
imageOffsetY: 0,
|
||
|
|
position: 'front',
|
||
|
|
dropShadow: {
|
||
|
|
enabled: true,
|
||
|
|
top: 3,
|
||
|
|
left: 0,
|
||
|
|
blur: 4,
|
||
|
|
color: 'rgba(0, 169, 255, 0.85)',
|
||
|
|
opacity: 0.65
|
||
|
|
}
|
||
|
|
},
|
||
|
|
track: {
|
||
|
|
background: '#e8edff',
|
||
|
|
strokeWidth: '67%',
|
||
|
|
margin: 0, // margin is in pixels
|
||
|
|
dropShadow: {
|
||
|
|
enabled: 0,
|
||
|
|
top: -3,
|
||
|
|
left: 0,
|
||
|
|
blur: 4,
|
||
|
|
color: 'rgba(0, 169, 255, 0.85)',
|
||
|
|
opacity: 0.65
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
showOn: 'always',
|
||
|
|
name: {
|
||
|
|
offsetY: -20,
|
||
|
|
show: true,
|
||
|
|
color: '#212529',
|
||
|
|
fontSize: '16px'
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
formatter: function(val) {
|
||
|
|
return val + "%";
|
||
|
|
},
|
||
|
|
color: '#212529',
|
||
|
|
fontSize: '35px',
|
||
|
|
show: true,
|
||
|
|
offsetY: 10,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
shade: 'light',
|
||
|
|
type: 'horizontal',
|
||
|
|
shadeIntensity: 0.5,
|
||
|
|
gradientToColors: ['#3461ff'],
|
||
|
|
inverseColors: false,
|
||
|
|
opacityFrom: 1,
|
||
|
|
opacityTo: 1,
|
||
|
|
stops: [0, 100]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
colors: ["#3461ff"],
|
||
|
|
series: [78],
|
||
|
|
stroke: {
|
||
|
|
lineCap: 'round',
|
||
|
|
//dashArray: 4
|
||
|
|
},
|
||
|
|
labels: ['Total Traffic'],
|
||
|
|
responsive: [{
|
||
|
|
breakpoint: 1281,
|
||
|
|
options: {
|
||
|
|
chart: {
|
||
|
|
height: 280,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var chart = new ApexCharts(
|
||
|
|
document.querySelector("#chart7"),
|
||
|
|
options
|
||
|
|
);
|
||
|
|
|
||
|
|
chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 8
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
series: [{
|
||
|
|
name: "Comments",
|
||
|
|
data: [0, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 0]
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
type: "area",
|
||
|
|
//width: 130,
|
||
|
|
height: 55,
|
||
|
|
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"
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
shade: 'light',
|
||
|
|
type: 'vertical',
|
||
|
|
shadeIntensity: 0.5,
|
||
|
|
gradientToColors: ['#3461ff'],
|
||
|
|
inverseColors: false,
|
||
|
|
opacityFrom: 0.6,
|
||
|
|
opacityTo: 0.1,
|
||
|
|
//stops: [0, 100]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
colors: ["#3461ff"],
|
||
|
|
xaxis: {
|
||
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||
|
|
},
|
||
|
|
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 9
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
series: [{
|
||
|
|
name: "Comments",
|
||
|
|
data: [0, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 0]
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
type: "area",
|
||
|
|
//width: 130,
|
||
|
|
height: 55,
|
||
|
|
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"
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
shade: 'light',
|
||
|
|
type: 'vertical',
|
||
|
|
shadeIntensity: 0.5,
|
||
|
|
gradientToColors: ['#3461ff'],
|
||
|
|
inverseColors: false,
|
||
|
|
opacityFrom: 0.6,
|
||
|
|
opacityTo: 0.1,
|
||
|
|
//stops: [0, 100]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
colors: ["#3461ff"],
|
||
|
|
xaxis: {
|
||
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||
|
|
},
|
||
|
|
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: [0, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 0]
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
type: "area",
|
||
|
|
//width: 130,
|
||
|
|
height: 55,
|
||
|
|
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"
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
shade: 'light',
|
||
|
|
type: 'vertical',
|
||
|
|
shadeIntensity: 0.5,
|
||
|
|
gradientToColors: ['#3461ff'],
|
||
|
|
inverseColors: false,
|
||
|
|
opacityFrom: 0.6,
|
||
|
|
opacityTo: 0.1,
|
||
|
|
//stops: [0, 100]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
colors: ["#3461ff"],
|
||
|
|
xaxis: {
|
||
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||
|
|
},
|
||
|
|
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: "New Visitors",
|
||
|
|
data: [640, 560, 871, 614, 755, 457, 650]
|
||
|
|
}, {
|
||
|
|
name: "Old Visitors",
|
||
|
|
data: [440, 360, 671, 414, 555, 257, 450]
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
foreColor: '#9a9797',
|
||
|
|
type: "bar",
|
||
|
|
//width: 130,
|
||
|
|
stacked: true,
|
||
|
|
height: 280,
|
||
|
|
toolbar: {
|
||
|
|
show: !1
|
||
|
|
},
|
||
|
|
zoom: {
|
||
|
|
enabled: !1
|
||
|
|
},
|
||
|
|
dropShadow: {
|
||
|
|
enabled: 0,
|
||
|
|
top: 3,
|
||
|
|
left: 15,
|
||
|
|
blur: 4,
|
||
|
|
opacity: .12,
|
||
|
|
color: "#3461ff"
|
||
|
|
},
|
||
|
|
sparkline: {
|
||
|
|
enabled: !1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
markers: {
|
||
|
|
size: 0,
|
||
|
|
colors: ["#3461ff", "#c1cfff"],
|
||
|
|
strokeColors: "#fff",
|
||
|
|
strokeWidth: 2,
|
||
|
|
hover: {
|
||
|
|
size: 7
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
horizontal: !1,
|
||
|
|
columnWidth: "35%",
|
||
|
|
//endingShape: "rounded"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: !1
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
show: !0,
|
||
|
|
width: 0,
|
||
|
|
curve: "smooth"
|
||
|
|
},
|
||
|
|
colors: ["#3461ff", "#c1cfff"],
|
||
|
|
xaxis: {
|
||
|
|
categories: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
|
||
|
|
},
|
||
|
|
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();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// worl map
|
||
|
|
|
||
|
|
jQuery('#geographic-map').vectorMap({
|
||
|
|
map: 'world_mill_en',
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
borderColor: '#818181',
|
||
|
|
borderOpacity: 0.25,
|
||
|
|
borderWidth: 1,
|
||
|
|
zoomOnScroll: false,
|
||
|
|
color: '#009efb',
|
||
|
|
regionStyle: {
|
||
|
|
initial: {
|
||
|
|
fill: '#3461ff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
markerStyle: {
|
||
|
|
initial: {
|
||
|
|
r: 9,
|
||
|
|
'fill': '#fff',
|
||
|
|
'fill-opacity': 1,
|
||
|
|
'stroke': '#000',
|
||
|
|
'stroke-width': 5,
|
||
|
|
'stroke-opacity': 0.4
|
||
|
|
},
|
||
|
|
},
|
||
|
|
enableZoom: true,
|
||
|
|
hoverColor: '#009efb',
|
||
|
|
markers: [{
|
||
|
|
latLng: [21.00, 78.00],
|
||
|
|
name: 'Lorem Ipsum Dollar'
|
||
|
|
|
||
|
|
}],
|
||
|
|
hoverOpacity: null,
|
||
|
|
normalizeFunction: 'linear',
|
||
|
|
scaleColors: ['#b6d6ff', '#005ace'],
|
||
|
|
selectedColor: '#c9dfaf',
|
||
|
|
selectedRegions: [],
|
||
|
|
showTooltip: true,
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|