Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Support for individual bar colors in bar plot #847

Open
wants to merge 2 commits into from

5 participants

@gatorv

I made this small contribution to flot library, the support to have individual bar colors in the same data series.

This is achieved by a closure, the original point is sent to the closure, and you can return a new color for the bar, or null to keep the same original series color.

@dnschnur
Owner

Can you explain how this is useful? Normally different colors indicate different series; why not just put each datapoint in its own series rather than introducing a special case?

@gatorv

I was making a "timeline" view using bar graphs, each series was it's own "event" but I needed to quickly view if in the "timeline" there was a specific "out of normal" event, so I needed to color each bar according to the type of event, and I needed to manipulate the color and width of the bar.

Right now I'm thinking of maybe introducing a callback / hook here, and maybe move my code to a plugin, but allow flot to manipulate the bar properties before drawing them.

@aaronaverill

Can you explain how this is useful?

Easy: This allows the bar color to be used as an additional dimension, or in support of the bar height dimension. The effect can be quite useful.

why not just put each datapoint in its own series

Because semantically, a data series is... a data series. In this scenario we have a single data series we wish to color bars differently. So this is a hack (and I suspect you know it).

In practice this also makes selection and hover events difficult. imagine selecting a range of charts in a single series whereby the first down-button click starts selection in a particular series - and only that series. A hack of putting each bar in a separate series breaks this.

Further, imagine a legend on a chart with say... 300 bars.

Instead of special code for this scenario, I would rather see global support for a color (anywhere color appears in the options) that is a function. Instead of:

series.bars.colorCallback

we have something like what is done in this pull request:

#917

Elegant, simple, and straightfoward.

@aaronaverill

Another simple example where this would be useful is highlighting selected bars in a different color. Trivial to implement if you have core support for fillColor as a function object and maintain selection as a range [hello selection plugin, nice to meet ya :) ] - currently we are using two series for this (selected, unselected) - a horrible hack.

@aaronaverill

ok, I made my own pull request for this feature based on the #917 pull request approach overloading fillColor as a function. Could not wait LOL.

@jemaddux

I would also like to see this merged. It would help in my job by allowing me to recolor a bar red if it was wrong somehow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 17 additions and 2 deletions.
  1. +17 −2 jquery.flot.js
View
19 jquery.flot.js
@@ -2114,13 +2114,28 @@
}
function drawSeriesBars(series) {
- function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, axisx, axisy) {
+ function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, dataseries) {
var points = datapoints.points, ps = datapoints.pointsize;
+ var j = 0;
for (var i = 0; i < points.length; i += ps) {
if (points[i] == null)
continue;
+
+ if (series.bars.colorCallback) {
+ var currPoint = dataseries[j];
+ var barColor = series.bars.colorCallback(currPoint);
+
+ if (barColor) {
+ ctx.strokeStyle = barColor;
+ fillStyleCallback = function() {
+ return barColor;
+ };
+ }
+ }
+
drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth);
+ j++;
}
}
@@ -2148,7 +2163,7 @@
}
var fillStyleCallback = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null;
- plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, 0, fillStyleCallback, series.xaxis, series.yaxis);
+ plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, 0, fillStyleCallback, series.xaxis, series.yaxis, series.data);
ctx.restore();
}
Something went wrong with that request. Please try again.