Labeling a multi-layered bar graph

Question

Question

I love Last.fm's bar graph. It allows me to quickly compare how someone plays one song over another.

I'm trying to apply the same design to my app. It monitors the health of servers and needs to show a lot more stuff. For example, the last column shows the current upload / allocated upload / physical limit upload. Since I need much more text, the label doesn't fit over the bars and some parts are hard to read. Look how ugly the "50 Mb / 60 Mb / 80 Mb" looks. How would you design this better? Keep in mind that there will be hundreds of rows and dozens of columns, so space is limited on the screen.

---

Solution

I took most of Vitaly's suggestions. I added spaces around the "/". I tried it without spaces and it was too hard to parse. I decided not to color code the text because the lighter green was too hard to read. I labeled each row with the unit, rather than only labeling the header. I sacrifice space for quicker understanding of what the rows are.

Answer 1

How about something like this:

1. Represent percentages as pie charts. They don't take as much space, there will be a visual differentiation between the different types of data, so the screen has more order to it, and it will be clear that bars always have meaningful width (whereas when you display percentages as bars, then in some columns their width is meaningful - 100px=100Mb, and in the percentage column it's meaningless - it's just 100% percent of something. It's very confusing).
2. Take the numbers out of the bars. Then you can play with the widths of the bars without being concerned over the numbers inside, both in terms of width and of color.
3. Only specify each unit of measurement once per row. It frees up a lot of space. As a matter of fact, I'd consider specifying it once per column - in the header. When you need to switch to a different one, just use fractions or multiples.

Answer 2

I assume that your requirements state that if a new server is added to your existing rows and it has a 120Mb physical upload limit then the server showing 100Mb in the same column gets smaller?

If that's the case then I sympathise, as the solution isn't as easy as say. 'Find the minimum values and ensure the smallest bars run the full length of the needed text then proportionately stretch fields for each column that contain much larger values.'

My suggestion then, if my assumption is correct is that you focus on a combination

• Bars without text
• Halfway marker on each bar due to the variety of lengths
• Use tooltips that reveal the values herein

The user is able to judge the usage of each resource visually and reveal a second layer of information by hovering over it.

That is if you can abandon communicating the real time values on every bar over hundreds of servers.

PS nice question and I know my idea isn't strictly labelling, more an alternative!

Answer 3

When tight for space in tables, it is far more important to save space on table row height rather than heading row height. Why?

• There is no use having the table at all, if people don't know exactly what each column is for!
• There are more table main rows than table heading rows, so a 10% saving on the rows is more significant than a 30% saving on the headings.

I get 30% more bars in the same vertical space as before, so I am using some of that for the 'extra' vertical space for my taller headers.

The headings with key dots and shared text for 'Bitrate' and 'Upload' are not easy to make in html/css. These would be pre-prepared bitmaps. Vitaly has suggested moving the units to the headings, and there is room for them over the sorting arrows.

Some details:

• Drop shadow on the bars helps to separate them, even though they are very close together.
• Aggressively reduced letter-space (and removal of actual spaces) allows a larger and hence clearer font for the in-bar text than otherwise would be possible.
• Lightened colors so that the black text shows clearly.