Search code examples
javascriptjquerygraphflotbar-chart

Unique colors for flot bar chart

I want to create a flot bar chart that will display true and false figures, like my example below. I want the true bar to be green and the false one to be red. I've tried using the colors array but it doesn't work properly.

My current code:

var options3 = {grid: {hoverable: true},series: {bars: {show: true,barWidth: 0.6,align: "center"}},yaxis: {min:0,tickSize: 1},xaxis: {mode: "categories",ticks: [ [0, 'True'], [1, 'False'] ],tickLength: 0},tooltip: true,tooltipOpts: {content: '%y Votes', defaultTheme: false}, colors: [ "#FF0000", "#00FF00"]};
var data3 = [ [0, 3], [1, 9] ];
$(document).ready(function() {
    $.plot('#graph3', [data3], options3);
});

Example: http://joshblease.co.uk/Maths/Admin/chart.php#graph3

Solution

  • The problem is that you have only one data series, which is assigned the first color in your array (red). You will get the result you want if you replace

    var data3 = [ [0, 3], [1, 9] ];

    with

    var data3 = [
    [[0, 3]],
    [[1, 9]]
];

    Then use data3 in the plot instead of [data3]. See the jsFiddle.