Search code examples
javascriptflot

Drawing segments over the background of a flot plot

I want to draw 2 segments over a flot plot (I have 4 x-coordinates to determine those: x1, x2, x3 and x4). Much like:

enter image description here

But then with a continuing plot line over the colored areas. I found this image from this blogpost, and I have looked at the code, but I can't seem to figure out how to transfer the colored areas.

I think I need to use this command from the git code: 

ctx.fillRect(x1 + offset.left, offset.top, x2 - x1, plotHeight - offset.bottom - offset.top);

But I can't seem to figure out what ctx is. I have a flot graph: 

tensionPlot = new CustomPlot(placeholder,  [ { data: dataD}, { data: dataM}, { data: dataK}, {label:"first data", data:dataK}, {label:"Second data", data:dataM},{label:"Third data", data:dataD} ]
, options, dataSync);

But is ctx part of the options? Or is that an additional new canvas? I haven't figured out where to fit this in.

http://joeloughton.com/blog/web-applications/flot-plugins-x-gap-threshold/

Solution

  • You can do that directly in Flot by using markings (see here in the documentation). Example code (see this fiddle for a full example):

    markings: [
    { xaxis: { from: 150, to: 200 }, color: "#ff8888" },
    { xaxis: { from: 500, to: 750 }, color: "#ff8888" }
]