Tablechart is a jQuery plugin that scrapes HTML tables and generates charts with jqPlot.
Requires jqPlot (http://www.jqplot.com)
Developed by David Eads (davideads@gmail.com). Originally created for the US Department of Energy E-Center Project. Released under the Fermitools license (modified BSD). See LICENSE.txt for more information.
See examples.html for code samples and example usage. The repository includes recent versions of jQuery and jqPlot for convenience.
jQuery 1.4+, jqPlot, and jqPlot's categoryAxisRenderer plugin are required in the default configuration. Any additional jqPlot plugins (such as the dateAxisRenderer plugin for timeseries) must also be included. Your HTML should include a stanza similar to this:
<script src="path-to-jquery/jquery.min.js" type="text/javascript"></script>
<script src="path-to-jqplot/jquery.jqplot.min.js" type="text/javascript"></script>
<script src="path-to-jqplot/plugins/jqplot.categoryAxisRenderer.js" type="text/javascript"></script>
<script src="path-to-jqplot/plugins/jqplot.dateAxisRenderer.js" type="text/javascript"></script>
<script src="path-to-tablechart/jquery.tablechart.js" type="text/javascript"></script>
<link type="style/css" rel="stylesheet" href="path-to-jqplot/jquery.jqplot.min.css" type="text/javascript" />
Invoke with:
$('table-selector').tablechart(options);
Options are not required.
If the matched element returned by the selector is a table, a chart will be generated from the table. If the matched element returned by the selector contains one or more tables, all table data will be added to the chart.
Using the default callbacks, data to be plotted should be wrapped in a proper
<tbody>
tag, and each row should provide a <th>
tag that includes the x
value for the row. Each column will be added as a new chart series.
<table>
<thead>
<tr>
<th>x-axis label</th>
<th>Series 1 label</th>
<th>Series 2 label</th>
</tr>
</thead>
<tbody>
<tr>
<th>X value</th>
<td>Series 1 (y) value</td>
<td>Series 2 (y) value</td>
</tr>
...
</tbody>
</table>
If a <thead>
is provided and the headerSeriesLabels
option is true
, the
<thead>
row will be used to generate series labels unless specified in
plotOptions.
Series options may be overridden using a custom data attribute. To set per-series
options with a data element, set the data-seriesoptions
attribute on the column's
thead th
tags which represent the series. The attribute must contain a JSON
representation of jqPlot series options (note that quoting matters):
<table>
<thead>
<tr>
<th>x-axis label</th>
<th data-seriesoptions='{"renderer":"$.jqplot.BarRenderer","color":"#aaaaaa"}'>
Series 1 label
</th>
<th data-seriesoptions='{"lineWidth":4,"markerOptions":{"size":15}}'>
Series 2 label
</th>
</tr>
</thead>
<tbody>...</tbody>
</table>
<table data-jqplotSeriesOptions="{'lineWidth':'3.0'}"> ... </table>
To create multiple charts from the same table(s) (e.g. a bar chart and a
line chart), include the chartName
option when invoking tablechart:
$('.table-class').tablechart( {'chartName': 'bar-chart'} );
$('.table-class').tablechart( {'chartName': 'line-chart'} );
Most parts of Tablechart's processing and rendering system can be overriden via callbacks provided in the options. To override the default scraping and data parsing, override these options with your own functions.
Configurable callbacks are called with a $.tablechart
instance
provided as the calling context.
hideTables
: Hide source tables. Boolean or callback to hide values (default:false
)height
: Height of chart container (default:null
)width
: Width of chart container (default:null
)chartName
: Optional chart name. Override the chart name to create multiple charts from the same source tables (default:'default'
)headerSeriesLabels
: Use headers inthead
section to name series (default:true
)parseX
: Callback to parse X values (default:$.tablechart.parseText
)parseY
: Callback to parse Y values (default:$.tablechart.parseFloat
)scrapeSingle
: Callback for scraping a single table (default:$.tablechart.scrapeSingle
)scrapeMultiple
: Callback for scraping multiple tables (default:$.tablechart.scrapeMultiple
)attachMethod
: Callback for attaching chart (default:function(container) { $(this.el).before(container); }
)plotOptions
: jqPlot options. See jqPlot options documentation for more information and source for full list of defaults.