Flot chart with Threshold and Fillbetween

Question

I'm looking for advice on how I should/can configure Flotcharts using the Fillbetween and Threshold pluggins to create a chart that accomplishes the following:

1. Plot a line chart. (done)
2. Set some threshold values. (done)
3. Set and fill values that are outside of the threshold values. (not quite done)

Here's what I've accomplished so far,

https://jsfiddle.net/gstoa/utv4kvw2/

$(function() {
  var values = {
    'avgBottom': [
      [1, -2],
      [2, -2],
      [3, -2],
      [4, -2],
      [5, -2]
    ],
    'avgTop': [
      [1, 3],
      [2, 3],
      [3, 3],
      [4, 3],
      [5, 3]
    ],
    'values': [
      [1, .5],
      [2, -3],
      [3, .8],
      [4, 4.5],
      [5, 6.6]
    ]
  };

  var dataset = [{
    data: values['values'],
    lines: {
      show: true
    },
    color: "rgb(50,50,255)"
  }, {
    id: 'avgBottom',
    data: values['avgBottom'],
    lines: {
      show: true,
      lineWidth: 0,
      fill: false
    },
    color: "rgb(50,50,255)"
  }, {
    id: 'values',
    data: values['values'],
    lines: {
      show: true,
      lineWidth: 0.5,
      fill: 0.2,
      shadowSize: 0
    },
    color: "rgb(50,50,255)",
    fillBetween: 'avgBottom'
  }, {
    id: 'avgTop',
    data: values['avgTop'],
    lines: {
      show: true,
      lineWidth: 0,
      fill: 0.2
    },
    color: "rgb(50,50,255)",
    fillBetween: 'values'
  }];

  $.plot($("#placeholder"), dataset, {
    xaxis: {
      tickDecimals: 0
    },
    series: {
      lines: {
        show: true,
        fill: true
      },
      points: {
        show: false,
        radius: 4
      },
      color: "#62CB31",
      //      threshold: {
      //        below: -2,
      //        color: "rgb(255,0,0)"
      //      }
    },
    yaxis: {
      tickFormatter: function(v) {
        return v;
      }
    }
  });

  $.plot($("#placeholder"), [d1, d2, d3]);
});

I'd like this line chart to look like the following:

Any advice is greatly appreciated.

Answer 1

To do this, I had to switch from the fillbetween to the fillbelow flot plugin. I then had to modify the source of the fillbelow plugin to look at a new fillColor property of the series (I've got a pull request to merge these changes back into the main branch).

All in all, your new data set looks like the code snippet below (this JSFiddle demonstrates how to get the chart to look like your example image).

var dataset = [{
    id: 'topValues',
    data: values['values'],
    lines: {
        show: true,
    },
    color: "rgb(50,50,255)",
    fillBelowTo: 'avgTop',
    fillBelowUseSeriesObjectFillColor: false,
    fillColor: "#FF0000"
}, {
    id: 'avgTop',
    data: values['avgTop'],
    lines: {
        show: true,
        lineWidth: 0,
        fill: true
    },
    color: "rgb(50,50,255)"
}, {
    id: 'bottomValues',
    data: values['values'],
    lines: {
    show: true,
    lineWidth: 0,
    shadowSize: 0
    },
    color: "rgb(50,50,255)"
}, {
    id: 'avgBottom',
    data: values['avgBottom'],
    lines: {
        show: true,
        lineWidth: 0,
        fill: true,
    },
    fillBelowTo: 'bottomValues',
    fillBelowUseSeriesObjectFillColor: false,
    fillColor: "#FF0000",
    color: "rgb(50,50,255)"
}];

• The fillBelowTo property acts similarly to the fillBetween property of the fillbetween plugin - it denotes to which series you'd like to fill below to.
• The fillBelowUseSeriesObjectFillColor property (set to false) tells us to not use the lines.fillColor color and instead use the fillColor value. If fillBelowUseSeriesObjectFillColor was true, the lines.fillColor color would be used (which in this case would be blue).