Graph data from an HTML table using jQuery and flot
categories: front-end development, javascript, jquery, plugins
I just got done with a first draft of the graphTable plugin, which lets you take a simple HTML table and turn the data in it into a graph using jQuery and flot. Here's a demo, and here's the jQuery plugin page where I'll continue development if there's any interest.
The most basic usage is simple:
$('#table1').graphTable({series: 'columns'});
graphTable() takes up to two objects as arguments: the first is an object with the arguments for graphTable; the second is an object with arguments to be handed off to flot (read more about flot arguments).
The graphTable arguments let you:
- choose which parts of the table will be used for the graph data
- choose where the graph will go in relation to the table and how big it will be
- run a function on cell contents (to remove dollar signs, for example) before passing them to flot
Each of the following options can be set as part of an object passed to graphTable as the first argument. For example:
$('#table1').graphTable({ series: 'columns', dataTransform: function(s) { return(s.replace('$','')); } });
options for reading the table
defaults will work in most cases except you'll want to override the default args.series if your series are in columns
- series 'rows', 'columns'
- labels integer index of the cell in the series row/column that contains the label for the series; default is 0
- xaxis integer index of the row/column (whatever args.series is) that contains the x values; default is 0
- firstSeries index of the row/column containing the first series; default is 1
- lastSeries index of the row/column containing the last series; will use the last cell in the row/col if not set; default is null
- dataStart index of the first cell in the series containing data; default is 1
- dataEnd index of the last cell in the series containing data; will use the last cell in the row/col if not set; default is null
graph size and position
- position 'before', 'after', 'replace'; indicate whether the graph should go before the table, go after the table, or replace the table
- width leave as null to use the width of the table for the width of the graph; otherwise, set to a width in pixels
- height leave as null to use the height of the table for the height of the graph; otherwise, set to a height in pixels
data transformation before plotting
- dataTransform function to run on cell contents before passing to flot; string -> string
- labelTransform function to run on cell contents before passing to flot; string -> string
- xaxisTransform function to run on cell contents before passing to flot; string -> string
NOTE: A couple of commenters have pointed out that this plugin has issues in IE. I haven't had time to look into it, so I'm not sure whether they are related to my plugin or to flot. Make sure you read flot's readme about getting flot working in IE.
December 18th, 2007 at 6:46 pm
Just tried this plugin, and I love it, now I just need to decide where I want to use it.
Just one suggestion though, you might want to consider a setting for the margin of the graph, dependent upon position. When I place the graph below the table, the top edge of the graph is right on the bottom of the table. Although this could be resolved with CSS as well.
Anyway, great job.
December 19th, 2007 at 4:42 pm
Very cool! How about getting it working with AFLAX, so that it uses Flash instead of <canvas>, so that it can be used by crappIE browsers. Or: it could check for canvas support, and use that when available… I suppose I should fire up my PC and see if its already doing that, but oh man I hate to use that thing when I don’t absolutely have to.
December 19th, 2007 at 8:22 pm
Michael: The div that the chart goes into has its own class (flot-graph), so I leave the styling to the whims of the user. Glad you like the plugin — let me know if you use it somewhere!
Brandon: I hadn’t given much thought to making this work with Flash instead of flot — I think it wouldn’t be hard, if there is a Flash chart library that could accept JSON data like flot can. That’s really all this plugin does — build an object that gets handed off to flot — and it could just as easily hand that object off to something else. By the way — you can use excanvas.js to get around the fact that IE doesn’t support canvas. See the installation section of the flot README.
December 20th, 2007 at 1:16 am
[...] Graph data from an HTML table using jQuery and flot (tags: jquery) [...]
December 20th, 2007 at 1:29 am
[...] via:Graph data from an HTML table using jQuery and flot Tagged with: jQuery [...]
December 20th, 2007 at 9:53 pm
Very cool. Recently i have been experimenting with google chart for displaying graphs. But this kind of plugins on top of jquery is much better and faster.
I hope, they make this part of jquery UI with lots of customizations.
January 21st, 2008 at 1:16 pm
That’s a really great plugin!
I’m just wondering if I can use it for a time line with having the month (January, February,…) on the bottom line. Is that possible?
That would be a really great feature.
Thx
January 23rd, 2008 at 4:18 am
Rebacca, nothing seems to happen on the demosite? Just blank new div?
February 2nd, 2008 at 1:18 pm
can this be used with the flot functionality to turn dataset on and off in the graph?
thanks
February 4th, 2008 at 12:58 pm
Hi ! Thanks for this great plugin. I’de like to add a little more functionnality by adding check boxes to choose which data will be displayed in the graph. Do you plan to enhance your plugin ? And if not, would you have a idea on how to make this happen ?
Thanks for your help.
February 13th, 2008 at 5:32 pm
wonderful. I haven’t dug too deeply into the details, but is it easy enough to change from slope to block to point style graphs? In the case I’m thinking of, the user will select the type of graph, perhaps by select or radio button.
February 29th, 2008 at 6:14 pm
This is what I was looking for so I can provide plots on the iPhone with jQuery. It would be nice to allow alphanumeric axis labels. I am thinking of Dates in particular here. I am still figuring out how to use it, but I like what I have seen.
March 23rd, 2008 at 4:10 am
Great article!! Mr nico, there is a sample with checkboxes. Check out http://code.google.com/p/flot/. Go to examples and select “Real data with a bit of interactivity”. Here is an url to it: http://people.iola.dk/olau/flot/examples/real-data.html
April 9th, 2008 at 12:17 pm
i added a few things to the plugin that i thought were useful and i thought i would share:
i pass to flot the last x axis plot value as the “max” option to insure that the x axis extends out to the end of the data in the table (it seems to max out at 100 if no argument is passed).
i also created x and y axis ticks options to the plugin and pass those to flot to allow the ticks to be set manually.
April 18th, 2008 at 3:29 am
It would be nice if it was possible to choose other types of graphs than lines, f.x. bars.
May 12th, 2008 at 10:05 pm
Hi Rebecca,
I’ve got the plugin working nicely in stand alone pages, thanks!
When I put the page content into a jquery ui ajax tab (append new tab), the graph does not display fully. All I see is the legend and axes labels. Any ideas why that might be?
June 6th, 2008 at 10:03 am
Your demos don’t work in IE? Are they supposed to? Cool plugin, thanks for your work on it.
June 25th, 2008 at 4:30 am
Hi Reb, nice plugin, thank you .. just, I think, your first sentence should be in bold: Not supported by IE (at least mine, v.7).
This would avoid a lot of later disappointment
July 18th, 2008 at 11:33 am
[...] Web Designing has pages about Ajax/JavaScript sample & Library. We like to introduce your graphTable. We make original samples with the graphTable. And then, we show how to use it with our samples. Is [...]
July 23rd, 2008 at 11:27 am
hey, i copied the source for your demo, correct the .js location in the script tags, and this does nothing. in ff or in ie. what am i doing wrong?
September 8th, 2008 at 11:19 am
There’s a bug on xaxisTransform when using column series. To fix it, replace “y” with “x” near the end of this line:
if (args.xaxisTransform) { x = args.xaxisTransform(y); }