Question

I’m having trouble finding out what is wrong with how I’m setting the chart series in Highcharts. The chart outline renders but the series doesn’t which indicates something wrong with the data set. After being parsed, the JSON data being pulled in looks fine (the commented out hard coded data block near the top is how the data should look), I’ve reviewed the Highcharts API and tried other methods to no avail. I’m wondering if I’m just pushing the data in wrong? My javascript/jquery knowledge is very basic. Thanks!

 data.push([xval, yval]);

Jsfiddle link

Answer 1

Modified you code so that the graph gets render http://jsfiddle.net/u4kaC/13/

You should have cerated the graph in the callback of

$.getJSON(...)

I’ve moved this code

var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container'
                },
                xAxis: {
                    type: 'datetime'
                },
                series: [{
                    data: data
                }]

right after you construct your “data” array.
The problem was that you were trying to draw the graph before the callback of the getJson(..) function was triggered and the “data” object created and this resulted in the “data” object always being empty, hence the graph wasn’t getting drawn 🙂

Here’s how the function should look

$.getJSON('http://api.cosm.com/v2/feeds/79903/datastreams/Temperature.json?start=2012-10-31T14:01:46Z&end=2012-11-03T17:01:46Z&interval=3600?key=dNSiSvXZtR6QBUqbzll4CCgnngGSAKxIQVFSeXBneGpqWT0g', 
        function(inData) 
        {
            var xval = new Date();
            dateStart = Date.parse(inData.datapoints[0].at);
            for (i=0; i<inData.datapoints.length; i++)
            {
                var yval = parseFloat(inData.datapoints[i].value);
                xval = Date.parse(inData.datapoints[i].at);
                var x = [xval, yval];                   

                data.push({x: xval, y:yval});


             });

             var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container'
                },
                xAxis: {
                    type: 'datetime'
                },
                series: [{
                    data: data
                }]
               }
             });