Donut chart example

An example of a Google Donut Chart.

by Renan Ribeiro Brando

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="donut_single"></div>
       <div class="doughnut-value">lol</div>

CSS

.doughnut-value {
  height: 150px;
  line-height: 150px;
  padding-top: 8px;
  position: absolute;
  text-align: center;
  top: 0;
  vertical-align: middle;
  width: 150px;
}

JavaScript

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     80],
          ['My all',     20],
        ]);

        var options = {
        	width: 150,
          height: 150,
          backgroundColor:'transparent',
          chartArea:{
            width:'80%',
            height:'80%'
          },
          colo
          pieHole: 0.5,
          pieSliceBorderColor: "none",
          pieSliceText: 'none',
          legend: 'none',
          tooltip: {
            trigger: "none"
          }
        };
        

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