I am not very conversant with javascript.I have a jquery datatable loaded using an ajax call as follows:
$('#table').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "http://api.mywebsite.com/report",
"columns": [
{ "data": "date" },
{ "data": "ordernumber" },
{ "data": "totalsales" },
{ "data": "subtotal" }
]
} );
I want to load the dataTable together with a Google chart but I have no clue how to get the data object from above dataTable initialization to the the Google code below and trigger the same routine every time the datable is re-populated:
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Sales'],
['20 Jan - Feb 04', 10340 ],
['20 Feb - Mar 05', 23470 ],
['20 June - Dec 06', 450 ],
['20 Mar - Aug 07', 3030 ]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Is there a way I can replace below
`['Date', 'Sales'],
['20 Jan - Feb 04', 10340 ],
['20 Feb - Mar 05', 23470 ],
['20 June - Dec 06', 450 ],
['20 Mar - Aug 07', 3030 ]`
with something like:
dataTable.data[date]
This is quite easy. I notice you are using dataTables 1.10.x, and then you can use the API to iterate over each row, and build up a data array google visualization will use :
$("#buildChart").click(function() {
var dataArray = [];
dataArray.push([ 'date', 'totalsales' ]);
table.rows().data().each(function(value, index) {
dataArray.push([ value.date, value.totalsales ]);
});
drawChart(dataArray);
});
and the called drawChart
function is pretty much like the one in your question :
function drawChart(dataArray) {
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
title: 'dataTables to google visualization'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
see demo using your data -> http://jsfiddle.net/9wvvh8sk/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.