Chart not reloading data from AJAX request.

[Tinman]

I am using the code from here: http://www.jchartfx.com/demo/64983802-edb8-e211-84a5-0019b9e6b500

This is working perfectly fine with my own data, but I have set of buttons that will send an AJAX request to a data file and get a response that should update the charts, but it does not seem to update properly. 

The chart code is more or less exactly the same as your example (I am just testing things to see if it works before I put time into it)

The below code is what happens when the one of the buttons are pressed (jquery)

function data_send(var1,event)

{

event.preventDefault();

$.post("graph_data.php", { 

company: var1,

dataType : "json",

})

.done(function(result) {

if(!result) {

return;

}

ChartWhole.setDataSource(result.d);

ChartWhole.getDataSourceSettings().reloadData();

ChartDetail.setDataSource(result.d);

ChartDetail.getDataSourceSettings().reloadData();

});

}; 

 

I tried using many variations of the bold code, but the charts do not want to update, the response from the request comes through (checks out with FireBug)

In a format like this, which is exactly the same format (not exactly the same values, it is the correct values) that shows on page load.

[{"Open":167,"Date":"2013-10-02T16:45:05.000Z"},{"Open":163,"Date":"2013-10-03T23:30:05.000Z"},{"Open":157,"Date":"2013-10-04T22:45:05.000Z"}

The above data does not seem to then be loaded into the two charts properly, first I did not use the reloadData() at all, but then when using setDataSource() did not work I looked for other things that I might have to do so I added the reloadData() into the mix, though its still not doing anything, I have also tried using both setDataSource(result.d) and setDataSource(result)

 I would be very appriciative of a solution to this issue. 

[JuanC]

I would try 2 or 3 things to try to isolate the problem

1) Comment all the lines trying to update the date for ChartWhole and ChartDetail and add a line that changes something simple in one of the charts, e.g. the gallery, obviously you want to make sure you set a gallery different than then one you are using

ChartWhole.setGallery(cfx.Gallery.Doughnut);  

2) If option 1 worked, try changing the chart's data to other "hardcoded" data, e.g.

 var newData = [{"Open":127,"Date":"2013-10-02T16:45:05.000Z"},{"Open":45,"Date":"2013-10-03T23:30:05.000Z"},{"Open":92,"Date":"2013-10-04T22:45:05.000Z"}];

ChartWhole.setDataSource(newData);

3) Add code to make sure result.d contains the data you expect (using alert and/or console.log), sometimes the function will be called with a string instead of a json object. Checking the documentation it would seem that the default for the $.post function is to make an intelligent guess so you want to make sure they are guessing right, the parameters you are passing to the URL (company and dataType) are only used by the server, it also seems you can pass a fourth parameter to specify the dataType so I would also test adding a fourth parameter "json" to the $.post parameter, e.g.

 

In my personal tests the browser did not guess right with a static php (maybe it uses a header and it does not inspect the URL contents) so I had to use "json" as the fourth parameter, doing an alert(result) will show different results with and without the fourth parameter.

 

$.post("data.php", {

company: "foo",

dataType : "json",

}, function(result) {

if(!result)

return;

        chart1.setDataSource(result);

},

"json");

 

 

JuanC