How do I initialize HighChart series values with AJAX?

Question

I'm trying to dynamically initialize my HighChart series values before first data point is requested using ajax. I can't seem to figure out what is going wrong or if what I'm trying is even possible. Can someone please take a look and help?

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            marginRight: 10,
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Test'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 100,
        },
        yAxis: {
            title: {
                text: 'Test'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        series: [{
            //AJAX NOT WORKING HERE
            name: 'Random data',
            data: (function() {
                var data = [];
                $.ajax({
                    type: "GET",
                    url: "/test/random2.php",
                    data: "p=2",
                    dataType: "json",
                    async: false,
                    success: function(result){
                        var values = JSON.parse(JSON.stringify(result));
                        var time = (new Date()).getTime();
                        for (i = -19; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 60000,
                                y: values[i+19];
                            });
                        }
                    }
                });
                return data;})
        }]
    });        
});

UPDATED CODE Here is my working solution

    function doHighChart(data) {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'spline',
            marginRight: 10,
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Test'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 100,
        },
        yAxis: {
            title: {
                text: 'Test'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        series: [{
            name: 'Random data',
            data: data
        }]
    });        
}

    $(document).ready(function() {
    var data = [];

    $.ajax({
        type: "GET",
        url: "/test/random2.php",
        data: "p=2",
        dataType: "json",
        async: false,
        success: function(result){
            var values = JSON.parse(JSON.stringify(result));
            var time = (new Date()).getTime();
            for (i = -19; i <= 0; i += 1) {
                //data.push([i, -i]);
                //data.push("{x:" + (time + i * 1000) ", y: " + values[i+19] + "}");
                data.push([
                    time + i * 1000,
                    values[i+19]
                ]);
            }
            doHighChart(data);
        }
    });
});

Answer 1

您需要调用$ .ajax（）并在回调中初始化图表。