Fork me on GitHub

HighTables

HighTables makes it trivial to render charts from existing HTML tables using jQuery and Highcharts.

Quick Example

Here's a quick example of what you can do with HighTables.

Domestic Box Office Performance of the Batman Movie Franchise

The graphs above were rendered automatically (i.e., without any custom JavaScript) from a hidden HTML table (show).

Basic Usage

To render a chart from any table on your page using HighTables, you have two options.

Table-based approach

<table class="render-to-[_____]-chart">
  <!-- ... -->
</table>

Fill in the blank above with a valid chart type, e.g. line. A chart will be rendered automatically, just above the table, when the page loads.

Div-based approach

<div class="[_____]-chart" data-source="#chart-data"></div>

<!-- elsewhere on the page -->
<table id="chart-data">
  <!-- ... -->
</table>

The value of data-source should be a valid CSS selector (such as "#foo" or ".bar") which identifies the <table> element used to render the chart.

The second approach is more flexible than the first as it allows you to render multiple charts from the same table with different custom options. It also decouples the logic used to render your tables from your charting logic, making it possible to (for example) load tables asynchronously from one website and render charts from them on a completely different website.

Line Charts

<table class="render-to-line-chart">
  <!-- ... -->
</table>

<!-- or: -->
<div class="line-chart" data-source="#line-chart-source"></div>
<table id="line-chart-source">
</table>

By default, the first column will be used to label the X-axis of the chart, and each column after that will be represented as a data series.

For a spline, or smoothed line, use spline instead of line.

Web Browser Market Share

Month IE Firefox Chrome
2012-01 37.45 24.78 28.4
2012-02 35.75 24.88 29.84
2012-03 34.81 24.98 30.87
2012-04 34.07 24.87 31.23
2012-05 32.12 25.55 32.43
2012-06 32.31 24.56 32.76
2012-07 32.04 23.73 33.81
2012-08 32.85 22.85 33.59
2012-09 32.7 22.4 34.21
2012-10 32.08 22.32 34.77
2012-11 31.23 22.37 35.72
2012-12 29.84 22.24 36.66

Area Charts

<table class="render-to-area-chart">
  <!-- ... -->
</table>

<!-- or: -->
<div class="area-chart" data-source="#area-chart-source"></div>
<table id="area-chart-source">
</table>

Area charts work basically the same as line charts. For a stack chart, use stack instead of area.

Mobile OS Market Share

Quarter iOS Android BlackBerry Windows Phone
2012 Q3 23,550 122,480 8,947 4,058
2012 Q2 28,935 98,529 7,991 4,087
2012 Q1 33,121 81,067 9,939 2,713
2011 Q4 35,456 75,906 13,185 2,759
2011 Q3 17,295 60,490 12,701 1,702
2011 Q2 19,629 46,776 12,652 1,724
2011 Q1 16,883 36,350 13,004 1,600

Bar & Column Charts

<table class="render-to-bar-chart">
  <!-- ... -->
</table>

<!-- or: -->
<div class="bar-chart" data-source="#bar-chart-source"></div>
<table id="bar-chart-source">
</table>

By default, the first column of the table will be used for bar labels, and each remaining column will be rendered as a group of bars. The data-transpose option reverses this, using the first row for labels and each subsequent row as a group of bars.

Use column instead of bar to produce a bar chart with vertical bars, i.e., a column chart.

World's Top Oil Producers

Nation Oil Produced CO2 Emissions
Russia 10,540,000 1,688,688
Saudi Arabia 10,270,000 493,726
United States 9,688,000 5,492,170
Iran 4,252,000 574,667
China 4,073,000 8,240,958

Pie Charts

<table class="render-to-pie-chart">
  <!-- ... -->
</table>

<!-- or: -->
<div class="pie-chart" data-source="#pie-chart-source"></div>
<table id="pie-chart-source">
</table>

By default, the first column of the table will be used to name the slices of the pie, and the values in the last column will be used to determine the width of each slice.

U.S. National Budget

Category Budget (in billions)
Medicare/Medicaid $835
Social Security $725
Defense $700
Discretionary $646
Other Mandatory $465
Net Interest $227

Installation

To use HighTables on your website, simply include hightables.min.js (or hightables.js) after including jQuery and Highcharts:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.min.js"></script>
<script type="text/javascript" src="hightables.min.js"></script>

Options

Support for custom chart options is pretty limited right now:

In addition to these options, there is support for a more general customization mechanism: add the data-options attribute, and specify the name of a JavaScript function which returns an object with any Highcharts options you like.

Options Example

For instance, the chart on the right below is rendered with the attribute data-options="customOptions", where customOptions is the following JavaScript function:

function customOptions() {
  return {
    title: { text: "Gloomy Autumn Donut Version" },
    colors: ["#74A6BD", "#7195A3", "#D4E7ED", "#EB8540", "#B06A3B", "#AB988B"],
    plotOptions: {
      pie: {
        borderColor: "#000",
        borderWidth: 3,
        innerSize: "25%",
        shadow: false
      }
    }
  };
}
Category Budget (in billions)
Medicare/Medicaid $835
Social Security $725
Defense $700
Discretionary $646
Other Mandatory $465
Net Interest $227

API

HighTables will automatically render charts when the page loads. However, you can also render charts manually, e.g. if the content of your page is dynamic and/or you want to make charts update and re-render based on user actions.

To render a chart directly above a table, call HighTables.renderChartFromTable(table), where table is a raw <table> DOM element (not a jQuery object) with an appropriate render-to-[*]-chart class.

To render a chart within any arbitrary <div> with a [*]-chart class, call HighTables.renderChart(div).

You can also immediately re-render all charts on a page by calling HighTables.renderCharts().

So far there isn't much you can do to customize the HighTables library's default behavior. This will almost certainly change, but for now there's really only one configurable default option: the display of Highcharts links (off by default). To show Highcharts some love and turn the display on:

HighTables.includeHighchartsLinks = true;

API Example

Click the button below to load an HTML table via AJAX and render a chart from it.