graphTables and flot with colors

by ryleyb

HTML

<script src="http://dl.dropbox.com/u/8237070/jquery.flot.0.7.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/smoothness/jquery-ui.css">
    <table border="1" cellpadding="2" id="table1" width="500"> 
      <thead> 
        <caption>Table 1: Graph by columns</caption> 
        <tr> 
          <th></th> 
          <th>col1</th> 
          <th>col2</th> 
          <th>col3</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <th>1</th> 
          <td>10</td> 
          <td>20</td> 
          <td>30</td> 
        </tr> 
        <tr> 
          <th>2</th> 
          <td>20</td> 
          <td>40</td> 
          <td>60</td> 
        </tr> 
        <tr> 
          <th>3</th> 
          <td>40</td> 
          <td>80</td> 
          <td>120</td> 
        </tr> 
      </tbody> 
    </table>

JavaScript

(function($) { 
 
 $.fn.graphTable = function(_graphArgs,_flotArgs) {

    var args = {

      /* 
       * 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 
       * 
       * note that anywhere the word "index" is used, the count starts from 0 at
       * the top left of the table 
       *
       */
      series: 'rows', // are the series in rows or columns?
      labels: 0, // index of the cell in the series row/column that contains the label for the series
      xaxis: 0, // index of the row/column (whatever args.series is) that contains the x values
      firstSeries: 1, // index of the row/column containing the first series
      lastSeries: null, // index of the row/column containing the last series; will use the last cell in the row/col if not set
      dataStart: 1, // index of the first cell in the series containing data
      dataEnd: null, // index of the last cell in the series containing data; will use the last cell in the row/col if not set

      /* graph size and position */
      position: 'after', // before the table, after the table, or replace the table
      width: null, // set to null to use the width of the table
      height: null, // set to null to use the height of the table
      min: 0, // defaults to minimum y value in the table
      max: 0, // defaults to maximum y value in the table

      /* data transformation before plotting */
      dataTransform: null, // function to run on cell contents before passing to flot; string -> string
      labelTransform: null, // function to run on cell contents before passing to flot; string -> string
      xaxisTransform: null, // function to run on cell contents before passing to flot; string -> string

      //extra info added by me
      colors: null
    }

    // override defaults with user args
    $.extend(true,args,_graphArgs);
    
    /* default to last cell in the row/col for...