I'm looking for alternative suggestions for displaying the following:


download bmml source – Wireframes created with Balsamiq Mockups

(Total = Available + In Use + Expired)

One possibility could be a bar chart which could display just the Available, In Use, and Expired columns, but I'm not sure if this will be clear when one or more of the counts are zero, or if some of the values are very large compared to others (e.g. if Available = 100 and In Use = 1). Additionally, as the Total may be 'unlimited' it doesn't fit quite so well with this.

The table may contain quite a few rows (100) so maintaining the same sort of row height would be desirable (i.e. a pie chart would probably be too high)

This will be displayed in a desktop browser using HTML / JavaScript / CSS.

  • 1
    Have you identified any particular problems with table presentation? I'm wondering why you are looking for an alternative.
    – Matt Obee
    Jan 27, 2014 at 11:33
  • Primarily as it looks a little number-heavy and not particularly obvious at first glance that the Total = the others combined. I've edited the mockup too to show that there are other columns too
    – mecsco
    Jan 27, 2014 at 11:39
  • 2
    For the existing list style, move the Total column after the subtotal columns, Then use a highlighting color or shading in the total column to denote that it is special and distinct from the other numbers. This will make it more obvious, without reducing meaningful density in your display.
    – Matthew
    Jan 27, 2014 at 12:09
  • Interesting point - although out of the 4, the total will be the least interesting for the users (main question would be 'how many items are available'). But perhaps the shading of the total column could be used to de-emphasise it instead
    – mecsco
    Jan 27, 2014 at 13:18

2 Answers 2


If a particular set of numbers is interesting to the user on a qualitative level, duplicate that set with bars or columns that answers a few questions.


  • Biggest questions: How many Items are being used over capacity? And, what are our most used items?
  • Solution: Bar/column chart with a threshold drawn, ordered Descending by the In Use column.

This sort of thing is where building interactive data displays comes in handy. You can expose a number of columns as facets by which the data set can be filtered. Then the user can answer many questions in a single display, by selecting different facets and thresholds.

For just presenting all of the data, the table is appropriate.

A few reasons for not abandoning the table:

  • Very tall bar charts will make ordering and comparison somewhat difficult, and will generally only answer the question "what is the general trend".
  • Clustered bar charts allow for comparison atomically within each entry, but make trend analysis much more difficult across the whole collection.
  • Stacked bars allow for only trend analysis of the totals and visually obscure the sub-totals.
  • As you noted, pie charts are a very bad idea here. Normally their density is too low for the space they occupy, and when there's enough data points for their density to be sufficient, actually comparing any data in them is impossible.

To make the table more intuitive, move the Total column after the subtotal columns and before the other columns. This is common practice, as Western cultures read left-to-write and we therefore assume a conclusion is to the right of it's parameters.

Then use a highlighting color or shading in the total column to denote that it is special and distinct from the other numbers. This will make it more obvious, without reducing meaningful density in your display.


How many items are available: Are all entries in the list in your OP equivalent? As in, is it all hardware, equipment, vehicles, software licenses, etc? If entries are homogenous (all software licenses, for example) a bar graph would be visually honest and would provide some UI flare. If all manner of things are in that list, though (keyboards as well as company trucks), 1 truck being out may be more meaningful than 10 keyboards.

How many items have expired: Adding to that, 1 truck being out and expired may be a bigger issue than 10 keyboards being out and 2 being expired, though a bar graph will look like the impact of non-compliance is higher for the keyboards.

If your table will never be long, you could get away with the bar chart, but I still may recommend a table.

If your table may be long, I think information in the tail of the bar charts may be overcome by large volume entries, and a table will be the best choice.

The information needed for either is the columns:

[Name] [In use ^] [Expired ^]

For either, only show entries that have items checked out or expired.

If you intended to do a bar chart, I would recommend considering using a bullet chart or a stacked bar with expired always as a subset of the total checked out.

Bullet Chart with labels, from Wikipedia

For the table (which I still recommend):

  • Allow ordering by the columns.
  • If an entry has expired items, highlight the row.
  • Allow the user to click on the entry name to take the user to a new page with a detailed list of the items for that entry, and lists the 5W's for each (so they can see who has the expired items, all that stuff).

Also, consider using checked out as the sum of "out and valid" and "out and expired", along with an explicitly "expired" count. "Out and not expired" is probably used the least of the three, and is made redundant with the above usage.

  • I like the idea of show qualitative columns, however for this particular table it is probably overkill - its primary use is a home page summary. The main at-a-glance focus for the user here is 'how many items are available', with the secondary question being 'how many items have expired'. Taking these two questions, would you still suggest keeping a table?
    – mecsco
    Jan 27, 2014 at 13:31
  • 1
    Thanks for the follow-up - I added a few more thoughts in the Update section of my answer.
    – Matthew
    Jan 27, 2014 at 14:05
  • After some further investigation / prototyping, I've decided to stick with the table (as you recommend) primarily for sorting purposes, and will look to enhance the readability via the styling
    – mecsco
    Feb 28, 2014 at 11:51

This table is not at all suited to judging numbers at a glance. You need a chart representation, and for chart numbers where several categories add up to a total, a stacked bar is a very good solution. It also gives you a low rowheight.

enter image description here

This is a quick and dirty implementation of how a stacked bar for the first row can look like. Style the text too, and use other cues than color to distinguish the categories. For the unlimited, use some indication on the left side of the bar. One possibility would be

enter image description here

but a graphic designer will probably find an even better way to represent it, probably also softening the left side of the green rectangle.

This gives you a good support for people who want to glimpse information about each row separately, such as somebody wanting to know "for which item have we almost used up all available units" and "for which item are there too many expired units". If you also need comparability between rows ("we have twice as many items of type ABC than of type XYZ") you will have to scale the bar length according to maximal length. But the unlimited numbers make me think that you can have a very high variability of numbers between rows, and if you define the bar width to represent the maximum available value for the whole table, many rows with low total numbers will be too narrow to allow anything to be seen. I will try to avoid this and scale each bar to the same width, no matter how much the total is. If you need comparison between item quantities, you may have to make a second screen/graph to support that, where the expired/in use etc. breakup is not visible.

  • In the images you've created (thanks for the effort by the way!), are you suggesting including the text above and below in the table? Ideally I'd like to keep the row height the same as a single row of text - but perhaps it could be displayed on hover instead - although I'd need to make sure this didn't get clunky (e.g. to show the hover on the row above you wouldn't want to have to move your mouse somewhere else to hide the current hover first)
    – mecsco
    Jan 27, 2014 at 13:25
  • Example: highcharts.com/demo/bar-stacked
    – mecsco
    Jan 27, 2014 at 13:35
  • From the point of view of "best support for user needs", the numbers should always be visible. If a graphical design point of view imposes limitations, you have to search around for a compromise good enough for everybody concerned. My first idea would be to print the numbers inside each rectangle, but then you have to take care that your smallest rectangle is wide enough to contain a 1. Maybe even make it disproportionally wide when needed - there will be enough width for small totals, and when the total is 100, people won't notice that the small piece is 1/50th instead of 1/100th in width
    – Rumi P.
    Jan 27, 2014 at 13:39
  • 1
    Hover is not a good solution because 1) it has low discoverability, 2) it does not allow a good overview (if somebody is looking for all rows with less than 3 items left, he will have to hover once over each row, making the task completion time many times longer), and 3) it doesn't work on mobile. I am not experienced with graphic design, maybe a designer can show you a space-optimized solution and you can try to make your own hybrid with my functionality-optimized one. And don't forget to provide a legend, I forgot it in the main answer.
    – Rumi P.
    Jan 27, 2014 at 13:42
  • 1
    Re: numbers and bars, draw the numbers to the uneven outside edge of the bars. In the case of stacked bars, draw all n numbers to the uneven outside edge, and use a delimiter to indicate which numbers they represent. i.e., "3 | 50 | 43" or even just commas. Do not make the bars disproportionate for small values - this makes the visualization dishonest and biases the interpretation of smaller values.
    – Matthew
    Jan 27, 2014 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.