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 the data in flot. Would you pull the data from json or directly from the chart to build the flot chart?

The data is populated in dynamically using the datatables jquery plugin.

The table looks like this..

<div id="plotarea"> <table> <caption>GDP, based on exchange rates, over time. Values in billion USDs.</caption> <tr> <td></td> <th scope="col">2003</th> <th scope="col">2002</th> <th scope="col">2001</th> <th scope="col">2000</th> <th scope="col">1999</th> <th scope="col">1998</th> </tr> <tr> <th scope="row">USA</th> <td>10,882</td> <td>10,383</td> <td>10,020</td> <td>9,762</td> <td>9,213</td> <td>8,720</td> </tr> <tr> <th scope="row">EU</th> <td>10,970</td> <td>9,040</td> <td>8,303</td> <td>8,234</td> <td>8,901</td> <td>8,889</td> </tr> </table> </div>



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 <a href="https://jsfiddle.net/fn5rm5mb/" rel="nofollow">fiddle</a> 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.


  • Chart with 1:1 scale
  • How to write a function that takes a model as an argument in R
  • highcharts - variable data causes browser lockup
  • my spark sql limit is very slow
  • Change Tick Labels for Coreplot Graph
  • Side by side plots using scatterplot from car package
  • Regex to ensure that in a string such as “05123:12315”, the first number is less than the second?
  • How to use c time in linux to print the function running time?
  • Conditional splitting of a HUGE file
  • Performance implications of a large number of mutexes
  • Java and Unicode
  • Configuring WSO2 STATS_DB
  • IE8 stops network access after 5 long polling request
  • Web service not returning integer data in an object [duplicate]
  • Creating UDF with VSTO in Excel
  • Mvc 3 posting content type application/json, action method arguments loose mapping?
  • List images(01.png) and descriptions(01.txt) from directory
  • How to use an array of arrays with array_map(…) in PHP?
  • FileReader+canvas image loading problem
  • Initializer list vs. initialization method
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Nant, Vault & Windows Integrated Authentication
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Convert array of 8 bytes to signed long in C++
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Understanding cpu registers
  • How to stop GridView from loading again when I press back button?
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Recursive/Hierarchical Query Using Postgres
  • Running Map reduces the dimensions of the matrices
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal