Updating Chart.js Datasets - Array not re-initializing (Jquery / PHP) - php

Question

I am using Chart.js (v 3.3.2) to display a bar graph (myChart) with a dropdown filter. I have an event listener for my dropdown to update the PHP/SQL query to fetch the correct data - this works perfectly.
But my graph still displays the old data after the update (With disabling cache). The ajax function is POST'ing correctly. Following the chart.js docs on updating the datasets :: Updating Charts
I declare chart, label, data in my ajax: success function's params.
In my success function:
success: function (chart, label, data) {
myChart.data.labels.push(label); //Push the labels for chart
myChart.data.datasets.forEach((dataset) => { //Push data for each dataset
dataset.data.push(data); });
console.log(myChart.data.labels); // Log new labels
console.log(myChart.data.datasets);// Log new array
myChart.update(); // Update my chart
}
I look at the response from my PHP fetch file, and the correct data can be seen in the the inspector. But when looking at the data in my console log, I am still seeing the old data.

Answer 1

So I approached this all wrong. The select.on.change() should have been called outside the function, and when executing, call the showSuccessRate() function.
Here is the working code:
$(document).ready(function(){
$('#selectTop')
.on('change', // When the user changed the select option, run this
function () {
$('#clisuccessrate-chart').remove(); //Remove the chart canvas (because it would have loaded when document ready)
$('div#clisuccessrate-container').append('<canvas id="clisuccessrate-chart" height="200"></canvas>'); // Add the canvas back into the html
showSuccessRate(); // Call the function to draw the chart
})// end onchange event
showSuccessRate(); // Make the Bar Chart when document is ready
function showSuccessRate(){ // Build Bar Graph
{var selectedOption = $('#selectTop').children('option:selected').val(); // Get the value of the option, use this value to set limit in PHP SQL Query
$.ajax("database/cliSuccessFail-filter.php", {data: {topSelect: selectedOption} ,method:'POST', success: function (data) {
console.log('The selected option value is: ' + selectedOption); // Log the value to check response
var mx_cli = [];
var mx_success = [];
var mx_failure = [];
var mx_attempts = [];
// ^ Declare empty array
for (var i in data) {
mx_cli.push(data[i].mx_cli);
mx_success.push(data[i].mx_success);
mx_failure.push(data[i].mx_failure);
mx_attempts.push(data[i].mx_attempts);
};
// ^ Populate the arrays
var csf_datasets = {
labels: mx_cli, // Assign label
datasets: [{
backgroundColor: '#007bff',
borderColor: '#007bff',
data: mx_success,
label: 'Successful'
},
{
backgroundColor: '#ced4da',
borderColor: '#ced4da',
data: mx_failure,
label: 'Unsuccessful'
}
]
};
var csf_options = {
maintainAspectRatio: false,
};
var csf_config = {
type: 'bar',
data: csf_datasets, // Bind dataset
options: csf_options, // Bind options
}
var $cliSuccessRateChart = $('#clisuccessrate-chart'); // Get the canvas ID
var myChart = new Chart($cliSuccessRateChart, csf_config); // Draw the chart
} }) // END POST
}
}// END FUNCTION showSuccessRate
}); //End document.ready()