在HighCharts中，我无法显示从ajax调用返回的数据

Question

I'm trying to modify this example for my needs: http://goo.gl/DEyGtV

I'm making an ajax call which returns an output like this: &label=16:44:31&value=356

I want the label part to be the x axis and value part to be the y axis. Therefore, I have changed this bit,

var x = (new Date()).getTime(), // current time
y = Math.random();

with this,

var x;
var y;
$.ajax({
    cache: false,
    url: "http://localhost/pages/ReturnData.aspx",
    success: function (data) {
        var varArr = data.toString().split("&");
        x = varArr[1].split("=")[1];
        y = varArr[2].split("=")[1];
    }
});

Also this bit,

series: [{
            name: 'Random data',
            data: (function() {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -19; i <= 0; i++) {
                    data.push({
                        x: time + i * 1000,
                        y: Math.random()
                    });
                }
                return data;
            })()
        }]

With this:

series: [{
    name: 'Prim',
    data: (function () {
        // generate an array of random data
        var data = [],
        time = (new Date()).getTime(),
        i;
        for (i = -19; i <= 0; i++) {
            var xvar;
            var yvar;
            $.ajax({
                cache: false,
                url: "http://localhost/pages/ReturnData.aspx",
                success: function (data) {
                    var varArr = data.toString().split("&");
                    xvar = varArr[1].split("=")[1];
                    yvar = varArr[2].split("=")[1];
                }
            });
            data.push({
                x: xvar,
                y: yvar
            });
        }
        return data;
    })()
}]

Yet the plot is not drawn. I'm perfectly certain that the ajax call returns the data I need. Could you point out where i'm going wrong?

Many thanks in advance.

Answer 1

Don't do this in that way, it won't work. First call AJAX, and in callback for it create new chart. And don't use AJAX twenty times for the same points.

Checkout examples:

• http://www.highcharts.com/studies/live-server.htm
• http://www.highcharts.com/stock/demo/

Answer 2

You can use series's update method to update chart data:

$.ajax({
    cache: false,
    url: "http://localhost/pages/ReturnData.aspx",
    success: function (data) {
        // data manipulation here...
        chart.series[0].update({
           data: data
        });
    }
});

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-update/