1

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]
mohsen dorparasti
  • 8,107
  • 7
  • 41
  • 61
jkm
  • 21
  • 1
  • 5

1 Answers1

0

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);
}

enter image description here

see demo using your data -> http://jsfiddle.net/9wvvh8sk/

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • Hi. thanks, it looks good. Though my data source is json object format and not array. Am still trying to make you array data source object...:-) – jkm Nov 26 '14 at 12:13
  • @jkm - It does not make any difference what so ever - the click function produces the dataArray based on the content in the table, and this is the same thing, regardless what the datasource for the dataTable is / was. We cannot reproduce an ajax load in a jsfiddle, therefore I used a static JSON. – davidkonrad Nov 26 '14 at 12:17
  • ok. i was saying that because i get the error: Data column(s) for axis #0 cannot be of type string... – jkm Nov 26 '14 at 12:21
  • My data looks like this and still i get error above. [{"date":"Dec 29 - Jan 4","ordernumber":"401","totalsales":"3","subtotal":"89390.00"},{"date":"Jan 5 - Jan 11","ordernumber":"403","totalsales":"12","subtotal":"18505.00"},{"date":"Jan 12 - Jan 18","ordernumber":"414","totalsales":"2","subtotal":"5850.00"},{"date":"Jan 19 - Jan 25","ordernumber":"416","totalsales":"10","subtotal":"68159.00"}]; – jkm Nov 26 '14 at 17:57
  • hey @jkm - This is because your numbers are quoted, eg surrounded with "" and just inserted to the `dataArray` "as is". Then you do that, `google.visualization.arrayToDataTable` parses them as strings (how should it know better?). To avoid that, use `parseInt` / `parseFloat` on fields you want to export as pure numbers. See updated demo with the JSON from above comment -> **http://jsfiddle.net/w11rqc03/** – davidkonrad Nov 26 '14 at 18:32
  • Works fine on my local machine... when i upload to phalcon framework.. google.load("visualization", "1", {packages:["corechart"]}); clears my page....:-( – jkm Nov 26 '14 at 19:56
  • I cannot by telepathy figure out what your problem is on that :-) Try disable caching and look what there is going on in the console. – davidkonrad Nov 26 '14 at 20:06
  • Issue like: http://stackoverflow.com/questions/9519673/why-does-google-load-cause-my-page-to-go-blank But its not helping.. i ll figure out slowly. Thanks. – jkm Nov 26 '14 at 20:22
  • You **have** a `google.load("visualization", "1", {packages:["corechart"]});` like in the fiddle, right? – davidkonrad Nov 26 '14 at 20:34
  • I put google.load outside $(document).ready(function() { but the rest of code inside it, and the page is loading including the google.load which loads some google stuff though the datatable is hanging "processing..." and no map is showing.. – jkm Nov 26 '14 at 20:49
  • and instead of .click i used $('#table').on( 'draw.dt', function () { – jkm Nov 26 '14 at 20:50
  • Sorry, I have answered your question, how to take data from dataTables to google visualization. I cannot figure out, based on your comments, why it is not working for you in production. There can be 10.000 reasons. I suggest you post another question for that. – davidkonrad Nov 26 '14 at 20:56