All of the examples on how to animate don't cover if the chart is created by JSON data. They all use static data. (See Transition Animation.)

This is my code that gets my data via JSON.

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        $.post('/Weight/WeightAreaChartData', {}, function (data) {
            var tdata = new google.visualization.arrayToDataTable(data);
            var options = {
                title: 'Weight Lost & Gained This Month',
                hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
                vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } },
                chartArea: { left: 50, top: 30, width: "75%" },
                colors: ['#FF8100'],
                animation:{
                    duration: 1000,
                    easing: 'in'
                },
            };

            var chart = new google.visualization.AreaChart(
                document.getElementById('chart_div')
            );

            chart.draw(tdata, options);
        });
    }
</script>

I have a button that redraws the chart successfully. However, it doesn't animate. How can I make the chart animate? Thank you for your help.

 $('#myBtn').click(function () {
      drawChart();
 });

All of the examples on how to animate don't cover if the chart is created by JSON data. They all use static data. (See Transition Animation.)

This is my code that gets my data via JSON.

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        $.post('/Weight/WeightAreaChartData', {}, function (data) {
            var tdata = new google.visualization.arrayToDataTable(data);
            var options = {
                title: 'Weight Lost & Gained This Month',
                hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
                vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } },
                chartArea: { left: 50, top: 30, width: "75%" },
                colors: ['#FF8100'],
                animation:{
                    duration: 1000,
                    easing: 'in'
                },
            };

            var chart = new google.visualization.AreaChart(
                document.getElementById('chart_div')
            );

            chart.draw(tdata, options);
        });
    }
</script>

I have a button that redraws the chart successfully. However, it doesn't animate. How can I make the chart animate? Thank you for your help.

 $('#myBtn').click(function () {
      drawChart();
 });

• javascript
• jquery
• json
• google-visualization

Share Improve this question Follow edited Jan 4, 2013 at 5:28 fnp 6,19833 gold badges3535 silver badges4343 bronze badges asked Sep 21, 2012 at 15:58 user1477388user1477388 21.5k3535 gold badges151151 silver badges275275 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Maybe cause you're creating the chart everytime?

Try to make chart a global variable and try again

As eluded to by @FelipeFonseca, you're overwriting the chart each time #myBtn is clicked. Try doing this instead:

(function (global, undef) {
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    var options = {
        title: 'Weight Lost & Gained This Month',
        hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
        vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } },
        chartArea: { left: 50, top: 30, width: "75%" },
        colors: ['#FF8100'],
        animation:{
            duration: 1000,
            easing: 'in'
        }
    };

    var chart;
    function drawChart() {
        $.post('/Weight/WeightAreaChartData', {}, function (data) {
            var tdata = new google.visualization.arrayToDataTable(data);

            if (!chart) {
                chart = new google.visualization.AreaChart(
                    document.getElementById('chart_div')
                );
            }

            chart.draw(tdata, options);
        });
    }

})(this);