An Example of a Google Bar Chart

by rdenver6

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart_div"><div>

JavaScript

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart","table","bar"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() 
{
        var data = google.visualization.arrayToDataTable([
          ['Project Type', 'Number of Project'],
          ['Commercial',     182],
          ['Government, Institutional and Community',      156],
          ['Hotel',  57],
          ['Industrial', 25],
          ['Mixed Use',    128],
          ['Others', 33],
          ['Residential',    397],
        ]);

        var options = {
	width: 1000,
  	height: 500,
	title: 'FIGURE 1 : DISTRIBUTION OF REGISTERED BEAM PLUS PROJECTS GROUPED BY PROJECT TYPE',
	colors: ['#6eab46', '#4270c1', '#a3a3a3', '#6e2e9d', '#e97c30', '#e3e3e3', '#fbbd00'],
	chartArea: {width: '70%', height: '70%', left:0},
	is3D: true
};

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
</script>

    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart","table","bar"]});
      google.setOnLoadCallback(drawChart1);

      function drawChart1() 
{
        var data = google.visualization.arrayToDataTable([
          ['Project Type', 'Number of Project'],
          ['Commercial',     84],
          ['Government, Institutional and Community',      75],
          ['Hotel',  29],
          ['Industrial', 14],
          ['Mixed Use',    63],
          ['Others', 11],
          ['Residential',    28],
        ]);

        var options = {
	width: 1000,
  	height: 500,
	title: 'FIGURE 2 : DISTRIBUTION OF ASSESSED BEAM PLUS PROJECTS GROUPED BY PROJECT TYPE',
	colors: ['#6eab46', '#4270c1', '#a3a3a3', '#6e2e9d', '#e97c30', '#e3e3e3',...