CODEWITHSUNDEEP
ajaxhighcharts
Dan Twining
Dan Twining

Reputation: 650

Highchart Not Updating With Returned Ajax Data Object

I've recently started playing around with Highchards which is really impressive, but I'm having problems getting a chart to update with data returned from a jQuery Ajax request.

My code is as follows:

$.ajax({
type: "POST",
url: "scripts/ajax_testDetails.php",
async: true,
cache: false,
dataType: 'json',
timeout: 30000,
data: "TestID=" + TestID,
success: function(data) {

if(data.Status == "Success"){

    document.title = data.FirstName + " " + data.LastName;  // This works fine
    $('input[name=TestDate]').val(data.TestDateFormat); // This works fine too

    console.log("Accuracy2: " + data.Accuracy2);        // This works fine
    console.log("TPR2: " + data.TPR2);          // This works fine too

    var Accur1 = 6;                 // Used to debug, works fine in chart.series[0].setData()
    var NewStuff = new Array(25,15,8,18,5);     // Used to debug, works fine in chart.series[3].setData()
    var Accuracy3 = data.Accuracy2          // Used to debug, returns 'undefined' when used in chart.series[0].setData()

    var chart = $('#HeartGraph').highcharts();

    // Anything that use the data object here shows as 'undefined' in yData and doesn't change the graph
    chart.series[0].setData([randomBetween(1,10),Accur1,data.Accuracy2,Accuracy3,randomBetween(1,10)],false);
    chart.series[3].setData([NewStuff[0],NewStuff[1],randomBetween(1,10),data.TPR2,data.TPR3],false);

    chart.redraw();                 // When redraws, values change except for the ones that use the data. object!

}

});

As you can see, I play around with the success data object and confirm its all ok, but when I try to use the data in the chart.series[].setData() function it doesn't work. Test values seem to work fine though. Really strange and very confusing!

Any advice is greatly appreciated.

Dan

Upvotes: 0

Views: 772

Answers (1)

SteveP
SteveP

Reputation: 19093

One possibility is that your json data contains strings rather than numbers. This can cause a problem with data series. Try converting to numbers, either in the server, or in javascript like this:

chart.series[0].setData([
   randomBetween(1,10),
   Accur1 * 1,
   data.Accuracy2 * 1,
   Accuracy3 * 1,
   randomBetween(1,10)],false);

The '*1' converts a string value to a numeric one.

Upvotes: 1

Related Questions