i want to ask for some questions about chart.js. I have been create my dashboard with chart.js for showing my database on user interface, but. I have a little bug on Axis Y in chart.js, like double category. This is my dashboard picture
none
And this my syntax.
<script>
const canvas = document.getElementById('myChart');
const ctx = canvas.getContext('2d');
var chartData = {}; // Menyiapkan objek untuk menyimpan data chart
var myChart = new Chart(ctx, {
type: 'bar', // Menggunakan chart jenis bar
data: {
datasets: [{
label: 'Statistik Karyawan',
data: [],
backgroundColor: ['skyblue'], // Warna untuk masing-masing kategori
borderWidth: 1
}],
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des']
},
options: {
scales: {
y: {
beginAtZero: false,
ticks: {
callback: function(value, index, values) {
// Menampilkan label kategori sesuai index
return getCategoryLabel(value);
}
}
}
},
responsive: true, // Membuat chart responsif
maintainAspectRatio: true // Mengatur rasio aspek chart
}
});
// Fungsi untuk mendapatkan label kategori
function getCategoryLabel(value) {
// Menentukan label kategori sesuai nilai
if (value >= 0 && value <= 1) {
return 'Ringan';
} else if (value >= 2 && value <= 3) {
return 'Sedang';
} else if (value >= 4) {
return 'Berat';
} else {
return '';
}
}
// Fungsi untuk mengupdate chart dengan data baru
function updateChart(newData) {
myChart.data.datasets[0].data = newData.allData;
myChart.update();
}
// Fungsi untuk mengubah data chart saat terjadi perubahan
function onDataChanged() {
var newData = {
allData: [0, 1, 2, 3, 4, 5, 6, 7]
};
// Menggunakan objek untuk melacak kategori yang sudah ditambahkan
var addedCategories = {};
// Memproses data baru dan menambahkannya ke chart
newData.allData.forEach(function(value) {
var categoryLabel = getCategoryLabel(value);
// Menambahkan kategori ke chart hanya jika belum ada
if (!addedCategories[categoryLabel]) {
addedCategories[categoryLabel] = true;
myChart.data.datasets[0].data.push(value);
}
});
updateChart(newData);
}
onDataChanged();
</script>
I’m so confused about this bug, please help me.