title: Animate Google Chart from JSON
body: <p>All of the examples on how to animate don't cover if the chart is created by JSON data.  They all use static data.  (See <a href="https://developers.google.com/chart/interactive/docs/animation" rel="nofollow">Transition Animation</a>.)</p>
  
  <p>This is my code that gets my data via JSON.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      google.load("visualization", "1", { packages: ["corechart"] });
      google.setOnLoadCallback(drawChart);
  
      function drawChart() {
          $.post('/Weight/WeightAreaChartData', {}, function (data) {
              var tdata = new google.visualization.arrayToDataTable(data);
              var options = {
                  title: 'Weight Lost &amp; Gained This Month',
                  hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
                  vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } },
                  chartArea: { left: 50, top: 30, width: "75%" },
                  colors: ['#FF8100'],
                  animation:{
                      duration: 1000,
                      easing: 'in'
                  },
              };
  
              var chart = new google.visualization.AreaChart(
                  document.getElementById('chart_div')
              );
  
              chart.draw(tdata, options);
          });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have a button that redraws the chart successfully. However, it doesn't animate. How can I make the chart animate? Thank you for your help.</p>
  
  <pre><code> $('#myBtn').click(function () {
        drawChart();
   });
  </code></pre>