Flot Thresholds on x-axis

Question

I created a realtime (updates every 10ms) vertical spline chart using Flot. The chart can be seen here on Codepen. I included the Flot multiple threshold plugin, but I would like for the thresholds to use the x-axis values (on the bottom of the vertical chart) and not the y-axis values (left of the chart). The plot would then paint all values outside of the dashed black lines in red.

In the example you can see that the thresholds use the y-axis to color thresholds (in my case, all values below constraintMax, which is 60).

The operative lines of code are where I set up the options (line 79 in the update function):

  var options = {
    xaxis: {
      position: 'bottom',
      min: -10,
      max: 100
    },
    yaxis: {
      position: 'left',
      min: iterator,
      max: updatedData.length-1+iterator,
      transform: function (v) { return -v; },  
      inverseTransform: function (v) { return -v; }
    }
  };

Where I set up the constraints (line 66 in the update function):

  var constraintMax = {
    threshold: 60,
    color: "rgb(255,0,0)",
    evaluate : function(y,threshold){ return y < threshold; }
  }

  var constraintMin = {
    threshold: 25,
    color: "rgb(255,0,0)",
    evaluate : function(y,threshold){ return y < threshold; }
  }

And where I actually plot (line 93 in the update function):

$.plot("#"+elementID, [{data: updatedData, constraints: [constraintMin, constraintMax]}, {data: initialMinData, color: "#000000", dashes: { show: true }}, {data: initialMaxData, color: "#000000", dashes: { show: true }}], options);

Does anyone have any ideas on how to paint the plot points that are outside of the dashed lines red? Thank you in advance.

Raidri Raidri · Accepted Answer · 2015-04-09T09:16:43

The multiple threshold plugin only support y-value thresholds out of the box. Therefore you have to change it for your plot. I copied the code into a jsfiddle (I don't like codepen) and changed it there.

1) Your constraintMax threshold is wrong for what you want to do, you need return y > threshold.

2) Changes in the multiple threshold plugin:

if (evaluate(currentPoint[1], threshold)) {
                          v
if (evaluate(currentPoint[0], threshold)) {

and

function _getPointOnThreshold(threshold, prevP, currP) {
    var currentX = currP[0];
    var currentY = currP[1];

    var prevX = prevP[0];
    var prevY = prevP[1];

    var slope = (threshold - currentX) / (prevX - currentX);
    var yOnConstraintLine = slope * (prevY - currentY) + currentY;

    return [threshold, yOnConstraintLine];
}

See the fiddle for the working example.

Flot Thresholds on x-axis

1 Answers