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="center">
       <span>3.900</span> <br/> Total 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', 170],
          ['P : Dealing 3000 Matching displays',1],
          ['P : EBS Data Stream', 10],
          ['Money 3000', 3643],
          ['P: Price Feed Information', 24],
          ['S : AFMA - Australian Financial Markets Association Lt', 7],
          ['S : FBE Data - Permission for other vendors', 10]
        ]);

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

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