Backfilling Highcharts chart with data from Ajax call

Question

I'm trying to create a live-updating Highcharts chart to monitor parameters, and I would like to also backfill this chart with data from a MySQL server.

Currently I have this function which is called in chart.events.load , which (hopefully eventually) adds a series to the chart with the SQL data:

function _initSeries(chart) {
    chart.addSeries({
        name: 'series1',
        data: (function() {
            // backfill data from MySQL
            let sqlData = [];

            _getMySqlData(function(result) {
                for (let i = 0; i < result.length; i += 1) {
                    sqlData.push({
                        x: result[i].milliseconds,
                        y: result[i].value
                    });
                }

                // preferrably I would return sqlData here but obviously that won't work
            });
            // return must be on this level
        }())
    });
}

The function to retrieve the data from the MySQL database works correctly, and returns an array of the values I want to push onto sqlData and return. Obviously, I can't return because I am within a callback, but then I'm unsure how to set the value of data from within the callback.

Answer 1

I figured this out by restructuring my code; instead of immediately calling chart.addSeries() , I called getMySqlData() . Within the callback for that, I was able to use the result of getMySqlData() in chart.addSeries() .

function _initSeries(key, chart) {
    _getMySqlData(key, function(result) {
        let sqlData = [];
        for (let i = 0; i < result.length; i += 1) {
            sqlData.push({
                x: result[i].milliseconds,
                y: result[i].value
            });
        }
        chart.addSeries({
            name: key,
            data: sqlData
        });
    });
}