116 lines
2.3 KiB
JavaScript
116 lines
2.3 KiB
JavaScript
var optionsProfileVisit = {
|
|
annotations: {
|
|
position: 'back'
|
|
},
|
|
dataLabels: {
|
|
enabled:false
|
|
},
|
|
chart: {
|
|
type: 'bar',
|
|
height: 300
|
|
},
|
|
fill: {
|
|
opacity:1
|
|
},
|
|
plotOptions: {
|
|
},
|
|
series: [{
|
|
name: 'sales',
|
|
data: [9,20,30,20,10,20,30,20,10,20,30,20]
|
|
}],
|
|
colors: '#435ebe',
|
|
xaxis: {
|
|
categories: ["Jan","Feb","Mar","Apr","May","Jun","Jul", "Aug","Sep","Oct","Nov","Dec"],
|
|
},
|
|
}
|
|
let optionsVisitorsProfile = {
|
|
series: [70, 30],
|
|
labels: ['Male', 'Female'],
|
|
colors: ['#435ebe','#55c6e8'],
|
|
chart: {
|
|
type: 'donut',
|
|
width: '100%',
|
|
height:'350px'
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '30%'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var optionsEurope = {
|
|
series: [{
|
|
name: 'series1',
|
|
data: [310, 800, 600, 430, 540, 340, 605, 805,430, 540, 340, 605]
|
|
}],
|
|
chart: {
|
|
height: 80,
|
|
type: 'area',
|
|
toolbar: {
|
|
show:false,
|
|
},
|
|
},
|
|
colors: ['#5350e9'],
|
|
stroke: {
|
|
width: 2,
|
|
},
|
|
grid: {
|
|
show:false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z","2018-09-19T07:30:00.000Z","2018-09-19T08:30:00.000Z","2018-09-19T09:30:00.000Z","2018-09-19T10:30:00.000Z","2018-09-19T11:30:00.000Z"],
|
|
axisBorder: {
|
|
show:false
|
|
},
|
|
axisTicks: {
|
|
show:false
|
|
},
|
|
labels: {
|
|
show:false,
|
|
}
|
|
},
|
|
show:false,
|
|
yaxis: {
|
|
labels: {
|
|
show:false,
|
|
},
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
format: 'dd/MM/yy HH:mm'
|
|
},
|
|
},
|
|
};
|
|
|
|
let optionsAmerica = {
|
|
...optionsEurope,
|
|
colors: ['#008b75'],
|
|
}
|
|
let optionsIndonesia = {
|
|
...optionsEurope,
|
|
colors: ['#dc3545'],
|
|
}
|
|
|
|
|
|
|
|
var chartProfileVisit = new ApexCharts(document.querySelector("#chart-profile-visit"), optionsProfileVisit);
|
|
var chartVisitorsProfile = new ApexCharts(document.getElementById('chart-visitors-profile'), optionsVisitorsProfile)
|
|
var chartEurope = new ApexCharts(document.querySelector("#chart-europe"), optionsEurope);
|
|
var chartAmerica = new ApexCharts(document.querySelector("#chart-america"), optionsAmerica);
|
|
var chartIndonesia = new ApexCharts(document.querySelector("#chart-indonesia"), optionsIndonesia);
|
|
|
|
chartIndonesia.render();
|
|
chartAmerica.render();
|
|
chartEurope.render();
|
|
chartProfileVisit.render();
|
|
chartVisitorsProfile.render() |