Donut chart example

An example of a Google Donut Chart.

by Loxos

HTML

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

CSS

.total {
  position:absolute;
  left:390px;
  top:210px;
  text-align:center;
  font-size:30pt;
  font-family:Calibri
}

JavaScript

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

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['Equity RICs', 172015],
          ['OPRA', 145541],
          ['Non-equity RICs', 111158],
          ['Brokers covered by separate contracts', 8942],
          ['Unknown',1766],
          ['Eurex',1385]          
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceText: 'none',
          pieStartAngle: 0,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'labeled',
          slices:[{color:'#bd0900'},{color:'#9dc10f'}],
          sliceVisibilityThreshold: 0.05
        };

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