jQuery Flot and graphTable Colors

Question

How can I change the line colors with the flot plugin and graphTable:

$('table.statics').graphTable({series: 'columns', position : 
       'replace', height : '180px'});

But I would like to change the colors in the options of graphTable, something like:

$('table.statics').graphTable({series: 'columns', position : 
       'replace', height : '180px', 
       colors: ["#92d5ea", "#666699", "#be1e2d", "#ee8310", "#8d10ee"]});

And then each line in the resulting flot graph would have the corresponding colors from the column.

Answer 1

In flot you can specify the color for a particular series:

//series object
{
  data: rowData,
  label: label,
  color: '#92d5ea'
}

Looking through the graphTable plugin, there's a line like this twice:

tableData[tableData.length] = { label: label, data: rowData };

That's where it is creating the series object. So you would have to figure out your color in that area and then set it.

EDIT: If you want to be able to set it via the graphTable call, you'll have to edit the graphTable plugin and add a colors argument as a possibility. Here's how:

//find the line after "var args = {" and add this
colors: null,

Then later, instead of

tableData[tableData.length] = { label: label, data: colData };

Put this:

var series = {label: label, data: colData };
if (args.colors && args.colors[j-args.dataStart]){
    series.color = args.colors[j-args.dataStart]
}
tableData[tableData.length] = series;

Note I am only showing how to deal with the columns section, not rows. Now you can do something like this:

$('#table1').graphTable({series: 'columns', colors: ['red','red','blue']});

And the result looks like this (doesn't work in IE due to no excanvas).