Alternatives to pie charts in a table

Question

We've got an application where we want to show parts-of-a-whole data in a table with multiple rows. The current table design has a small number of rows (4-8). Each contains text and numbers plus a pie chart.

The pie chart can have up to 8 sections, representing the fraction of the last 20 minutes that this row has been in any of 8 possible states. (If a state didn't occur, we don't show that slice).

Most users don't need to know the exact numbers, but want to get an overall sense of "usually in good state X" or "wow, spending too much time in bad state Y". For users that want precision, there is a rich tooltip that shows the details.

One of these states is 'good' (and is green); the other seven are different varieties of 'bad', some of which are "bad but if you wait it'll get better" and some are "bad and there's nothing you can do about it". Too much of a few of them indicates "bad and you need to get an administrator to help you."

I'm looking for alternatives to the pie chart. It doesn't work for narrow slices (users tend to overlook them), and with 8 colors, users are often confused about what each of them means.

Constraints:

• Changing the format of the table itself is not an option, i.e., these things should still be in rows.
• This is web-based, so we have access to graph-making widgets, but other recommendations are welcome.
• Animation / flashing things == bad.
• Screen real estate is at a premium; we don't want to get any taller. We do have a small amount of flexibility sideways, perhaps 3-4x as wide if it really added value.
• This is part of a complicated dashboard, so we want to avoid complete information overload, but users are willing to put up with some complexity to have good situational awareness.

What is a good way to present this data?

Answer 1

If you be willing to trade-off "parts-of-a-whole" against seeing narrow "slices", you could use vertical bar plots with a logarithmic scale.

This is how such a diagram might look like (instead of small stacked boxes representing the individual items, also usual bars can be used):

I think this representation also provides further advantages:

• You could order the bars according the severity (or applying some form of semantic grouping).
• It becomes easier to compare different entries because the bar of a particular state has a fixed position - it is not only color that discerns the states.
• You may add column headings, at least for groups of states.

Answer 2

I think a better way would be a stacked bar graph. It would be one bar so the row height wouldn't matter, and it would be split up into colors the same way.

Each color should take up whatever % of the bar, and they should be arranged in order so that the smaller ones are on one side and the larger ones towards the other.

You should add a hover state (like you have in your example) showing the percentages and labels for each piece on info shown. One good technique, if your data is arranged this way, is to color code "bad" things red and "good" things green so it's even more clear when scanning the table.