657 lines
11 KiB
JavaScript
657 lines
11 KiB
JavaScript
$(function () {
|
|
"use strict";
|
|
// chart 1
|
|
var options = {
|
|
series: [{
|
|
name: 'Visitors',
|
|
data: [10, 9, 24, 19, 22, 9, 12, 7]
|
|
}],
|
|
chart: {
|
|
type: 'bar',
|
|
width: 130,
|
|
height: 65,
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
stacked: true,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '25%',
|
|
endingShape: 'rounded'
|
|
},
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'left',
|
|
offsetX: 0
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 0,
|
|
colors: ['transparent']
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
},
|
|
colors: ["#fff"],
|
|
xaxis: {
|
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
}
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#chart1"), options);
|
|
chart.render();
|
|
// chart 2
|
|
var options = {
|
|
series: [{
|
|
name: 'Customers',
|
|
data: [10, 9, 24, 19, 22, 9, 12, 7]
|
|
}],
|
|
chart: {
|
|
type: 'area',
|
|
width: 130,
|
|
height: 65,
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
stacked: true,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '25%',
|
|
endingShape: 'rounded'
|
|
},
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'left',
|
|
offsetX: 0
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
//colors: ['transparent']
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
shadeIntensity: 0.15,
|
|
gradientToColors: ['#fff'],
|
|
type: 'vertical',
|
|
inverseColors: false,
|
|
opacityFrom: 0.1,
|
|
opacityTo: 0.5,
|
|
stops: [0, 50, 65, 91]
|
|
},
|
|
},
|
|
colors: ["#fff"],
|
|
tooltip: {
|
|
theme: 'dark',
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
|
}
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#chart2"), options);
|
|
chart.render();
|
|
// chart 3
|
|
var options = {
|
|
series: [{
|
|
name: 'Orders',
|
|
data: [10, 9, 24, 19, 22, 9, 12, 7]
|
|
}],
|
|
chart: {
|
|
type: 'bar',
|
|
width: 130,
|
|
height: 65,
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
stacked: true,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '25%',
|
|
endingShape: 'rounded'
|
|
},
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'left',
|
|
offsetX: 0
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 0,
|
|
colors: ['transparent']
|
|
},
|
|
colors: ["#fff"],
|
|
tooltip: {
|
|
theme: 'dark',
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
}
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#chart3"), options);
|
|
chart.render();
|
|
// chart 4
|
|
var options = {
|
|
series: [{
|
|
name: 'Sales',
|
|
data: [10, 9, 24, 19, 15, 22, 12, 7]
|
|
}],
|
|
chart: {
|
|
type: 'area',
|
|
width: 130,
|
|
height: 65,
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
stacked: true,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '25%',
|
|
endingShape: 'rounded'
|
|
},
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'left',
|
|
offsetX: 0
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
//colors: ['transparent']
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
shadeIntensity: 0.15,
|
|
gradientToColors: ['#fff'],
|
|
type: 'vertical',
|
|
inverseColors: false,
|
|
opacityFrom: 0.1,
|
|
opacityTo: 0.5,
|
|
stops: [0, 50, 65, 91]
|
|
},
|
|
},
|
|
colors: ["#fff"],
|
|
tooltip: {
|
|
theme: 'dark',
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
|
}
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#chart4"), options);
|
|
chart.render();
|
|
// chart 5
|
|
var options = {
|
|
series: [{
|
|
name: 'Audience',
|
|
data: [427, 613, 901, 257, 505, 414, 671, 160, 440]
|
|
}],
|
|
chart: {
|
|
type: 'area',
|
|
height: 80,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
top: 3,
|
|
left: 14,
|
|
blur: 4,
|
|
opacity: 0.12,
|
|
color: '#000',
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
colors: ["#000"],
|
|
strokeColors: "#fff",
|
|
strokeWidth: 2,
|
|
hover: {
|
|
size: 7,
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 3,
|
|
curve: 'smooth'
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
shadeIntensity: 0.15,
|
|
gradientToColors: ['#fff'],
|
|
type: 'vertical',
|
|
inverseColors: false,
|
|
opacityFrom: 0.2,
|
|
opacityTo: 0.5,
|
|
//stops: [0, 50, 65, 91]
|
|
},
|
|
},
|
|
colors: ["#fff"],
|
|
tooltip: {
|
|
theme: 'dark',
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
}
|
|
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#chart5"), options);
|
|
chart.render();
|
|
// chart 6
|
|
var options = {
|
|
series: [{
|
|
name: 'Impressions',
|
|
data: [427, 613, 901, 257, 505, 414, 671, 160, 440]
|
|
}],
|
|
chart: {
|
|
type: 'area',
|
|
height: 80,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
top: 3,
|
|
left: 14,
|
|
blur: 4,
|
|
opacity: 0.12,
|
|
color: '#000',
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
colors: ["#000"],
|
|
strokeColors: "#fff",
|
|
strokeWidth: 2,
|
|
hover: {
|
|
size: 7,
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 3,
|
|
curve: 'smooth'
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
shadeIntensity: 0.15,
|
|
gradientToColors: ['#fff'],
|
|
type: 'vertical',
|
|
inverseColors: false,
|
|
opacityFrom: 0.2,
|
|
opacityTo: 0.5,
|
|
//stops: [0, 50, 65, 91]
|
|
},
|
|
},
|
|
colors: ["#fff"],
|
|
tooltip: {
|
|
theme: 'dark',
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
}
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#chart6"), options);
|
|
chart.render();
|
|
// chart 7
|
|
var options = {
|
|
series: [{
|
|
name: 'Engagement',
|
|
data: [427, 613, 901, 257, 505, 414, 671, 160, 440]
|
|
}],
|
|
chart: {
|
|
type: 'area',
|
|
height: 180,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
top: 3,
|
|
left: 14,
|
|
blur: 4,
|
|
opacity: 0.12,
|
|
color: '#000',
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
colors: ["#000"],
|
|
strokeColors: "#fff",
|
|
strokeWidth: 2,
|
|
hover: {
|
|
size: 7,
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 3,
|
|
curve: 'smooth'
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
shadeIntensity: 0.15,
|
|
gradientToColors: ['#fff'],
|
|
type: 'vertical',
|
|
inverseColors: false,
|
|
opacityFrom: 0.2,
|
|
opacityTo: 0.5,
|
|
//stops: [0, 50, 65, 91]
|
|
},
|
|
},
|
|
colors: ["#fff"],
|
|
tooltip: {
|
|
theme: 'dark',
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
}
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#chart7"), options);
|
|
chart.render();
|
|
// chart 8
|
|
var options = {
|
|
series: [25, 65, 10],
|
|
chart: {
|
|
height: 220,
|
|
type: 'donut',
|
|
},
|
|
legend: {
|
|
position: 'bottom',
|
|
show: false,
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
// customScale: 0.8,
|
|
donut: {
|
|
size: '70%'
|
|
}
|
|
}
|
|
},
|
|
colors: ["rgba(255, 255, 255, 0.52)", "#fff", "rgba(255, 255, 255, 0.22)"],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke:{
|
|
colors:['rgba(255, 255, 255, 0.0)']
|
|
},
|
|
labels: ['Social Media', 'Email', 'Organic'],
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
height: 200
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#chart8"), options);
|
|
chart.render();
|
|
// chart 9
|
|
var options = {
|
|
series: [{
|
|
name: 'Visitors',
|
|
data: [427, 613, 901, 257, 505, 414, 671, 160, 440]
|
|
}],
|
|
chart: {
|
|
foreColor: 'rgba(255, 255, 255, 0.65)',
|
|
type: 'bar',
|
|
height: 320,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
},
|
|
dropShadow: {
|
|
enabled: false,
|
|
top: 3,
|
|
left: 10,
|
|
blur: 3,
|
|
opacity: 0.10,
|
|
color: '#673ab7',
|
|
},
|
|
sparkline: {
|
|
enabled: false
|
|
}
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
size: '70%',
|
|
}
|
|
},
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '35%',
|
|
endingShape: 'rounded'
|
|
},
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
colors: ["#000"],
|
|
strokeColors: "#fff",
|
|
strokeWidth: 2,
|
|
hover: {
|
|
size: 7,
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: 'rgba(255, 255, 255, 0.12)',
|
|
strokeDashArray: 4,
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 3,
|
|
curve: 'smooth'
|
|
},
|
|
colors: ["#fff"],
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
}
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#chart9"), options);
|
|
chart.render();
|
|
}); |