load c3 chart with remote data - ajax

Question

How can I load the chart with remote data using ajax request returning JSON encoded data?
Coding snippet:
var chart = c3.generate({
bindto:"#chartdivObservation",
data: {
columns: [
['loading', 30, 20, 50, 40, 60, 50],
]
}
});
$(document).on("change","#getObservation",function(){
var team_id=$(this).val();
var user_id=<?=$userId?>;
$.ajax({
url:"ajax/user/getDeltaStats.php",
type:"POST",
data:{
get:"getObservationReport",
teamId:team_id,
userId:user_id
},
success:function(response){
var data = $.trim(response)
setTimeout(function(){
chart.unload('loading');
console.log("loading chart...")
console.log(data)
chart.load({columns: data})
}, 4500)
console.log(chart)
}
});
});
The first column "loading" is the dummy data, so that the chart is rendered. Later, using timeout I'm loading it with new data (reference http://c3js.org/samples/data_load.html). But, the chart isn't getting rendered with the new data.
The response generated by the ajax request is:
[["Agenda",90,70,70,20,40,70,60,60,58,63],["Precise Praise",53,60,80,68,80,60],["Circulation & Radar",70,100,93,60,100,90,73,90,75,45,60,60,80,73,60]]

Answer 1

Here is an example which works fine for my application. Maybe that helps.
$(document).on("click", "#btnPDquant", function(event) {
$.ajax({
url: "PDQuantCalc",
type: "post",
data: $('#formPDquant').serialize(),
success: function(response){
var newdat = JSON.parse(response);
$("#divPDquant").text(newdat.PDquant[1]);
chart.x(newdat.year);
chart.load({
columns: [ newdat.PDquant ]
});
},
error: function (response) {
$("#divPDquant").text("error");}
});
event.preventDefault(); // Important! Prevents submitting the form.
});