DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="http://www.google.com/jsapi?ext.js"></script>
<table id="example">
    <thead>
      <tr>
        <th>date</th>
        <th>ordernumber</th>
        <th>totalsales</th>          
        <th>subtotal</th>          
      </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<button id="buildChart">create chart</button>
<div id="chart"></div>

CSS

#chart {
    width: 600px;
    height:500px;
}

JavaScript

google.load("visualization", "1", {packages:["corechart"]});

var data = [
    { "date" : "20 Jan - Feb 04", "ordernumber" : 1, "totalsales" : 10340, "subtotal" : 50 },
    { "date" : "20 Feb - Mar 05", "ordernumber" : 100, "totalsales" : 23470, "subtotal" : 150 },
    { "date" : "20 June - Dec 06", "ordernumber" : 111, "totalsales" : 450, "subtotal" : 250 },
    { "date" : "20 Mar - Aug 07", "ordernumber" : 222, "totalsales" : 3030, "subtotal" : 350 }    
];

table = $('#example').DataTable({
    data : data,
    sort : false,
    columns: [
        { "data": "date" },
        { "data": "ordernumber" },
        { "data": "totalsales" },
        { "data": "subtotal" }
    ]    
});

$("#buildChart").click(function() {
    var dataArray = [];
    dataArray.push(['date', 'totalsales']);
    table.rows().data().each(function(value, index) {
        dataArray.push([ value.date, value.totalsales]);
    });
    drawChart(dataArray);
});    

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