Table2Chart

by Graham Walters

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://lightswitch05.github.io/table-to-json/javascripts/jquery.tabletojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="chart"></div>

<table id="tab">
  <tbody>
    <tr>
      <th>Rainfall</th>
      <th>Snow</th>
    </tr>
    <tr>
      <td>1</td>
      <td>4</td>
    </tr>
    <tr>
      <td>2</td>
      <td>1</td>
    </tr>
    <tr>
      <td>3</td>
      <td>1</td>
    </tr>
    <tr>
      <td>4</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

JavaScript

var table = $('#tab').tableToJSON();

var columns = [];
_.each(_.keys(table[0]), function(col) {
	var column = _.pluck(table, col);
  column.unshift(col)
  columns.push(column);
});

var chart = c3.generate({
  data: {
    columns: columns
  }
});