title: Startup animation from left to right in google line chart
body: <pre><code>     google.charts.load('current', {
        packages: ['corechart', 'controls']
      }).then(function () {
        var dashboard = new google.visualization.Dashboard(
          document.getElementById('dashboard')
        );
  
         var control = new google.visualization.ControlWrapper({
           'controlType': 'ChartRangeFilter',
           'containerId': 'control',
           'options': {
             // Filter by the date axis.
             'filterColumnIndex': 0,
             'ui': {
               'chartType': 'LineChart',
               'chartOptions': {
                 'chartArea': {'width': '84%'},
                   'hAxis': {'baselineColor': 'none', format: "dd.MM.yyyy" }
               }
             }
           },
         });
  
         var chart = new google.visualization.ChartWrapper({
           'chartType': 'LineChart',
           'containerId': 'chart',
           'options': {
               animation:{
                 startup:true,
              duration: 1000,
              easing: 'out'
            },
             tooltip: {isHtml: true},
             lineWidth: 4,
             legend: {position: 'none'},
             // Use the same chart area width as the control for axis alignment.
             'chartArea': {'height': '80%', 'width': '84%',interpolateNulls: true},
             hAxis: {
                title: ''
              },
              vAxis: {  format :&lt;?php echo "'#.## ".html_entity_decode($currencyhtml[$userCurrency])."'"; ?&gt;,
                          viewWindowMode:'pretty',
              gridlines: {
                count: 4,
              },
                         'slantedText': false,
                title: ''
              },
           }
           // Convert the first column from 'date' to 'string'.
  
         });
  
  
  
      var data = new google.visualization.DataTable();
              data.addColumn('date', 'Time of Day');
              data.addColumn('number', 'Value');
              data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
  
  
             var rawData = [
  
  [new Date(2019,01,01), 1.00, 'example tooltip'],
  [new Date(2019,01,03), 1.03, 'example tooltip'],
  [new Date(2019,01,05), 2.00, 'example tooltip'],
  [new Date(2019,01,07), 1.30, 'example tooltip'],
  [new Date(2019,01,09), 1.00, 'example tooltip'],
  [new Date(2019,01,11), 2.00, 'example tooltip'],
  [new Date(2019,01,13), 1.10, 'example tooltip'],
  [new Date(2019,01,15), 1.50, 'example tooltip'],
  [new Date(2019,01,17), 1.20, 'example tooltip'],
  [new Date(2019,01,19), 3.00, 'example tooltip'],
  [new Date(2019,01,21), 1.30, 'example tooltip'],
  [new Date(2019,01,23), 1.25, 'example tooltip']
  
              ];
  
        dashboard.bind(control, chart);
  
        drawChart();
        setInterval(drawChart, 1200);
  
        var rowIndex = 0;
        function drawChart() {
          if (rowIndex &lt; rawData.length) {
            data.addRow(rawData[rowIndex++]);
            dashboard.draw(data);
          }
        }
      });
  </code></pre>
  
  <p>its working great so far but I would like to implement this startup animation ( <a href="https://stackoverflow.com/questions/39797001/google-visualization-animated-line-graph-incremental-rather-than-all-at-once">Google Visualization: Animated Line Graph --incremental rather than all at once?</a> ) in my example. I tried to place </p>
  
  <pre><code>drawChart();
      setInterval(drawChart, 1200);
  
      var rowIndex = 0;
      function drawChart() {
        if (rowIndex &lt; rawData.length) {
          data.addRow(rawData[rowIndex++]);
          chart.draw(data, options);
        }
      }
  </code></pre>
  
  <p>on the correct spot but the graph is not drawing at all :(. Anyone know what I have to do in my example to get this nice startup animation from left to right.</p>