Home Forums Chart Support Re-animate chart inside JQuery tab

Re-animate chart inside JQuery tab

Viewing 2 posts - 1 through 2 (of 2 total)
  • #20753

    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 = [];
                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 });
                            case 'data2': dps1.push({ label: data[i].label, y: data[i].y });
                    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 () {
                          .on('tabsactivate', function (event, ui) {
                              var index = ui.newTab.index();
                    var chart = new CanvasJS.Chart("chartContainer", options);

    Thanks for your help.



    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.