Highcharts loading data and not plotting

Question

I'm trying to load data dynamically into Highcharts but I'm having problems. I tried to do this in a lot of ways and the data seems to be loaded to the JS but the graph is not plotted.

Currently this is my code in jQuery's document ready function:

options = {
    chart: {
        renderTo: 'container',
        zoomType: 'x',
        animation: true,
    },
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    xAxis: {
        type: 'datetime',
        title: {
            text: null
        },
    },
    yAxis: {
        title: {
            text: 'Size',
        },
    },
    legend: {
        enabled: false
    },

   series: [{
        data: []
    }]
}

$.ajax({
        type: "GET",
        url: "works/load_data.php",
        data: "id=3&mdate=2012-02&mxdate=2012-03",
        success: function (items) {

            var obj = eval(items).load;
            var series = { data: [] };

            $.each(obj, function (itemNo, item) {
                series.data.push(item);
            });

            options.series.push(series);

        },
        cache: false,
});
var chart = new Highcharts.Chart(options);

Nothing happens on the graph. But if I log to console the chart options I get this:

enter image description here

My PHP is echoing the data like this: data = {load:[ {x: Date.UTC(2012,2,1,7,15), y: 0.012},{x: Date.UTC(2012,2,1,7,30), y: 0.068} ... ]}

Seem to be OK, to me at least. But it's not working :( Can someone tell me what I'm doing wrong?? Thanks.

Some kind of live demo is always handy :).

Styxxy
– Styxxy

2012-05-14 20:07:36 +00:00
Commented May 14, 2012 at 20:07 — Styxxy
– Styxxy, Commented May 14, 2012 at 20:07
@Styxxy hard to, due to the ajax get request.

TCB13
– TCB13

2012-05-14 20:16:44 +00:00
Commented May 14, 2012 at 20:16 — TCB13
– TCB13, Commented May 14, 2012 at 20:16

Mike Robinson · Accepted Answer · 2012-05-14 20:19:46Z

2

AJAX is asynchronous, meaning the call happens after you render the chart. Trying sticking the chart creation after your success event, like so:

$.ajax({
        type: "GET",
        url: "works/load_data.php",
        data: "id=3&mdate=2012-02&mxdate=2012-03",
        success: function (items) {

            var obj = eval(items).load;
            var series = { data: [] };

            $.each(obj, function (itemNo, item) {
                series.data.push(item);
            });

            options.series.push(series);


            var chart = new Highcharts.Chart(options);

        },
        cache: false,
});

answered May 14, 2012 at 20:19

Mike Robinson

25.2k8 gold badges63 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Robinson Over a year ago

@TCB13 No problem. By the way, you shouldn't use eval (look up "eval is evil"), and instead consider JSON.parse().

Collectives™ on Stack Overflow

Highcharts loading data and not plotting

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related