CODEWITHSUNDEEP
javascriptjquerygraphflotbar-chart
Blease
Blease

Reputation: 1420

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

Upvotes: 0

Views: 3191

Answers (1)

Paulo Almeida
Paulo Almeida

Reputation: 8061

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.

Upvotes: 2

Related Questions