Drawing Chart.js with Values from DataTables
Drawing Chart.js with Values from DataTables
Rockb
Posts: 97Questions: 0Answers: 0
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:
[code]
<!doctype html>
Line Chart
canvas{
width: 100%;
height:200px;
}
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);
[/code]
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?.
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:
[code]
<!doctype html>
Line Chart
canvas{
width: 100%;
height:200px;
}
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);
[/code]
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?.
This discussion has been closed.
Replies
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.
Regards
Sebastian
Allan
Chart 1 (One dataset)
http://i.imgur.com/1rkDEyi.jpg
Chart 2 (Two datasets)
http://i.imgur.com/cLyqyPJ.jpg
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.
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.
Allan
-> "remove one of the previously selected rows and select the new one."
Yep, I think that's it. After the selection of 2 rows.