Ben's Sandbox
  • Projects
  • Tags

Graphing with Flot - Controlling Series Color


View Blog   View Source  
Using the data from the Series Toggle Example on the Flot site, I used the stack plugin and added additional options to try creating custom color schemes for each series. While the default selections are general fine, I found that at times I wanted to have more control. You can either set the color on the series object directly or use the colors array to create a custom palette of colors to chose from (regardless of the number of series). I used jQuery.Color to construct the Mono and Multi options below such that I could work in the HSL color space to manipulate hue and lightness before converting to RGB. Additionally, I set a yaxis.max so the graph would maintain a consistent scale when adding/removing series. This example also makes use of the jQuery UI Buttonset widget to make for a consistent and enhanced layout.

Color:
Type:
Include:

© Ben Olson 2012 with help from Jekyll Bootstrap and Twitter Bootstrap