Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I shade a region between two lines in flot?

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.

like image 538
Oren Hizkiya Avatar asked Oct 15 '22 05:10

Oren Hizkiya


1 Answers

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.

like image 63
eykanal Avatar answered Oct 18 '22 13:10

eykanal