views:

148

answers:

1

I have had a lot of success creating graphs with Flot. However, I can not seem to figure out how one would go about shading in a region between two lines using the library. My goal is to be able to create shaded regions as illustrated below:

Graph1 Graph2

I found this plugin, but it appears that it can only shade a range of values of a line, as demonstrated here.

Update:

I finally got shading working, although it is somewhat hacky. I am recording what works here so that others can benefit.

In order to shade in between two lines, you must merge two data sets, with the higher one ordered in reverse. Make sure that the first and last points of the data sets are the same, otherwise you could end up with weird results.

So, for instance, if I set lines: { fill: true} with data: [[0,8],[100,8],[100,8],[90,7],[85,6], [10,6], [0,8]], I end up with a filled region.

+1  A: 

There's a {lines: { fill: true} } option for doing fills, and check out this question in their mailing list archive for how to get that to work between lines.

Note that there are other relevant posts in their mailing list archive; look through it.

eykanal
Your link to the question is giving me a 404.
Oren
Sorry, something seemed to be cut out in the copy-paste. Should work now.
eykanal
Thank you for correcting the link and thanks for the answer.
Oren