Google chart animation

animation which is showing transition from one state to another. You can either change the data or change the chart options to create the transition and its animation.

by suven_up

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
 <button type="button" id="b1" onclick="init();" >Click me!</button>  
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        
        <body>
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
      </body>

JavaScript

google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(init);
        function init(){
              var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                         'Rwanda', 'Average'],
                        ['2004/05', 165, 938, 522, 998, 450, 114.6],
                        ['2005/06', 135, 1120, 599, 1268, 288, 382],
                        ['2006/07', 157, 1167, 587, 807, 397, 623],
                        ['2007/08', 139, 1110, 615, 968, 215, 409.4],
                        ['2008/09', 136, 691, 629, 1026, 366, 569.6]];
            var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                             'Rwanda', 'Average'],
                            ['2004/05', 122, 638, 722, 998, 450, 614.6],
                            ['2005/06', 100, 1120, 899, 1268, 288, 682],
                            ['2006/07', 183, 167, 487, 207, 397, 623],
                            ['2007/08', 200, 510, 315, 1068, 215, 609.4],
                            ['2008/09', 123, 491, 829, 826, 366, 569.6]];

            // Create and populate the data tables.
            var data = [];
            data[0] = google.visualization.arrayToDataTable(rowData1);
            data[1] = google.visualization.arrayToDataTable(rowData2);

            var options = {
              width: 400,
              height: 240,
              vAxis: {title: "Cups"},
              hAxis: {title: "Month"},
              seriesType: "bars",
              series: {5: {type: "line"}},
              animation:{
                duration: 500,
                easing: 'out'
              },
            };
            var current = 0;
            // Create and draw the visualization.
            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
            var button = document.getElementById('b1');
            function drawChart() {
              // Disabling the...