Single-item bar series & lables

[tie]

Hi,

I am starting to use Flot, and the library looks relly nice. Awesome
job!

I find myself needing some functionality though, for a specific type
of graph. I need to visualize data that basically looks consists of
several different colored bars. For example:
Company A -> total sales 58
Company B -> total sales 47
Company C -> total sales 63

Now to present this kind of data, one would normally "draw" 3 bars
with different colors, with the number of sales on the Y axis
(possibly with a Y-ticks showing), and a X axis with the name of the
companies (A, B, C) written under teh bars, or in the bottom of the
bars (and obviously no X-axis grid). A very desirable option would
also be to write the Y value (number of sales) above/over the bars (Y-
value lables would be useful for most kinds of graphs).

The closest I got to implementing this kind of graph with Flot can be
seen at:
http://flot.morp.org/bar_graph.html

Two hacks that I used, that I normally should not have to use:

1. Single-item series. Flot does not seem to be capable of rendering
these. To circumvent this I added a 0-height item to each data series,
e.g. "d1 = [[1, 0],[1, 58]]". I shouldn't be doing this really.

2. I use the tick labeling functionality to place the names of the
companies under the corresponding bar. Although this is less of a
hack, it has the nasty side effect of showing the vertical tick lines,
which is not suitable for this type of graph. I dont like this
solution particulary, as you need to specify the label "by hand"
instead of having it pop out of the legend settings.

The problem that I have not found the solution of so far is displaying
the actual Y values for the bars. I want to show them somewhere near
the bars (inside top/bottom, or above the bar). I went through the
docs but could not find any solution to this. Hacking the library to
add this option is probably not too hard, but I'm not much of a
JavaScript expert, so I haven't tried doing this.

So anyone got any ideas how to get rid of the hacks and solve the
problem? :)

[Woody Gilk]

This is very interesting to me. I have the same problem, and I think
the solution is rather simple:

Bar graphs should color each bar in the set differently, based on the
color cycle/set.

I've looked through the source once, but my low-level JS skills aren't
quite good enough to figure out exactly what needs to be done.

-Woody

--
wgilk design and blog [ http://www.wgilk.com ]
follower of the fat penguin [ http://www.linux.org ]

[Emil Filipov]

The more flexible and simpler solution IMO would be to just fix the single-item bar series.

 

Having the same color cycle for the entire graph can be restricting. Imagine you are charting the revenue of different companies throught the years, but one of the companies goes bankrupt within the time interval. I.e. your color cycle will have to change when one of the companies goes off the chart.

And of course the bigger problem is still how to attach labels to the bars...

 

Regards,

Emil
 

[Ole Laursen]

On 2/17/08, tie <efil...@mlke.net> wrote:
> Two hacks that I used, that I normally should not have to use:
>
> 1. Single-item series. Flot does not seem to be capable of rendering
> these. To circumvent this I added a 0-height item to each data series,
> e.g. "d1 = [[1, 0],[1, 58]]". I shouldn't be doing this really.

Hm, that's a bug for sure. I committed the fix to SVN, it's a one-liner:

function drawSeriesBars(series) {
function plotBars(data, barWidth, offset, fill) {
- if (data.length < 2)
+ if (data.length < 1)
return;

As for the other thing: yes, the API is not really perfect for this
kind of thing. It's actually on the TODO, the last item. The problem
is that this type of bar chart is conceptually pretty different from
the other kind of graphs that Flot currently supports.

As I see it, there are two steps in solving this. Step 1: figure out
the appriopriate API for this kind of bar chart. Step 2: figure out
how to make Flot understand that API.

--
Ole Laursen
http://www.iola.dk/

[Emil Filipov]

Hi,

 

Thanks for fixing the bug in the SVN :)

 

As for the bar charts, yes, I agree that they are conceptually different than the other charts rendered by Flot. Still, the difference is not that big.

 

Right now, what I'm missing most about this kind of charts is the ability to put labels for the bars on some key places - under the bar, above it, or inside the bar space. I think that this kind of functionality can be hacked relatively easy into Flot. One example to do this would be to add some options to the "bars" dictionary, for example "print_values = True|False; print_values_location = Above | Under | Inside_Top| Inside_Bottom..."

 

This is somewhat hackish, and won't solve the general problems with non-xy graphs. Still, I think that something like this will cover a lot of use cases until generic non-xy graphs arrive :)

 

Regards,

Emil
 

[Ole Laursen]

On 2/27/08, Emil Filipov <efil...@mlke.net> wrote:
> As for the bar charts, yes, I agree that they are conceptually different
> than the other charts rendered by Flot. Still, the difference is not that
> big.

True. It's definitely feasible, probably wouldn't even take long.

> Right now, what I'm missing most about this kind of charts is the ability to
> put labels for the bars on some key places - under the bar, above it, or
> inside the bar space. I think that this kind of functionality can be hacked
> relatively easy into Flot. One example to do this would be to add some
> options to the "bars" dictionary, for example "print_values = True|False;
> print_values_location = Above | Under | Inside_Top| Inside_Bottom..."

Hm, yeah. I'd like to think of that as sort of orthogonal since it'd
be useful to have that kind of support for other charts too. And it
also needs to be accessible from the plot object returned so that you
can turn a label on/off interactively. Then we would have show label
on hover functionality for free, almost. I've put it in the TODO.

Shouldn't be difficult to do.