Highcharts data series issue with ajax/json and PHP

Question

This is my first request here, and I\'ve read many of the other related posts on this same issue, but I\'m STILL getting stuck and pretty much at my wits end on this... So a

Answer 1

SOLVED:

I found an answer that finally worked! Frustrating that it took me several days because it wasn't well documented by Highcharts (and/or maybe my understanding of jQuert and JavaScript is still at a novice level).

The answer is do not send the X/Y data as a preformed array in your json object, but instead simply send the numbers that make up the Date (x value) and the Value (y value) as a list of comma separated values in a json object, and then do the parsing and pushing on the client end.

For example: I originally was trying to get my PHP to send something like

[{"name":"Name 1","data":["[Date.UTC(2011,11,08), 4 ]","[Date.UTC(2011,11,09), 4 ]","[Date.UTC(2011,11,10), 4 ]","[Date.UTC(2011,11,11), 4 ]","[Date.UTC(2011,11,14), 3 ]"]}

but what I really needed to do was send something like

[{"name":"Name 1","data":["2011,11,08, 4","2011,11,09,4"....`

The first step is to make sure you have the "series" option set to an empty array series: []

(I mention this because I've seen other answers where this was done differently).

Then in your getJSON function, you need to create a new object for each object you're pulling in, which also includes an empty "data" array (see "var series" below).

Then nest a few $.each loops to parse and push the data into their necessary arrays, and populate the "name" of each object:

    $.getJSON('http://exmaple.com/getdata.php?ID=' + id, function(data) {           
        $.each(data, function(key,value) {
            var series = { data: []};
            $.each(value, function(key,val) {
                if (key == 'name') {
                    series.name = val;
                }
                else
                {
                    $.each(val, function(key,val) {
                        var d = val.split(",");
                        var x = Date.UTC(d[0],d[1],d[2]);
                        series.data.push([x,d[3]]);
                    });
                }
            });
            options.series.push(series);
        });

After the above code, you need to instantiate the chart:

var chart = new Highcharts.Chart(options);

And that should be it!

Hopefully somebody else finds this answer useful and doesn't need to beat themselves over the head for days trying to figure it out. :-)