Parametric Table to Chart converter

This snippet reads data from tables and 'data-' attributes and renders the corresponding charts in the same container using Google Visualization.

by Vikram Deshmukh

HTML

<script src="//www.gstatic.com/charts/loader.js"></script>
<div class="chart-container">
  <div class="title">Canvas Usage (2016)</div>
  <div id="chart_div1" class="chart" data-chart-type="BarChart">
    <table border="1">
      <thead>
        <tr>
          <th>&nbsp;</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 id="chart_div2" class="chart" data-chart-type="ColumnChart">
    <table border="1">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>Spring 2015</th>
          <th>Summer 2015</th>
          <th>Winter 2015</th>
          <th>Fall 2015</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>
<div class="chart-container">
  <div class="title">Canvas Usage (2015)</div>
  <div id="chart_div3" class="chart" data-chart-type="GroupedColumnChart">
    <table border="1">
    ...

CSS

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

.chart-container .title {
  background-color: #555;
  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);


var CHART_WIDTH = 280;
var COLOR_PALETTE = ['#358fc5', '#136ea3', '#005a8b', '#57afe7', '#79cff9'];

function drawBasic() {

  $(".chart-container .chart").each(function() {
    $(this).closest(".chart").css("width", CHART_WIDTH + "px");

    var headers = [];
    $(this).find("table thead th").each(function(i, v) {
      headers.push($(this).text());
    });
    $(this).find("table tbody tr").each(function(i, v) {
      var temp = [];
      var title;
      $(this).children('td').each(function(ii, vv) {
        if (ii)
          temp[ii] = ['', Number($(this).text()), headers[ii]];
        else {
          title = $(this).text();
        }
      });
      if (temp.length)
        temp[0] = (['semester', 'value', {
          "role": "annotation"
        }]);

      var options = {
        title: title,
        chartArea: {
          left: "10%",
          width: '100%'
        }
      };
      $(this).closest(".chart").append("<div class='chart-row-" + i + "'></div>");

      var chart = new google.visualization.BarChart($(this).closest(".chart").find('.chart-row-' + i).get(0));
      chart.draw(google.visualization.arrayToDataTable(temp), options);
    });
    $(this).closest(".chart").find("table").remove();
  });
}