Drawing A Chart From Datatables - Working Example

Hi All,

I've had a request from a customer to present the information in a Datatable as a graph. One quick scoot round the internet later and I had a solution which I thought you might like to see...

I've used Highcharts JS (http://www.highcharts.com/) to draw the chart and the magic of jQuery HighchartsTable (http://pmsipilot.github.com/jquery-highchartTable-plugin/) to take the data in a table and draw the graph.

Here's a live example: http://live.datatables.net/esomin/9/edit#preview

It was easy to set up using the examples on the HighchartsTable website. The only wrinkle seems to be to render the graph first, e.g.

$(document).ready(function() {
  
  // Do chart before turning table into a datatable
  $('#example').highchartTable();
  
  $('#example').dataTable();
} );

I presume this is because HighchartsTable looks for <th> elements in <thead> to determine the names of the columns and Datatables does something with them which prevents them being found - perhaps Allan could confirm.

Anyway, I haven't really investigated what else I can do with this, but thought some of you may find it useful.

Steph