Drawing Chart.js with Values from DataTables

Drawing Chart.js with Values from DataTables

RockbRockb Posts: 97Questions: 0Answers: 0
edited April 2014 in TableTools
I'm using Datatables with a few thousand rows and would like to show content (of a specified column) in Charts.js (http://www.chartjs.org) - these charts are HTML5 based, generated by this tiny but effective script. Both work fine separately, but I have no idea how to combine them - I'm not familiar with JavaScript, know too less. Hopefully somebody may help me. That would be nice :-)

My goal:

If somebody is clicking 1 row in Datatable, it returns a value from a field (a column in the selected row with entries like "65,59,65,59,90" or "40,56,55,54,28"), Datatables change these values, it push the values to the Chart.js-Skript-Part and it will refresh the canvas-element below the table. The standard-Chart is given by the first row in the sorted table.

With the TableTools-Plugin you have the possibility to select a single row or to select multiple rows. These functions enable also API methods and Callbacks. There I think there are two options to get the information which are required to push the information to the Chart: fnRowSelected and fnGetData. I've seen the examples, but I don't know exactly what is going on there.

I think, for DataTables, the situation is "clear". Let's have a look to Chart.js - it's really nice, while it creates beautiful canvas-Charts without any knickknacks, just the chart. My "Script" for Chart.js looks so far:

<!doctype html>

Line Chart

width: 100%;

var lineChartData = {
labels : ["01","02","03","04","05"],
datasets : [
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [40,56,55,54,28]

var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = document.getElementById('canvas').offsetWidth;
ctx.canvas.height = document.getElementById('canvas').offsetHeight;
var myDoughnut = new Chart(ctx).Line(lineChartData);


The "only" thing is to change the "data"-part after each click. Everything clear? Not for me, but hopefully for you ;-) That would be awesome!

...maybe - with some thousand records - these entries are too much for a column in every row. At least the DataTables-script shell push something to the chart-Script. It would also be possible to get the information for the chart directly from the database (server-side-processed). I also have no idea, but probably it's a more safety way?.


  • allanallan Posts: 56,819Questions: 1Answers: 9,029 Site admin
    I would suggest that you use fnGetData and loop over the returned array, building an object of properties that you can either assign to HTML5 attributes, or pass directly into the Line() constructor (which would be more efficient).

  • RockbRockb Posts: 97Questions: 0Answers: 0
    Hi Allan,

    thx for the information. A good hint. So far I've no idea, but maybe I will find a solution.

    Is it possible to change the multipile-selection in that way, to change online up to 2 rows? That would make a comparison of a second value possible.

  • allanallan Posts: 56,819Questions: 1Answers: 9,029 Site admin
    Not entirely sure what you mean I'm afraid. You want to feed a different axis of data into the chart? (which is presumably a different column). If so, you'd just pull the data out of the table that you need from that column in the fnGetData loop.

  • RockbRockb Posts: 97Questions: 0Answers: 0
    An example, that it makes more clear:

    Chart 1 (One dataset)

    Chart 2 (Two datasets)

    In Chart 1 the single-selection (http://datatables.net/release-datatables/extras/TableTools/select_single.html) makes sense. In "Chart 2" the multiple-selection (http://datatables.net/release-datatables/extras/TableTools/select_multi.html). But there shell be only 1 or 2 selections, not more then these. So the sRowSelects aren't the right choice - and maybe the multiple can be modified in a way to select max 2 rows.
  • allanallan Posts: 56,819Questions: 1Answers: 9,029 Site admin
    I see - so you have multiple data points for each 'bin'. Can you not just pull out the multiple data points from each column?
  • RockbRockb Posts: 97Questions: 0Answers: 0
    Sorry, I missunderstand - my english is not the best sometimes ;-D Especially in programming.

    A table could be look like that:

    ID | Name | Dataset (invisible)
    1 | Row One | 40,56,55,54,28
    2 | Row Two | 14,98,44,14,68

    With single-selection I will receive only one value-field. With multiple-selection more. But my "Chart.js" only supports 2 'rows', not 3 or 4 and so on. So, with "multiple" and If the user clicks more then 2 rows, the Chart doesn't know, which row it shell compare. So it has to be stopped to max 2 rows... and the next click in the table will deselect the first selection.

    Now clear? :-) Thanx for your patience.
  • allanallan Posts: 56,819Questions: 1Answers: 9,029 Site admin
    How are you selecting the rows? Just add a little logic to it to disallow more than two rows to be selected. Or better yet, remove one of the previously selected rows and select the new one.

  • RockbRockb Posts: 97Questions: 0Answers: 0
    So far I don't select anything^^ But I would handle it with this: http://datatables.net/release-datatables/extras/TableTools/select_multi.html

    -> "remove one of the previously selected rows and select the new one."

    Yep, I think that's it. After the selection of 2 rows.
This discussion has been closed.