title: On load Google LineChart animation
body: <p>I'm trying to implement loading animation of chart using transition animations by adding rows and refreshing the chart. But it behaves completely differently from what I expect.
  Here is the Fiddle <a href="http://jsfiddle.net/jATUX/" rel="nofollow">http://jsfiddle.net/jATUX/</a>
  Some code:</p>
  
  <pre><code>google.load('visualization', '1', { packages: ['corechart'], callback: function() {
          var data = new google.visualization.DataTable();
          data.addRows(5);
  
          data.addColumn('string', '');
          data.addColumn('number', 'Sales');
  
          var options = {
              title: 'Sales by months for 2013 year', curveType: 'function',
              "vAxis": { "minValue": "0" }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5",
              animation: { duration: 1000 }
          };
          var chart = new google.visualization.LineChart(document.getElementById('test'));
  
          var index = 0;
          var chartData = [
              ['Jan', 5 ], ['Feb', 1], ['Mar', 4], ['Apr', 2], ['May', 3]
          ]
          var drawChart = function() {
              console.log('drawChart index ' + index);
              if (index &lt; chartData.length) {
                  data.addRows([chartData[index++]]);
                  chart.draw(data, options);
              }
          }
  
          google.visualization.events.addListener(chart, 'ready', drawChart);
          chart.draw(data, options);
      }});
  </code></pre>