Flot Chart From Data Table

I want to build a flot chart from a table. The table is built using the jquery datatables plugin. The table can be edited inline. I was wondering if anyone had any tips to display

Solution 1:

You can use loops to go through your table and build the data array for flot. Something like this:

    var headerTr = $('table tr:first()');
    var rowCount = $('table tr').length - 1;
    var data = [];        

    for (var row = 0; row < rowCount; row++) {
        var tr = $('table tr').eq(row + 1);
        var dataseries = {
            label: tr.find('th').text(),
            data: []
        };
        for (var col = 0; col < tr.find('td').length; col++) {
            var xval = headerTr.find('th').eq(col).text();
            var yval = tr.find('td').eq(col).text().replace(',', '');
            dataseries.data.push([xval, yval]);
        }
        data.push(dataseries);
    };

Here is a fiddle with a working example. The drawing is started by button click. For your datatables you could change that to an onchange event or something similar.