Mini Shell
// employ salery chart
var options = {
series: [{
name: 'Sales',
data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19]
}],
colors: ['#0da487'],
chart: {
type: 'area',
// stacked: false,
height: 285,
},
stroke: {
width: 3,
curve: 'smooth'
},
};
var chart = new ApexCharts(document.querySelector("#employ-salary"), options);
chart.render();
// salery summary chart
var options = {
series: [{
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
}, {
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
}, {
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
}],
chart: {
type: 'bar',
height: 290,
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
colors: ['#0da487', '#2483e2', '#3d3d3d'],
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
},
yaxis: {
title: {
show: false,
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
},
legend: {
show: false,
// position: 'bottom',
// itemMargin: {
// horizontal: 5,
// vertical: 1
// },
},
responsive: [{
breakpoint: 991,
options: {
// series: [{
// // data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
// },
// {
// data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
// },
// {
// data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
// }
// ],
chart: {
height: 300,
},
},
}, ],
};
var chart = new ApexCharts(document.querySelector("#saler-summary"), options);
chart.render();
// sales purchase chart
var options = {
series: [{
data: [21, 22, 10, 28, 16, 21, 13, 30, 12, 20]
}],
chart: {
height: 300,
type: 'bar',
},
colors: ['#0da487', '#2483e2', '#3d3d3d'],
plotOptions: {
bar: {
columnWidth: '45%',
distributed: true,
}
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
labels: {
style: {
colors: ['#0da487', '#2483e2', '#3d3d3d'],
fontSize: '12px'
}
}
}
};
var chart = new ApexCharts(document.querySelector("#sales-purchase-chart"), options);
chart.render();
//sales purchase return cart
var options = {
series: [{
// name: 'series1',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
// name: 'series2',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}],
chart: {
height: 350,
type: 'area'
},
dataLabels: {
enabled: false,
},
stroke: {
curve: 'straight',
width: [3, 3]
},
colors: ['#0da487', '#2483e2', '#e2c924'],
xaxis: {
type: 'time',
categories: [01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14],
},
legend: {
show: false,
},
tooltip: {
show: false,
},
};
var chart = new ApexCharts(document.querySelector("#sales-purchase-return-cart"), options);
chart.render();
// expenses-cart Start
var options = {
series: [{
name: "Page Views",
data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
},
// {
// name: 'Total Visits',
// data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
// }
],
theme: {
monochrome: {
enabled: true,
color: '#255aee',
shadeTo: 'light',
shadeIntensity: 0.65
}
},
chart: {
height: 310,
type: 'line',
zoom: {
enabled: true
},
},
dataLabels: {
enabled: false
},
stroke: {
width: [3, 7, 5],
curve: 'straight',
dashArray: [0, 8, 5]
},
markers: {
size: 0,
hover: {
sizeOffset: 6
}
},
xaxis: {
categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
},
grid: {
borderColor: '#ddd',
},
responsive: [{
breakpoint: 992,
options: {
chart: {
height: 300,
},
},
}, ],
};
var chart = new ApexCharts(document.querySelector("#expenses-cart"), options);
chart.render();
// Pie Chart
var options = {
series: [44, 55, 13, 43, 22],
chart: {
width: 380,
type: 'pie',
},
legend: {
show: false,
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
// total-earnings-chart
var options = {
series: [{
name: "STOCK ABC",
data: series.monthDataSeries1.prices
}],
chart: {
type: 'area',
height: 90,
width: 90,
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
labels: series.monthDataSeries1.dates,
xaxis: {
labels: {
show: false,
},
type: 'datetime',
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
opposite: true,
labels: {
show: false,
},
},
grid: {
xaxis: {
lines: {
borderColor: 'transparent',
show: false
}
},
yaxis: {
lines: {
borderColor: 'transparent',
show: false,
}
},
padding: {
right: 0,
bottom: 0,
left: 0,
top: 0
}
},
legend: {
horizontalAlign: 'left'
},
};
var chart = new ApexCharts(document.querySelector("#total-earnings-chart"), options);
chart.render();
//traffic chart
var generateDayWiseTimeSeries = function (baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = baseval;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push([x, y]);
baseval += 88400000;
i++;
}
return series;
}
var options = {
series: [{
name: 'Referral Traffic',
data: [45, 40, 140, 70, 150, 260, 240, 380, 110, 180, 270, 115, 70, 65, 50]
}, ],
chart: {
type: 'area',
height: 370,
stacked: true,
events: {
selection: function (chart, e) {
console.log(new Date(e.xaxis.min))
}
},
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
dashArray: 0,
},
markers: {
size: 6,
colors: '#fff',
strokeColors: '#747dc6',
strokeWidth: 4,
strokeOpacity: 0.9,
strokeDashArray: 0,
fillOpacity: 1,
discrete: [],
shape: "circle",
radius: 2,
offsetX: 0,
offsetY: 0,
onClick: undefined,
onDblClick: undefined,
showNullDataPoints: true,
hover: {
size: undefined,
sizeOffset: 3
}
},
colors: ['#747dc6'],
dataLabels: {
enabled: false
},
grid: {
padding: {
right: 0,
bottom: 0,
left: 0,
top: 0
}
},
fill: {
type: 'gradient',
gradient: {
opacityFrom: 0.6,
opacityTo: 0.2,
shade: 'light',
type: "vertical",
// optional, if not defined - uses the shades of same color in series
}
},
legend: {
position: 'top',
horizontalAlign: 'left'
},
xaxis: {
categories: ['jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'jan', 'Feb', 'mar'],
},
responsive: [{
breakpoint: 1400,
options: {
chart: {
height: 210,
width: "120%",
offsetX: -45,
},
legend: {
position: 'bottom',
},
dataLabels: {
textAnchor: 'left',
style: {
fontSize: '10px',
},
}
},
},
{
breakpoint: 992,
options: {
chart: {
height: 210,
width: "100%",
offsetX: 0,
},
},
},
{
breakpoint: 578,
options: {
chart: {
height: 200,
width: "105%",
offsetX: -20,
offsetY: 10,
},
},
},
{
breakpoint: 430,
options: {
chart: {
width: "108%",
},
},
},
{
breakpoint: 330,
options: {
chart: {
width: "112%",
},
},
},
],
};
var chart = new ApexCharts(document.querySelector("#traffic-chart"), options);
chart.render();