Re-animate chart inside JQuery tab

[tcodeuser]

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.

[Priyanka M S]

@tcodeuser

Chart animates only on first chart render as of now. We will reconsider this behavior to animate chart every-time it renders for future releases.

__
Priyanka M S
Team CanvasJS