title: Animating pie chart with Google Visualization
body: <p>I am experimenting with google charts. I want a pie chart to animate from 0% to 75% (see the image below). I am attempting to achieve this through google charts. I am creating two sets of data, one will start at 99%, the other at 1%. I want to invert and animate these. I have achieved changing the values through animation, but cannot figure out how to get them to animate.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
        google.load('visualization', '1.0', {'packages':['corechart']});
  
        google.setOnLoadCallback(drawChart);
  
        function drawChart() {
  
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'text');
          data.addColumn('number', 'number');
  
          data.addRows(2);
          data.setValue(0, 0, 'Work');
          data.setValue(0, 1, 1);
          data.setValue(1, 0, 'Eat');
          data.setValue(1, 1, 99);
  
          var options = {
                          width:500,
                          height:500,
                          animation: {duration: 1000, easing: 'out',}
                        };
  
          var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  
          chart.draw(data, options);
  
          function aniChart(d,o){
            for (var i=1; i&lt;100; i++) {
              data.setValue(0, 1, i);
            }
  
            for (var i=99; i&gt;00; i--) {
              data.setValue(1, 1, i);
            }
            setTimeout(function(){
              chart.draw(data, options);
            }, 1000);
  
          };
  
          aniChart();
  
        }
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="chart_div"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/KV5AK.png" alt="chart"></p>