Set jQuery flot bar colors based on its score

Question

I am new to jQuery flot plugin and I want to set each bar's color based on its score.

For the score of the "Myself" bar:

0 - 20: red
20 - 70: yellow
70 - 100: green

For the score of the "You" bar:

0 - 20: blue
20 - 70: black
70 - 100: orange

Code Snippet:

$.plot(
  $("#placeholder"),[{
    data: [[1, 81], [3.5, 33]],
    label: 'Myself',
    bars: {
      show: true,
      barWidth: 1,
      lineWidth: 0,
      fill: true,
      fillColor: {
        colors: [{brightness: 1}, {brightness: 0.5}],
        horizontal: true
      },
      align: "center"
    }
  },{
    data: [[2, 18], [4.5, 75]],
    label: 'You',
    color: 'red',
    bars: {
      show: true,
      barWidth: 1,
      lineWidth: 0,
      fill: true,
      fillColor: {
        colors: [{brightness: 1}, {brightness: 0.5}],
        horizontal: true
      },
      align: "center"
    }
  }],{
    xaxis: {
      ticks: [[1.5, '1st half'], [4, '2nd half']],
      min: 0,
      max: 5.5,
      tickLength: 0
    },
    yaxis: {tickLength: 0},
    grid: {
      backgroundColor: "#ffffff",
      borderWidth: 0,
      markings: [{xaxis: {from: 0, to: 0}, color: "#909090"}, {yaxis: {from: 0, to: 0}, color: "#909090"}]
  },
  legend: {backgroundOpacity: 0.6, position: 'ne', margin: [-10, 0]},
  valueLabels: {show: true, truncateValue: 2}
});

A JSFiddle of the above code is here. I really appreciate your help.

I tried to fix the link formatting and it won't let you add a working JSFiddle link without some code, so I've added that. Indented it as best I can... — Xiaofu

Xiaofu Xiaofu · Accepted Answer · 2014-04-11T06:09:10

You could implement a custom draw hook like this. However when I've needed to do this I've taken a different approach when there are not many ranges.

If you have control over the source data formatting you could create separate series for each of the value ranges and assign the appropriate colours that way. So you'd have the following series: Myself0-20, Myself20-70, Myself70-100, You0-20, You20-70, You70-100.

The only modification from your JSFiddle code is the addition of the new series (fiddle):

$.plot($("#placeholder"), [
  {data: [[1, 0], [3.5, 0]], label: 'Myself0-20', color: 'red', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}},
  {data: [[1, 0], [3.5, 33]], label: 'Myself20-70', color: 'yellow', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}},
  {data: [[1, 81], [3.5, 0]], label: 'Myself70-100', color: 'green', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}},
  {data: [[2, 18], [4.5, 0]], label: 'You0-20', color: 'blue', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}},
  {data: [[2, 0], [4.5, 0]], label: 'You20-70', color: 'black', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}},
  {data: [[2, 0], [4.5, 75]], label: 'You70-100', color: 'orange', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}}
],{
  xaxis: {ticks: [[1.5, '1st half'], [4, '2nd half']], min: 0, max: 5.5, tickLength: 0},
  yaxis: {tickLength: 0},
  grid: {backgroundColor: "#ffffff", borderWidth: 0, markings: [{xaxis: {from: 0, to: 0}, color: "#909090"}, {yaxis: {from: 0, to: 0}, color: "#909090"}]},
  legend: {backgroundOpacity: 0.6, position: 'ne', margin: [-10, 0]},
  valueLabels: {show: true, truncateValue: 2}
});

Set jQuery flot bar colors based on its score

1 Answers