asked on 11/2/2017

Semi circle donut using Google visualization

Hi Experts,

I'm building a reservation site for a nonprofit organisation. And I'd like to add a chart in the management section.
I try to create a semi circle donut chart that shows the status of occupation in percentage and numbers of chairs in a theater.
The maximum amount of chairs that can be occupied is 400. The data we have available is the amount of chairs occupied.

Can someone please help me to adapt the sample below so that it shows number of chairs and percentage of occupied and free chairs in this semi circle donut chart?

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
 
google.charts.load('current', {
  callback: function () {
    var data = [
      ['Task', 'Hours'],
      ['Occupied',  19.2],
      ['Free',  30.8],
      [null, 50.0]
    ];

    var total = 0;
    for (var i = 1; i < data.length; i++) {
      if (data[i][0] !== null) {
        total += data[i][1];
      }
    }

    var numberFormat = new google.visualization.NumberFormat({
      pattern: '#,##0.0',
      suffix: '%'
    });

    var dataTable = google.visualization.arrayToDataTable(data);
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      if (dataTable.getValue(i, 0) !== null) {
        dataTable.setFormattedValue(i, 1);
      }
    }

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    var options = {
	  title: 'Status of chairs',
      height: 400,
      chartArea: {
        top: 24
      },
      colors: ['#8BC34A', '#64B5F6'],
      pieHole: 0.4,
      pieStartAngle: 270,
      pieSliceText: 'label',
      slices: {
        2: {
          color: 'transparent'
        }
      },
      theme: 'maximized',
      width: 400
    };

    chart.draw(dataTable, options);
  },
  packages: ['corechart']
});

    </script>
  </head>
  <body>

    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

Open in new window

Google JavaScript * chart

Last Comment

Julian Hansen

11/3/2017

Julian Hansen

11/2/2017

Which part do you need help with

    var data = [
      ['Task', 'Hours'],
      ['Occupied',  19.2],
      ['Free',  30.8],
      [null, 50.0]
    ];

Open in new window

This is where you set your data as

Occupied: Occupied / 400 * 50 
Free: (400-Occupied) / 400 * 50

Open in new window

Steynsk

11/2/2017

ASKER

Thank you Julian I've changed the code into:

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
var Occupied = 225 / 400 * 50
var Free = (400-225) / 400 * 50
google.charts.load('current', {
  callback: function () {
    var data = [
      ['Label', 'Value*2'],
      ['Occupied', Occupied ],
      ['Free',  Free ],
      [null, 50.0]
    ];

    var total = 0;
    for (var i = 1; i < data.length; i++) {
      if (data[i][0] !== null) {
        total += data[i][1];
      }
    }

    var numberFormat = new google.visualization.NumberFormat({
      pattern: '#,##0.0',
      suffix: '%'
    });

    var dataTable = google.visualization.arrayToDataTable(data);
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      if (dataTable.getValue(i, 0) !== null) {
        dataTable.setFormattedValue(i, 1);
      }
    }

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    var options = {
	  title: 'Status of chairs',
      height: 400,
      chartArea: {
        top: 24
      },
      colors: ['#8BC34A', '#64B5F6'],
      pieHole: 0.4,
      pieStartAngle: 270,
      pieSliceText: 'label',
      slices: {
        2: {
          color: 'transparent'
        }
      },
      theme: 'maximized',
      width: 400
    };

    chart.draw(dataTable, options);
  },
  packages: ['corechart']
});

    </script>
  </head>
  <body>

    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>