Flot Chart - Custom coloring of the graphic content for defining different ranges - colors

Question

I have 2 ranges on the graph, so called ; green and red zones.
You can see it in the fiddle.
What I am out after is to have a graph where the green range should be between 2-4 (y-axis) specifically for the 11-13 values of x axis. Basically I would like to have 2 different ranges .
Anyone knows how to do it ?
Edit :
To make it more clear with Michel's solution; I basically would like to add another green zone that is located in up-right of the previously located green zone (let it be in x(13,16) and y(4,6) ).
Please check the newer version ;
http://jsfiddle.net/shamaleyte/4zmgrpwz/

Answer 1

I've created a simple plugin for Flot to use in order to get shamaleyte his desired result.
Either create a new file and copy-paste the contents in it or download the plugin
Refer to it just as every other javascript file
<script type="text/javascript" src="path/to/file.js"></script>
And add areaMarkings to the grid object in the options.
You were on the right track!
The way Flot draws the markings of the chart is simply to overlap everything! Layer upon layer upon layer.
What I've done to accomplish it is the following:
#1: First of I drew the xaxis between x=11 and x=13 for the green area. It's a giant area that spans from the y=0 all the way to y=12 on the yaxis.
#2: Then I filled in the entire yaxis between y=0 and y=2, this overlapped the green area on the yaxis to create a red area spanning from left(x=10) to right(x=15)
#3: With the bottom yaxis row being red now, I then did the exact same for the top yaxis. Once again from left(x=10) to right(x=15) I filled in the entire y=4 to y=12 with a red area.
#4: I was now left with 2 white areas on the left and right side of the green area and between the red areas. All I had to do was fill those with red aswell. I did the same as I did with the green area, draw the red areas from the bottom to top. From x=0 to x=2 and from x=13 to x=15.
....
markings: [{
xaxis: {
from: 11,
to: 13
},
color: "#D7EEE1" // Green
}, {
yaxis: {
from: 0,
to: 2
},
color: "#F2CDEA" // Red - Bottom Row
}, {
yaxis: {
from: 4,
to: 12
},
color: "#F2CDEA" // Red - Top Row
}, {
xaxis: {
from: 10,
to: 11
},
color: "#F2CDEA" // Red - Left Column
},{
xaxis: {
from: 13,
to: 15
},
color: "#F2CDEA" // Red - Right Column
}]
....
Here's an updated fiddle that I think comes close to your expectations.