Flot Chart - Different line and point colors depending on data

Question

I have a line chart for dis/likes. The positive values should get a darker green border and the red values a darker red border. Further the red points should be filled with red color, not with green.

This is how it looks like!

This is how it should look like

After a few hours I couldnt get any solution on this, so any help is welcome. Here's the code I have:

$.plot("#curvePlaceholder", [{
    data: data,
    color: "#83ce16",
    threshold: {
        below: 0,
        color: "#c00000"
    },
    lines: {
        fill: true,
        lineWidth: 3,
        fillColor: {
            colors: [{ opacity: 1 }, { opacity: 1 } ]
        }
    }
}],
    {
    series: {
        lines: {
            show: true,
            fill: true
        },
        points: {
            show: true,
            fillColor: '#83ce16'
        }
    },
    grid: {
        hoverable: true,
        clickable: true,
        backgroundColor: 'transparent',
        color: 'transparent',
        show: true,
        markings: [
            { yaxis: { from: 0, to: 0 }, color: "#737374"}
        ],
        markingsLineWidth: 6
    },
    yaxis: {
        show: false,
        <?=$chart_data['ymin'];?>
        <?=$chart_data['ymax'];?>
    },
    xaxis: {
        show: false,
        min: -0.4
    }
});

Quintillion

Can you replicate this in a jsfiddle? Or at the least tell us what data equals? – Alfaro

Answer 1

The easiest way to obtain the look you are after is to drop the thresholding plugin and split it into two series:

[{
    data: [[0,0],[5,1],[7,0]],
    color: "#83ce16",
    lines: {
        fill: true,
        lineWidth: 3,
        fillColor: {
            colors: [{ opacity: 1 }, { opacity: 1 } ]
        }
    },
    points: {
        show: true,
        fillColor: '#83ce16'
    }
},{                           
    data: [[7,0],[11,-1],[11,0]],
    color: "#c00000",
    lines: {
        fill: true,
        lineWidth: 3,
        fillColor: {
            colors: [{ opacity: 1 }, { opacity: 1 } ]
        }
    },
    points: {
        show: true,
        fillColor: '#c00000'
    }
}],

Fiddle here.

Alfaro

Answer 2

If one is using a data array, you can also do this for example:

var dataset = [
    { label: "Success", data: convertedSuccessArray, points: { fillColor: "green" } },
    { label: "Failed", data: convertedFailedArray, points: { fillColor: "red" } }
];

Dignitary

Answer 3

Actually if you could keep the thresholding plugin if you turn the fill off on the points and increase the 'lineWidth'. That would give the appearance of a filled circle in the color for the threshold. The downside is this creates larger circles than the default size.

points: {
    show: true,
    fill: false,
    lineWidth: 6
}

Pridemore

This approach has one drawback, though, I've discovered. The threshold plugin creates points wherever your limits and your data meet, so coloring the points will color these "fake" data points. So keep that in mind. This is a known issue with the threshold plugin. – Pridemore