CODEWITHSUNDEEP
javascriptjqueryjsongoogle-visualization
user1477388
user1477388

Reputation: 21440

Animate Google Chart from JSON

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();
 });

Upvotes: 3

Views: 1489

Answers (2)

fncomp
fncomp

Reputation: 6198

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);

Upvotes: 4

Felipe Fonseca
Felipe Fonseca

Reputation: 1129

Maybe cause you're creating the chart everytime?

Try to make chart a global variable and try again

Upvotes: 5

Related Questions