151 lines
3.9 KiB
JavaScript
151 lines
3.9 KiB
JavaScript
/* Earnings Report Chart */
|
|
var element = document.getElementById("courses-earnings");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var options = {
|
|
series: [{
|
|
name: "Earnings",
|
|
data: [30, 25, 36, 30, 45, 35, 64, 51, 59, 36, 39, 51]
|
|
}, {
|
|
name: "Students",
|
|
data: [33, 21, 32, 37, 23, 32, 47, 31, 54, 32, 20, 38]
|
|
}],
|
|
chart: {
|
|
height: 340,
|
|
type: "bar",
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
width: [1.1, 1.1],
|
|
show: true,
|
|
curve: ['smooth', 'smooth'],
|
|
},
|
|
grid: {
|
|
borderColor: '#f3f3f3',
|
|
strokeDashArray: 3
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
color: 'rgba(119, 119, 142, 0.05)',
|
|
},
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
markers: {
|
|
size: 0
|
|
},
|
|
colors: ["rgb(132, 90, 223)", "#e9e9e9"],
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: "50%",
|
|
borderRadius: 2,
|
|
}
|
|
},
|
|
};
|
|
var chart1 = new ApexCharts(document.querySelector("#courses-earnings"), options);
|
|
chart1.render();
|
|
}
|
|
|
|
function earningsReport() {
|
|
chart1.updateOptions({
|
|
colors: ["rgb(" + myVarVal + ")", "#e9e9e9"],
|
|
})
|
|
}
|
|
/* Earnings Report Chart */
|
|
|
|
/* Payouts Chart */
|
|
var element = document.getElementById("course-payouts");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var options2 = {
|
|
series: [{
|
|
name: 'Paid',
|
|
data: [55, 55, 42, 42, 55, 55, 38, 38, 53, 53, 35, 35],
|
|
type: 'line',
|
|
}, {
|
|
name: 'UnPaid',
|
|
data: [35, 35, 46, 46, 35, 35, 48, 48, 33, 33, 38, 38],
|
|
type: "line",
|
|
}],
|
|
chart: {
|
|
height: 270,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
background: 'none',
|
|
fill: "#fff",
|
|
},
|
|
grid: {
|
|
borderColor: '#f2f6f7',
|
|
},
|
|
colors: ["rgb(132, 90, 223)", "rgba(230, 83, 60,0.5)"],
|
|
background: 'transparent',
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2,
|
|
dashArray: [0, 5],
|
|
},
|
|
xaxis: {
|
|
type: 'month',
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: 'top',
|
|
},
|
|
xaxis: {
|
|
show: false,
|
|
axisBorder: {
|
|
show: false,
|
|
color: 'rgba(119, 119, 142, 0.05)',
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
borderType: 'solid',
|
|
color: 'rgba(119, 119, 142, 0.05)',
|
|
width: 6,
|
|
offsetX: 0,
|
|
offsetY: 0
|
|
},
|
|
labels: {
|
|
rotate: -90,
|
|
}
|
|
},
|
|
yaxis: {
|
|
show: false,
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
}
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
format: 'dd/MM/yy HH:mm'
|
|
},
|
|
},
|
|
};
|
|
var chart2 = new ApexCharts(document.querySelector("#course-payouts"), options2);
|
|
chart2.render();
|
|
}
|
|
|
|
function coursePayouts() {
|
|
chart2.updateOptions({
|
|
colors: ["rgb(" + myVarVal + ")", "rgba(230, 83, 60,0.5)"],
|
|
})
|
|
}
|
|
/* Payouts Chart */
|