Graph data from an HTML table using jQuery and flot
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, I think it will address most IE issues. NOTE 2: I've posted a minor update to graphTable to remove an errant console.log call. NOTE 3: I've changed the license on the plugin; it is now dual-licensed MIT and GPL, like jQuery itself. 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'});
- 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
$('#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
