Donut chart example

An example of a Google Donut Chart.

by Peter Galiba

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
       <div id="donut_single" style="width: 300px; height: 300px;"></div>

JavaScript

google.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
            ['Effort', 'Amount given'],
            ['breakfast D', 11],
            ['lunch D', 16],
            ['dinner D', 10],
            ['night D', 2],
            ['night H', 8],
            ['day H', 16],
            ['chimney S', 12],
            ['car S', 25],
            ['bus S', 34],
            ['factory S', 52]
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }