Home forums Using CanvasJS Re-animate chart inside JQuery tab

This topic contains 1 reply, has 2 voices, and was last updated by  Priyanka M S 4 months ago.

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

    tcodeuser
    Member

    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.

    #20761

    Priyanka M S
    Member

    @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

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

You must be logged in to reply to this topic.