I'm currently working on updating a dojo Pie chart using the updateSeries method. The method is called after an ajax request to retrieve an updated JavaScript array data.
Below is the JavaScript code:
var eventByReasonsData = .... //data is populated during JSP page compilation
var theme = dojox.charting.themes.Julie;
var eventReasonsChart = null;
function makeEventsByReason() {
var dc = dojox.charting;
eventReasonsChart = new dc.Chart2D("eventsByReasonChart");
eventReasonsChart.setTheme(theme).addPlot("default", {
type: "Pie",
font: "normal normal 8pt Tahoma",
fontColor: "black",
labelOffset: -20,
radius: 100
}).addSeries("eventSeries", eventByReasonsData);
var anim_a = new dc.action2d.MoveSlice(eventReasonsChart, "default");
var anim_b = new dc.action2d.Highlight(eventReasonsChart, "default");
var anim_c = new dc.action2d.Tooltip(eventReasonsChart, "default");
eventReasonsChart.render();
}
Here is the HTML code:
<div id="eventsByReasonChart" ></div>
And here is the JavaScript code for the AJAX call:
new Ajax.Request( url, {
method: 'post',
parameters: params,
onComplete: function(response) {
if( response.responseText != "empty" )
{
var chart = eventReasonsChart;
eventByReasonsData = response.responseText;
chart.updateSeries( "eventSeries", eventByReasonsData );
chart.render();
}
}
});
Lastly, here is the format of the data sent to the chart:
[{ y:48 },{ y:1 },{ y:1 },{ y:14 },{ y:7 },{ y:3 },{ y:8 }]
Initially, the chart is drawn without any issues. However, after the AJAX call, the chart disappears after the update call without any visible errors on the console.
Any ideas on what might be causing this issue?