117 lines
2.2 KiB
JavaScript
117 lines
2.2 KiB
JavaScript
const DATA_COUNT = 12;
|
|
const NUMBER_CFG = {count: DATA_COUNT, min: 500, max: 3000};
|
|
const ctx = document.getElementById('chartBankSampah').getContext('2d');
|
|
var gradientBSI = ctx.createLinearGradient(0, 0, 0, 1000);
|
|
gradientBSI.addColorStop(0, "rgba(36, 115, 50, 1)"); // hijau gelap
|
|
gradientBSI.addColorStop(1, "rgba(136, 194, 147, 1)"); // hijau muda
|
|
|
|
var gradientBSU = ctx.createLinearGradient(0, 0, 0, 1000);
|
|
gradientBSU.addColorStop(0, "rgba(56, 107, 202, 1)"); // biru gelap
|
|
gradientBSU.addColorStop(1, "rgba(138, 164, 242, 1)"); // biru muda
|
|
|
|
var gradientOfftaker = ctx.createLinearGradient(0, 0, 0, 1000);
|
|
gradientOfftaker.addColorStop(0, "rgba(247, 144, 9, 1)"); // orange
|
|
gradientOfftaker.addColorStop(1, "rgba(255, 219, 172, 1)"); // kuning lembut
|
|
const labels = [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July",
|
|
"August",
|
|
"September",
|
|
"October",
|
|
"November",
|
|
"December"
|
|
];
|
|
|
|
const data = {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: 'BSI',
|
|
data:
|
|
[
|
|
500,
|
|
500,
|
|
500,
|
|
500,
|
|
500,
|
|
500,
|
|
500,
|
|
500,
|
|
500,
|
|
500,
|
|
500,
|
|
500,
|
|
|
|
],
|
|
borderColor: '#247332',
|
|
backgroundColor: gradientBSI,
|
|
},
|
|
{
|
|
label: 'BSU',
|
|
data:[
|
|
800,
|
|
800,
|
|
800,
|
|
800,
|
|
800,
|
|
800,
|
|
800,
|
|
800,
|
|
800,
|
|
800,
|
|
800,
|
|
800,
|
|
],
|
|
borderColor: '#386BCA',
|
|
backgroundColor: gradientBSU,
|
|
},
|
|
{
|
|
label: 'Offtaker',
|
|
data:[
|
|
2000,
|
|
2000,
|
|
2000,
|
|
2000,
|
|
2000,
|
|
2000,
|
|
2000,
|
|
2000,
|
|
2000,
|
|
2000,
|
|
2000,
|
|
2000,
|
|
],
|
|
borderColor: '#F79009',
|
|
backgroundColor: gradientOfftaker,
|
|
}
|
|
]
|
|
};
|
|
|
|
const config = {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio:false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
},
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 4000 // <--- atur batas tertinggi chart
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
const myChart = new Chart(ctx, config);
|
|
|