Animation to google charts

Adding animation to google vizualisations (Column Chart)

by Guddu Kumar

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<div id="visualization"></div>

JavaScript

function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['Tracker', '1', '2', '3'],
        ['A', 475, 450, 190],
        ['B', 300, 290, 20],
        ['C', 360, 340, 120],
        ['D', 180, 170, 250]
    ]);
    
    // use a DataView to 0-out all the values in the data set for the initial draw
    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'number',
        label: data.getColumnLabel(1),
        calc: function () {return 0;}
    }, {
        type: 'number',
        label: data.getColumnLabel(2),
        calc: function () {return 0;}
    }, {
        type: 'number',
        label: data.getColumnLabel(3),
        calc: function () {return 0;}
    }]);
    
    // Create and draw the visualization.
    var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
    
    var options = {
        title:"Sub-Region vs Region vs Budget",
        legend: 'bottom',
        hAxis: {
            title: ""
        },
        animation: {
            duration: 1000
        },
        vAxis: {
            // set these values to make the initial animation smoother
            minValue: 0,
            maxValue: 600
        }
    };
    
    var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
        google.visualization.events.removeListener(runOnce);
        chart.draw(data, options);
    });
    
    chart.draw(view, options);
    
    // you can handle the resizing here - no need to recreate your data and charts from scratch
    $(window).resize(function() {
        chart.draw(data, options);
    });
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawVisualization});