graphTable: graph data from HTML table using flot

graphTable: graph data from HTML table using flot

Submitted by on December 18, 2007 - 5:57am

graphTable provides the ability to graph the data in a simple HTML table using flot.

Please make sure you read the flot before you use this plugin, especially if you're wondering about IE compatibility!!

Usage:

$('#myTable').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 ().

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

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