Hi, I have Canvasjs charts working within several JQuery Tabs. However, when a user clicks through the JQuery tabs, I would like my Canvasjs charts to re-aminate. At the moment, the charts only perform their animation once when the webpage loads. The animation is a nice visual feature which unfortunately the user cannot appreciate fully as they click through the JQuery tabs, and instead are presented with static charts.
I hope there is another way of getting a chart to recreate it’s animation rather than having to completely redraw it, especially as my charts are powered by a AJAX JSON request which pulls out 1000s of records from a data source. I wouldn’t want to have to repeat the AJAX request just to get the chart to re-animate.
At the moment my code looks like this (see below) and I’m wondering is there something I can do inside my function which re-renders the charts after each JQuery tab is clicked?
var dataPoints = [];
$.ajax({
type: 'GET',
url: '/dashboard/data/',
dataType: 'json',
success: function (data) {
var dps1 = [], dps2 = [];
for (var i = 0; i < data.length; i++) {
switch (data[i].name) {
case 'data1': dps2.push({ label: data[i].label, y: data[i].y });
break;
case 'data2': dps1.push({ label: data[i].label, y: data[i].y });
break;
}
}
dataPoints.push({ type: "column", dataPoints: dps1, name: "2016/ 17 Poor Responses", showInLegend: true });
dataPoints.push({ type: "column", dataPoints: dps2, name: "2017/ 18 Poor Responses", showInLegend: true });
var options = {
animationEnabled: true,
data: dataPoints
//other options not needed - demoware
};
var charts = [];
$(function () {
$("#tabs").tabs()
.on('tabsactivate', function (event, ui) {
var index = ui.newTab.index();
//alert(index);
chart.render();
});
});
var chart = new CanvasJS.Chart("chartContainer", options);
chart.render();
charts.push(chart);
}
});
Thanks for your help.
.
