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>4.147</span> <br/> Service Usage
       </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'],
          ['DDSCONTRIB_muc', 28],
          ['DDSKONDOR', 24],
          ['DDSKONDOR_muc', 66],
          ['DDSRCO_muc', 129],
          ['IDN_DELECTFEED', 3900]
        ]);

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

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