Drawing A Chart From Datatables - Working Example

essexsteph

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.

[code]
$(document).ready(function() {

// Do chart before turning table into a datatable
$('#example').highchartTable();

$('#example').dataTable();
} );
[/code]

I presume this is because HighchartsTable looks for elements in 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

mf_a2if

Hi Steph,

I use highcharts too with datatable, but i use json to implement my datatable AND my highchart.

Maybe the solution is here ?

Magali

allan

> I presume this is because HighchartsTable looks for elements in to determine the names of the columns

Most likely the paging and filtering that DataTables applies prevents HighCharts from seeing the full data set. You'd need to modify the jQuery HighChart interface library to read the data from the DataTable using the DataTables API methods ( fnGetData and friends).

Allan

essexsteph

@mf_a2if: I like this solution as it needs minimal changes to my current pages. I put the graph in a div, initially hidden and use a simple button to show/hide it.

[code]
Show/Hide Graph

// Somewhere for the graph to go

[/code]

When I start the table I specify that the chart needs to go into the div:

[code]

[/code]

Then all I need to do is include the two javascript files in the header and call highchartTable in the document.ready function.

Steph

karen_canosa

Hello,

Having trouble drawing the bar charts to the screen. I believe its because I am pulling data from a mysql db into my table instead of specifying data in the html script.

$(document).ready(function() {
$('#example').highchartTable();

$('#example').dataTable( {
"sAjaxSource": "scripts/compare_table.php"

} );
} );

I assume high charts works with data that is pulled from a db? Can someone point me in the right direction, maybe somewhere in the docs?

essexsteph

As I said in my original post the chart has to be drawn before the table is turned into a DataTable - in my example this is trivial because I just use a HTML table, not data loaded by Ajax.

Drawing a highchart from database data isn't really for this forum, there are examples on the highcharts website. Having said that I do it for another project like this:

(1) Create an empty div with id 'spider' where I want my graph
(2) In $(document).ready create the chart without any series
(3) I use the following function to add a series pulling JSON data via Ajax

[code]
function add_series(theYear) {
$.get(
"ajax-get-spider-data.php",
{mode: "spider-results", year: theYear},
function(data) {

window.chart.addSeries({
name: 'Year Group ' + theYear,
data: data,
pointPlacement: 'on',
id: theYear,
legendIndex: theYear
});
}
)
}
[/code]

Hope that helps.

Steph

karen_canosa

Thanks for the response! I understand the chart needs to be drawn before the dataTable is created and my question wasn't specifically about how to draw a highChart chart from a database.

My confusion lies in why my highChartTable is not being created, my assumption was that the highChartTable plugin draws the chart from the information in the dataTable.

My dataTable is pulling data using sAjaxSource, and not manually put in the html table. Is it possible to work this way? OR do i need to additionally pull data from the database into my highChart like in your example above?

essexsteph

Hi Karen,

I think you need to pull the data from your database into your highChart. The reason being that your data isn't loaded until you create the datatable and specify the source with the "sAjaxSource": "scripts/compare_table.php" line and that is after the call to create the highChart.

Steph

karen_canosa

Thanks for the clarification and help!

CookRonald

Graphs, charts and tables are the best way to express figures try http://www.koolchart.com