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();

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,
    }
  }
});

Scrape multiple tables

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

$('#multiple-tables').tablechart();

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
    }
  }
});

Multiple axes

Requires jqplot.pointLabels.js and jqplot.barRenderer.js.

$('#multiple-axes').tablechart({
  plotOptions: {
    seriesColors: [ '#999999', '#2166ac' ],
    seriesDefaults: {
      pointLabels: { show: true },
    },
    series: [{
      yaxis: 'y2axis',
      rendererOptions: { barWidth: 10 },
    }],
    axes: {
      y2axis: { 
        min: 0,
        max: 600
      }
    }
  },
});

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>