404 lines
7.6 KiB
JavaScript
404 lines
7.6 KiB
JavaScript
// Line & Column Chart //
|
|
const mixed1ChartOptions = {
|
|
series: [{
|
|
name: 'Website Blog',
|
|
type: 'column',
|
|
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
|
|
}, {
|
|
name: 'Social Media',
|
|
type: 'line',
|
|
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
|
|
}],
|
|
chart: {
|
|
fontFamily: "Rubik, serif",
|
|
height: 350,
|
|
type: 'line',
|
|
},
|
|
colors:['#0F626A', "#626263"],
|
|
stroke: {
|
|
width: [0, 4]
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
enabledOnSeries: [1]
|
|
},
|
|
|
|
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
|
|
yaxis: [{
|
|
labels: {
|
|
style: {
|
|
fontSize: '14px',
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
opposite: true,
|
|
|
|
}],
|
|
xaxis: {
|
|
labels: {
|
|
style: {
|
|
fontSize: '14px',
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: 'rgba(var(--dark),.2)',
|
|
strokeDashArray: 2,
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
show: false,
|
|
},
|
|
style: {
|
|
fontSize: '16px',
|
|
},
|
|
},
|
|
|
|
};
|
|
|
|
const mixed1Chart = new ApexCharts(document.querySelector("#mixed1"), mixed1ChartOptions);
|
|
mixed1Chart.render();
|
|
|
|
|
|
|
|
// ----- multiple y-axis chart ---- //
|
|
const mixed2ChartOptions = {
|
|
series: [{
|
|
name: 'Income',
|
|
type: 'column',
|
|
data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
|
|
}, {
|
|
name: 'Cashflow',
|
|
type: 'column',
|
|
data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
|
|
}, {
|
|
name: 'Revenue',
|
|
type: 'line',
|
|
data: [20, 29, 37, 36, 44, 45, 50, 58]
|
|
}],
|
|
chart: {
|
|
fontFamily: "Rubik, serif",
|
|
height: 350,
|
|
type: 'line',
|
|
stacked: false
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
width: [1, 1, 4]
|
|
},
|
|
title: {
|
|
text: '',
|
|
align: 'left',
|
|
offsetX: 110
|
|
},
|
|
xaxis: {
|
|
categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
|
|
labels: {
|
|
style: {
|
|
fontSize: '14px',
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
|
|
},
|
|
|
|
colors: ['#0F626A', '#E14E5A', '#4196FA'],
|
|
yaxis: [
|
|
{
|
|
axisTicks: {
|
|
show: true,
|
|
},
|
|
axisBorder: {
|
|
show: true,
|
|
color: '#AECC34'
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: '#008FFB',
|
|
fontSize: '14px',
|
|
fontWeight: 500,
|
|
}
|
|
},
|
|
title: {
|
|
text: "",
|
|
style: {
|
|
color: '#008FFB',
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: true
|
|
}
|
|
},
|
|
{
|
|
seriesName: 'Income',
|
|
opposite: true,
|
|
axisTicks: {
|
|
show: true,
|
|
},
|
|
axisBorder: {
|
|
show: true,
|
|
color: '#00E396'
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: '#00E396',
|
|
}
|
|
},
|
|
title: {
|
|
text: "",
|
|
style: {
|
|
color: '#00E396',
|
|
}
|
|
},
|
|
},
|
|
{
|
|
seriesName: 'Revenue',
|
|
opposite: true,
|
|
axisTicks: {
|
|
show: true,
|
|
},
|
|
axisBorder: {
|
|
show: true,
|
|
color: '#FEB019'
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: '#FEB019',
|
|
},
|
|
},
|
|
title: {
|
|
text: "",
|
|
style: {
|
|
color: '#FEB019',
|
|
}
|
|
}
|
|
},
|
|
],
|
|
tooltip: {
|
|
x: {
|
|
show: false,
|
|
},
|
|
style: {
|
|
fontSize: '16px',
|
|
},
|
|
fixed: {
|
|
enabled: true,
|
|
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
|
|
offsetY: 30,
|
|
offsetX: 60
|
|
},
|
|
},
|
|
legend: {
|
|
horizontalAlign: 'left',
|
|
offsetX: 40
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: 'rgba(var(--dark),.2)',
|
|
strokeDashArray: 2,
|
|
},
|
|
};
|
|
|
|
const mixed2Chart = new ApexCharts(document.querySelector("#mixed2"), mixed2ChartOptions);
|
|
mixed2Chart.render();
|
|
|
|
|
|
// Line & Area Chart //
|
|
const mixed3ChartOptions = {
|
|
series: [{
|
|
name: 'TEAM A',
|
|
type: 'area',
|
|
data: [44, 55, 31, 47, 31, 43, 26, 41, 31, 47, 33]
|
|
}, {
|
|
name: 'TEAM B',
|
|
type: 'line',
|
|
data: [55, 69, 45, 61, 43, 54, 37, 52, 44, 61, 43]
|
|
}],
|
|
chart: {
|
|
fontFamily: "Rubik, serif",
|
|
height: 350,
|
|
type: 'line',
|
|
},
|
|
stroke: {
|
|
curve: 'smooth'
|
|
},
|
|
fill: {
|
|
type: 'solid',
|
|
opacity: [0.35, 1],
|
|
},
|
|
|
|
colors: ['#0AB964', '#0F626A'],
|
|
labels: ['Dec 01', 'Dec 02', 'Dec 03', 'Dec 04', 'Dec 05', 'Dec 06', 'Dec 07', 'Dec 08', 'Dec 09 ', 'Dec 10', 'Dec 11'],
|
|
markers: {
|
|
size: 0
|
|
},
|
|
|
|
xaxis: {
|
|
labels: {
|
|
style: {
|
|
fontSize: '14px',
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
|
|
},
|
|
yaxis: [
|
|
{
|
|
title: {
|
|
text: '',
|
|
|
|
},
|
|
labels: {
|
|
style: {
|
|
fontSize: '14px',
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
opposite: true,
|
|
title: {
|
|
text: '',
|
|
},
|
|
},
|
|
|
|
],
|
|
tooltip: {
|
|
shared: true,
|
|
intersect: false,
|
|
x: {
|
|
show: false,
|
|
},
|
|
style: {
|
|
fontSize: '16px',
|
|
},
|
|
y: {
|
|
formatter: function (y) {
|
|
if (typeof y !== "undefined") {
|
|
return y.toFixed(0) + " points";
|
|
}
|
|
return y;
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: 'rgba(var(--dark),.2)',
|
|
strokeDashArray: 2,
|
|
}
|
|
};
|
|
|
|
const mixed3Chart = new ApexCharts(document.querySelector("#mixed3"), mixed3ChartOptions);
|
|
mixed3Chart.render();
|
|
|
|
|
|
|
|
// Line, Column & Area Chart //
|
|
|
|
const mixed4ChartOptions = {
|
|
series: [{
|
|
name: 'TEAM A',
|
|
type: 'column',
|
|
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
|
|
}, {
|
|
name: 'TEAM B',
|
|
type: 'area',
|
|
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
|
|
}, {
|
|
name: 'TEAM C',
|
|
type: 'line',
|
|
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
|
|
}],
|
|
chart: {
|
|
fontFamily: "Rubik, serif",
|
|
height: 350,
|
|
type: 'line',
|
|
stacked: false,
|
|
},
|
|
stroke: {
|
|
width: [0, 2, 5],
|
|
curve: 'smooth'
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '50%'
|
|
}
|
|
},
|
|
|
|
|
|
fill: {
|
|
opacity: [0.85, 0.25, 1],
|
|
gradient: {
|
|
inverseColors: false,
|
|
shade: 'light',
|
|
type: "vertical",
|
|
opacityFrom: 0.85,
|
|
opacityTo: 0.55,
|
|
stops: [0, 100, 100, 100]
|
|
}
|
|
},
|
|
labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003',
|
|
'08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'
|
|
],
|
|
markers: {
|
|
size: 0
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
labels: {
|
|
style: {
|
|
fontSize: '14px',
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
},
|
|
|
|
colors: [getLocalStorageItem('color-primary','#0F626A'),getLocalStorageItem('color-secondary','#626262'), '#0AB964'],
|
|
yaxis: {
|
|
title: {
|
|
text: '',
|
|
},
|
|
labels: {
|
|
style: {
|
|
fontSize: '14px',
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
min: 0
|
|
},
|
|
tooltip: {
|
|
shared: true,
|
|
intersect: false,
|
|
x: {
|
|
show: false,
|
|
},
|
|
style: {
|
|
fontSize: '16px',
|
|
},
|
|
y: {
|
|
formatter: function (y) {
|
|
if (typeof y !== "undefined") {
|
|
return y.toFixed(0) + " points";
|
|
}
|
|
return y;
|
|
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: 'rgba(var(--dark),.2)',
|
|
strokeDashArray: 2,
|
|
}
|
|
};
|
|
|
|
const mixed4Chart = new ApexCharts(document.querySelector("#mixed4"), mixed4ChartOptions);
|
|
mixed4Chart.render();
|
|
|