An Example of a Google Bar Chart

by Vikram Deshmukh

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<p>
Comment out one line to see the HTML table added to DOM
</p>
<div class='chart-container'>
  <div class="title">
    Canvas Usage (2016)
  </div>
  <div class='chart' id="chart_div" data-chart-type="BarChart">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Spring 2016</th>
          <th>Summer 2016</th>
          <th>Winter 2016</th>
          <th>Fall 2016</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Courses</td>
          <td>3114</td>
          <td>416</td>
          <td>94</td>
          <td>3420</td>
        </tr>
        <tr>
          <td>Instructors</td>
          <td>1569</td>
          <td>355</td>
          <td>90</td>
          <td>1668</td>
        </tr>
        <tr>
          <td>Students</td>
          <td>31455</td>
          <td>6134</td>
          <td>1987</td>
          <td>34666</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class='chart-container'>
  <div class="title">
    Canvas Usage (2015)
  </div>
  <div class='chart' id="chart_div1" data-chart-type="BarChart">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Spring 2016</th>
          <th>Summer 2016</th>
          <th>Winter 2016</th>
          <th>Fall 2016</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Courses</td>
          <td>2747</td>
          <td>399</td>
          <td>87</td>
          <td>3187</td>
        </tr>
        <tr>
          <td>Instructors</td>
          <td>1413</td>
          <td>347</td>
          <td>88</td>
          <td>1572</td>
        </tr>
        <tr>
          <td>Students</td>
          <td>31210</td>
          <td>5805</td>
          <td>1833</td>
          <td>34698</td>
        </tr>

      </tbody>
    </table>
  </div>
</div>

CSS

.chart-container {
  width: 400px;
  display: inline-block;
  border: 1px solid #ccc;
  margin: 0px 10px 10px 0px;
}

.chart-container .title {
  background-color: #444;
  color: white;
  padding: 10px 10px;
}

.chart > table td:not(:first-child) {
  text-align: right;
}

JavaScript

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

google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {
  var optionsBarChart = {
    width: 400,
    height: 320,
    legend: {
      position: 'top',
      maxLines: 2
    },
    bar: {
      groupWidth: '75%'
    },
    isStacked: true
  };

  $(".chart-container .chart[data-chart-type='BarChart']").each(function() {
    var data = [];
    $(this).find("table tr").each(function(i, v) {
      var temp = Array();
      $(this).children('th').each(function(ii, vv) {
        temp.push($(this).text());
      });
      if (temp.length) data.push(temp);
      temp = [];
      $(this).children('td').each(function(ii, vv) {
        if (ii)
          temp[ii] = Number($(this).text());
        else
          temp[ii] = $(this).text();
      });
      if (temp.length)
        data.push(temp);
    });
    var newArray = data[0].map(function(col, i) {
      return data.map(function(row) {
        return row[i]
      })
    });
    newArray.forEach(function(d, i) {
      if (i) d.push('');
      else d.push({
        "role": 'annotation'
      });
    });
    //console.log(JSON.stringify(newArray));
    var data = google.visualization.arrayToDataTable(newArray);
    var chart = new google.visualization.BarChart(this);
    chart.draw(data, optionsBarChart);
  });
}