chartjs not update using select option in laravel - chart.js

Question

I have problem with my code that when I use select option in chartjs datasets
below is the html code
<div class="form-group">
<select name="tahun" id="tahun" class="form-control">
#for ($i = 2021; $i <= date('Y'); $i++)
<option #if ($i == date('Y')) <?php echo 'selected'; ?> #endif value="{{ $i }}">{{ $i }}</option>
#endfor
</select>
</div>
<div id="parent-canvas">
<canvas id="chartpendapatan" width="400" height="200"></canvas>
</div>
and the jquery code is below :
const ctxpendapatan = document.getElementById('chartpendapatan').getContext('2d');
const myChartpendapatan = new Chart(ctxpendapatan, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: 'Pendapatan Desa',
data: [],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
y: {
beginAtZero: true
}
}
}
});
var getData = function() {
var tahun = $("#tahun").val();
$.ajax({
url: "{{ url('/grafik_pendapatan') }}" + '/' + tahun,
type: "GET",
dataType: "JSON",
success: function(data) {
$.each(data.result, function(id, value) {
myChartpendapatan.data.labels.push(value.nama_bidang);
myChartpendapatan.data.datasets[0].data.push(value.total_anggaran);
});
myChartpendapatan.update();
},
error: function() {
alert("Tidak Ada Data");
}
});
};
const brgy = document.getElementById('tahun');
brgy.addEventListener('change', getData);
the output of my code is :
It's the data after I select year 2021
but after I select again year 2022 the output below :
first time whe I click year 2021, display 4 data in chart because in the database there are four data. but after I click year 2022, the data in 2021 still exist and data 2022 display also. so my question how to not display previous data after I select another year?

Answer 1

You push to the labels and data array, if you dont want to show previous data you need to remove this data first or just entirly override the array:
success: function(data) {
myChartpendapatan.data.labels = [];
myChartpendapatan.data.datasets[0].data = [];
$.each(data.result, function(id, value) {
myChartpendapatan.data.labels.push(value.nama_bidang);
myChartpendapatan.data.datasets[0].data.push(value.total_anggaran);
});
myChartpendapatan.update();
},