Pie Chart Example

An example of a Google Pie Chart.

by victorxpp

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="piechart" style="width: 900px; height: 500px;"></div>

JavaScript

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     1],
          ['Eat',      2],
          ['Commute',  3],
          ['Watch TV', 4],
          ['Sleep',    5]
        ]);

        var options = {
          title: 'My Daily Activities',
          animation: {
           		duration: 1000,
        			easing: 'in',
          		startup: true
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
        // initial value
        var percent = 0;
        // start the animation loop
        var handler = setInterval(function(){
            // values increment
            percent += 1;
            // apply new values
            data.setValue(0, 1, percent);
            // update the pie
            chart.draw(data, options);
            // check if we have reached the desired value
            if (percent > 74)
                // stop the loop
                clearInterval(handler);
        }, 30);
      }