Update chart from fetch API....>

[Scoobsky]

Hi everyone,

Im trying to refresh a chart after fetching data from MySQL but my updateChart function isnt being executed.

I know it's not being executed because the console.logs (displaying the Boo! and displaying the driversChartData array are not being displayed in the console.
I know there is data in the array because it consoles out the data if I do the console.log from outside the function.

Any idea why my function isnt being run after the if statement? (Ive tried removing the whole if statement in case it interfered but to no avail).

Must be a really single thing, but Im new to JS so any help would be greatly appreciated :)
If any of you can think of a more elegant way of updating the series, let me know... There is not much on Google out there for apexchart, especially when it comes to updating data from an API.

The two examples provided in the offical documentation are for JQuery and Axios, but I use neither of them, just plain old 'nilla javascript.

Thanks. M.

// On Page Load Event Listeners to populate initial Data
// These two event listeners load the Drivers & Constructors Charts
document.addEventListener('DOMContentLoaded', function () {
fetch('http://127.0.0.1:3000/driversChart')
.then(response => response.json())
.then(data => loadDriversChart(data['data']));
});
// place Event Listener for teams in here

function loadDriversChart(driversChartData) {
console.log(driversChartData);
const driversChartArea = document.querySelector("#driversChart");

if (driversChartData.length === 0) {
    var options = {
        chart: {
            height: 350,
            type: 'bar',
        },
        dataLabels: {
            enabled: true
        },
        series: [],
        title: {
            text: 'F1 Drivers Points Repartition',
        },
        noData: {
          text: 'Loading Drivers Chart...'
        }
      }
      
      var chart = new ApexCharts(
        document.querySelector("#driversChart"),
        options
      );
      
      chart.render();
}

// Data is fetched so update the Drivers' Chart
function updateChart(driversChartData) {
console.log('Boo!');
console.log(driversChartData);
driversChartArea.updateSeries( [ {
name: 'F1 Drivers Points Repartition',
data: driversChartData
} ] );
};
}