: Graph of current/estimated value we are having problems trying to come up with a graph that would show the current and the estimated value, while maintaining the simplicity of the graph and

@Merenda852

This is what we ended up with.

Vote Up Vote Down

@Kaufman565

There's a name for this sort of thing: they're sometimes known as bullet charts (or bullet graphs).







An information dashboard specialist (and master self-promoter...) Stephen Few claims to have invented them (really, the core of the idea has been around for ages, he just wrote about good practice and gave it a name). Despite my reservations about his self promotion, his book Information Dashboard Design is worth a look if you design a lot of information reporting tools (just take his bluster and many "Rules" with a pinch of salt...).



As you've figured out, the top chart looks nice but just colours alone is problematic:


Like you said, it looks odd and confusing if the estimate and actual figure are the other way around in a series of these: suddenly you've got some charts in a series looking like they play by different rules to the others, causing people to pay more attention to the form and less to the meaning while they try to figure it out.
It's also less intuitive: you can't have any clear idea about the meaning of the chart until you look up those two colours on a key. You want people to look at a chart and get the idea of it - then, to look at the labels and key if they want particular details.
Finally, it looks like a stacked bar chart - like there's the black, then the green is much smaller and added to the black - when actually, the two measures are independent of each other and the green is greater. It's not a good idea to let some people get the wrong idea about what a chart means then force them to un-learn their first impression and look at it again.


Unfortunately if your goal is communicating information, then when something looks nice but is impractical in some way, you really need to put function before form and go with what works best.

A tick on a bar is intuitive and unambiguous: it can't be mistaken for anything other than some other, secondary measure of the same thing. That's why it's promoted as a standard and a convention for things like this. Conventions don't sound fun, but if they mean people understand the message more easily and simply, they're worth following (and of course there's no reason not to add your own twist or flair).



You don't need all the cruft that comes with a typical bullet chart (like axis labels if they're standing alone). I'd suggest something like a merger of the best features of the top and bottom chart in the list:


You want the background to be clearly a background element (presumably, it shows 0%-100%?) - so the pale grey in the top chart is good.
You want the estimate to be intuitive and not misleading - so a tick line for the estimate with the value next to it is good, like in the bottom chart. Why not neaten things up and save space by having 'Estimate' one side of the line and the value the other, aligned with each other? Maybe also chunk the line up a little bit so it's a bit more prominent - if it's the second most important thing on the chart, it should look like it is.
You want the actual value to be simple and strong and clearly the main event of the chart: so a bold dark line like in the top chart is good. No need for rounding: as well as not fitting the stark flat style so well, it adds ambiguity. Is the value the bar indicates the tip of the rounded edge, or the centre of the rounded edge where it starts to taper? Keep it simple.

Vote Up Vote Down

@Reiling762

What you mention in your last sentence is, I think, key. You want to show the comparison between estimation and final result, but what you probably need to make visible is actually the difference between those.

If that's the case, then the focus should be on that difference, and not just on the total area covered.

Here, for example, that 'extra' area or unexpected profit is darker (this was done very fast in Balsamiq, so it's just to express the idea):



You can use an absolute scale to compare them too:



And if the value is less than expected, you could do something like:



In this last one I added some extra information that would make the graph more meaningful, like the difference between expected and actual values. Anything that illustrates the difference should be a useful extra.

Vote Up Vote Down

@Speyer780

Go with the second one down and have a very clear key. Use a little gray box reading "Current" and a little green box reading "Estimated" on top of the bar chart.

The reader can easily see there are two items being compared, it doesn't matter which one is bigger or which one is on top of the other, and you can keep your colors consistent from one graph to the next.

Vote Up Vote Down