Donut chart example

An example of a Google Donut Chart.

by gdicerbo

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="center">
       <span>1.719</span> <br/> exclusive RICs
       </div>

SCSS

.center {
  position:absolute;
  top:220px;
  left:400px;
  text-align:center;
  font-family:calibri;
  font-size:15pt;
  span {
    font-size:40pt;
  }
}

JavaScript

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

        var data = google.visualization.arrayToDataTable([
          ['Data PAckage', 'exclusive usage'],
          ['P : All Private RDSs-DESKTOP ONLY', 102],
          ['P : Dealing 3000 Matching displays', 1],
          ['P : EBS Data Stream', 2],
          ['P : Money 3000',1599],
          ['P : Price Feed Information',14],
          ['S : AFMA - Australian Financial Markets Association Lt', 1]
        ]);

        var options = {
          pieHole: 0.55,
          pieSliceText: 'none',
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'labeled',
          slices:[{color:'#85a4cd'},{color:'#bd0900'},{color:'#9dc10f'},{color: '#9dc10f'}],
          sliceVisibilityThreshold: 0.01
        };

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