title: use jquery-datatable data source for generating google visualization chart
body: <p>I am not very conversant with javascript.I have a jquery datatable loaded using an ajax call as follows:</p>
  
  <pre><code>$('#table').dataTable( {
      "processing": true,
      "serverSide": true,
      "ajax": "http://api.mywebsite.com/report",
              "columns": [
          { "data": "date" },
          { "data": "ordernumber" },
          { "data": "totalsales" },
          { "data": "subtotal" }
             ]
  } );
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>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);
    }
  </code></pre>
  
  <p>Is there a way I can replace below</p>
  
  <pre><code>     `['Date', 'Sales'],
        ['20 Jan - Feb 04',  10340 ],
        ['20 Feb - Mar 05',  23470 ],
        ['20 June - Dec 06',  450 ],
        ['20 Mar - Aug 07',  3030 ]`
  </code></pre>
  
  <p>with something like:</p>
  
  <pre><code>dataTable.data[date]
  </code></pre>