title: Google Charts - animation transition example
body: <p>Take a looka t my JS below, for my drawChart function for a google chart.  This works as I expected.  HOWEVER, because <code>var chart ...</code> is inside the drawChart function, the animations do not work - instead google thinks it's creating a brand new chart each time, and just refreshes the chart.  </p>
  
  <p>I would like to do something like in their examples, where the data <strong>moves</strong> according to my settings (1000ms, default easing: linear).  Examples are here: <a href="https://developers.google.com/chart/interactive/docs/animation" rel="nofollow">https://developers.google.com/chart/interactive/docs/animation</a></p>
  
  <p>If I pull out the <code>var chart ...</code> from the <code>drawChart</code> function, I get a "<em>Chart not defined</em>" error.  Appreciate the help from anyone who has worked with google charts a lot.  Thanks for the help.</p>
  
  <pre><code>var chart = "notSet";
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(setGoogleData);
  google.setOnLoadCallback(drawChart);
  newValue = 0;
  var data = [];
  function setGoogleData(){
    data[0] = new google.visualization.DataTable(JSON_DATA_LOCATED_HERE);
    data[1] = new google.visualization.DataTable(JSON_DATA_LOCATED_HERE);
    var chart = new google.visualization.LineChart(document.getElementById('stopByTripChart'));
  }
  function drawChart() {
    if(chart == "notSet"){
      var chart = new google.visualization.LineChart(document.getElementById('stopByTripChart'));
    }
    var options = {"title":"Average Load Summary","titlePosition":"in","width":1100,"height":700,"hAxis.slantedTextAngle":90,"hAxis.position":"out","pointSize":5,"animation.duration":1000,"animation.easing":"linear","hAxis.showTextEvery":1,"hAxis.title":"Stops"};
    chart.draw(data[newValue], options);
  }
  function changeChart(){
    newValue = document.getElementById("chartNumber").value;
    drawChart();
  }
  </code></pre>