jQuery Tablechart plugin examples

Tablechart is a jQuery plugin that scrapes HTML tables and generates charts with jqPlot.

Download Tablechart from Github.

Line chart with category axis (no options)

Requires jqplot.categoryAxisRenderer.js.

$('#basic-table').tablechart();
Pet sales by month, 2010
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

Bar chart with category axis

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,
    }
  }
});
Pet sales by month, 2010
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

Scrape multiple tables

Tables are in a <div> with ID multiple-tables.

$('#multiple-tables').tablechart();
Puppy and collar sales by month, 2010
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
Kitten sales by month, 2010
Month Kittens
Mar 19
Apr 21
May 18
Jun 22
Jul 18
Aug 19
Sep 25
Oct 23
Nov 25
Dec 28

Numeric x-axis

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
    }
  }
});
f(x) = x2
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

Multiple axes

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
      }
    }
  },
});
Puppy sales and profit, 2010
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

Series attribute options

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>
Average and actual distribution
x Average Actual
0 45.5938127766 60.5938127766
1 47.0341432388
2 48.4894980091
3 49.9584854133
4 51.439645094
5 52.9314496543 61.9314496543
6 54.432306564
7 55.9405603295
8 57.454494926
9 58.9723364912
10 60.4922562764 79.4922562764
11 62.0123738512
12 63.5307605559
13 65.0454431959
14 66.5544079682
15 68.0556046128 81.0556046128
16 69.5469507767
17 71.0263365803
18 72.4916293723
19 73.9406786592
20 75.3713211956 87.3713211956
21 76.7813862177
22 78.1687008031
23 79.5310953402
24 80.8664090876
25 82.1724958034 102.172495803
26 83.4472294253
27 84.6885097807
28 85.8942683045
29 87.0624737441
30 88.1911378298 103.19113783
31 89.2783208876
32 90.3221373732
33 91.3207613049
34 92.2724315741
35 93.1754571099 109.17545711
36 94.0282218802
37 94.8291897045
38 95.5769088615
39 96.2700164708
40 96.9072426305 103.90724263
41 97.4874142927
42 98.0094588612
43 98.4724074955
44 98.8753981059
45 99.2176780293 119.217678029
46 99.4986063708
47 99.7176560037
48 99.8744152176
49 99.9685890077
50 100.0 112.0
51 99.9685890077
52 99.8744152176
53 99.7176560037
54 99.4986063708
55 99.2176780293 110.217678029
56 98.8753981059
57 98.4724074955
58 98.0094588612
59 97.4874142927
60 96.9072426305 115.90724263
61 96.2700164708
62 95.5769088615
63 94.8291897045
64 94.0282218802
65 93.1754571099 100.17545711
66 92.2724315741
67 91.3207613049
68 90.3221373732
69 89.2783208876
70 88.1911378298 95.1911378298
71 87.0624737441
72 85.8942683045
73 84.6885097807
74 83.4472294253
75 82.1724958034 92.1724958034
76 80.8664090876
77 79.5310953402
78 78.1687008031
79 76.7813862177
80 75.3713211956 92.3713211956
81 73.9406786592
82 72.4916293723
83 71.0263365803
84 69.5469507767
85 68.0556046128 81.0556046128
86 66.5544079682
87 65.0454431959
88 63.5307605559
89 62.0123738512
90 60.4922562764 67.4922562764
91 58.9723364912
92 57.454494926
93 55.9405603295
94 54.432306564
95 52.9314496543 61.9314496543
96 51.439645094
97 49.9584854133
98 48.4894980091
99 47.0341432388

Slider control

x y