Tablechart is a jQuery plugin that scrapes HTML tables and generates charts with jqPlot.
Download Tablechart from Github.
Requires jqplot.categoryAxisRenderer.js
.
$('#basic-table').tablechart();
Month | Puppies | Kittens | Goldfish |
---|---|---|---|
Jan | 5 | 13 | 9 |
Feb | 9 | 20 | 10 |
Mar | 5 | 19 | 12 |
Apr | 10 | 21 | 15 |
May | 12 | 18 | 12 |
Jun | 15 | 22 | 11 |
Jul | 15 | 18 | 10 |
Aug | 13 | 19 | 8 |
Sep | 11 | 25 | 10 |
Oct | 17 | 23 | 15 |
Nov | 20 | 25 | 10 |
Dec | 21 | 28 | 12 |
Shows simple use of plotOptions
to display grouped bar chart. Requires jqplot.categoryAxisRenderer.js
and jqplot.barRenderer.js
.
$('#barchart-table').tablechart({ plotOptions: { seriesDefaults: { renderer: $.jqplot.BarRenderer, } } });
Month | Puppies | Kittens | Goldfish |
---|---|---|---|
Jan | 5 | 13 | 9 |
Feb | 9 | 20 | 10 |
Mar | 5 | 19 | 12 |
Apr | 10 | 21 | 15 |
May | 12 | 18 | 12 |
Jun | 15 | 22 | 11 |
Jul | 15 | 18 | 10 |
Aug | 13 | 19 | 8 |
Sep | 11 | 25 | 10 |
Oct | 17 | 23 | 15 |
Nov | 20 | 25 | 10 |
Dec | 21 | 28 | 12 |
Tables are in a <div>
with ID multiple-tables
.
$('#multiple-tables').tablechart();
Month | Puppies | Collars |
---|---|---|
Jan | 5 | 1 |
Feb | 9 | 3 |
Mar | 5 | 1 |
Apr | 10 | 5 |
May | 12 | 3 |
Jun | 15 | 4 |
Jul | 15 | 6 |
Aug | 13 | 5 |
Sep | 11 | 2 |
Oct | 17 | 4 |
Nov | 20 | 8 |
Dec | 21 | 7 |
Month | Kittens |
---|---|
Mar | 19 |
Apr | 21 |
May | 18 |
Jun | 22 |
Jul | 18 |
Aug | 19 |
Sep | 25 |
Oct | 23 |
Nov | 25 |
Dec | 28 |
Here, we use the parseFloat
parser for x values and the jqPlot LinearAxisRenderer
to create a x-y traditional plot. Note how the discontinuities in the data are accurately reflected in the chart.
$('#plot-table').tablechart({ parseX: Tablechart.parseFloat, plotOptions: { axes: { xaxis: { renderer: $.jqplot.LinearAxisRenderer, min: 0, max: 7, numberTicks: 8 }, yaxis: { min: 0, max: 40 } }, legend: { show: false } } });
x | f(x) |
---|---|
1.0 | 1.00 |
1.5 | 2.25 |
2.0 | 4.00 |
3.0 | 9.00 |
3.5 | 12.25 |
4.0 | 16.00 |
4.5 | 20.25 |
5.5 | 30.25 | 6.0 | 36.00 |
Requires jqplot.pointLabels.js
and jqplot.barRenderer.js
.
$('#multiple-axes').tablechart({ plotOptions: { seriesColors: [ '#999999', '#2166ac' ], seriesDefaults: { pointLabels: { show: true }, }, series: [{ renderer: $.jqplot.BarRenderer, yaxis: 'y2axis', rendererOptions: { barWidth: 10 }, }], axes: { y2axis: { min: 0, max: 600 } } }, });
Month | Profit | Puppies sold |
---|---|---|
Jan | 40 | 15 |
Feb | 175 | 18 |
Mar | 180 | 19 |
Apr | 120 | 21 |
May | 157 | 18 |
Jun | 150 | 22 |
Jul | 151 | 18 |
Aug | 132 | 19 |
Sep | 114 | 25 |
Oct | 179 | 23 |
Nov | 209 | 25 |
Dec | 321 | 28 |
Requires jqplot.barRenderer.js
.
$('#series-options').tablechart({ parseOptions: true, plotOptions: { axes: { xaxis: { renderer: $.jqplot.LinearAxisRenderer, min: 0, max: 100 }, } } });
Other than setting parseOptions
to true
, the magic is not in the invocation but in the markup:
<thead> <tr> <th>Month</th> <th data-seriesoptions='{"renderer":"$.jqplot.BarRenderer","rendererOptions":{"barWidth":10},"color":"#aaaaaa"}'> Beans </th> <th data-seriesoptions='{"markerOptions":{"size":6,"style":"filledSquare"}}'> Rice </th> </tr> </thead>