CODEWITHSUNDEEP
jqueryflot
ThreeCheeseHigh
ThreeCheeseHigh

Reputation: 1498

Flot Chart - Different line and point colors depending on data

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! enter image description here

This is how it should look like enter image description here

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
    }
});

Upvotes: 5

Views: 17224

Answers (3)

samnau
samnau

Reputation: 752

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
}

Upvotes: 0

Slaphead
Slaphead

Reputation: 101

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" } }
];

Upvotes: 1

Mark
Mark

Reputation: 108512

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.

Upvotes: 6

Related Questions