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 http://hizkiya.com/images/1.jpg Graph2 http://hizkiya.com/images/2.jpg
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With