Flot: Threshold Failing to Show on Vertical Bar Graph

Question

I am trying to add thresholds to a vertical bar graph, but for whatever reason, they are failing to appear.

Here are my settings for the graph:

var metOptions = {
    series:{
        bars: {
            show: true,
            align: "center",
            barWidth: 24 * 60 * 60 * 600,
            lineWidth: 1,
            fill: 0.7,
        },
    },
    xaxis: {
        mode: "time",
        axisLabel: "Date",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10,
        color: "black",
    },
    yaxes: [{
        position: "left",
        min: 90,
        max: 100,
        color: "black",
        tickDecimals: 2,
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 3
    }
    ],
    legend: {
        noColumns: 1,
        labelBoxBorderColor: "#000000",
        position: "ne"
    },
    grid: {
        hoverable: true,
        borderWidth: 2,
        mouseActiveRadius: 50,
        backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
        axisMargin: 20
    },
    tooltip: true,
    tooltipOpts: {
        content: "%x, %y%"
    }
};

Here is my dataset definition:

var dataset = [
    {
        label: "Metalization",
        data: chartData,
        color: "#F00",
        threshold: [
            {
                below: 95,
                color: "rgb(0, 0, 255)"
            },
            {
                below: 94,
                color: "rgb(0, 255, 0)"
            }
        ],
    }
]

$.plot($("#metal-variance"), dataset, metOptions);

And here is the data I am currently testing with:

[[1445144400000,95.76],[1445230800000,95.83],[1445317200000,93.99],[1445403600000,94.57],[1445490000000,93.37],[1445576400000,88.53]]

With X being a time stamp, and Y being the value.

And here is a screen shot of the graph that is generated: Flot Graph

So I have set the thresholds so that if the value is below 94, the bar should be green, but as you can see from the image, the third and fifth bars are below 94, but yet they are still displaying as red.

Any help with this issue would be much appreciated.

Answer 1

Works in this fiddle:

Are you sure you have included the jquery.flot.threshold.min.js file?