How can I improve my chart?

Question

I am working with a client on a sales forecasting app, and part of the excercise is mgmnt-reporting and charting. pls. see the following image: the two charts on the left side show Actual Sales vs. Forecast for the entire year (top) and the year to date (YTD, below). They show a relative difference (%), not absolute values.

The two big red bars represent a huge %-problem, but as the right chart reveals, they only represent a fraction of the total volume. Of c ourse all that info is available in the sum of the charts, but I wonder if it wouldn't be possible to represent that same info with less ink ;-) (Perhaps varying the height of the left bars based on %e of volume?)

Answer 1

I'm not sure if it applies to your case since I don't know what are your axises measuring, but I'd use something like a bullet graph designed by Stephen Few for cases that seems to cover yours, see below:

Overview

The bullet graph was developed to replace the meters and gauges that are often used on dashboards. Its linear and no - frills design provides a rich display of data in a small space , which is essential on a dashboard. Like most meters and gauges, bullet graphs feature a single quantitative measure (for example, year - to - date revenue) along with complementary measures to enrich the meaning of th e featured measure.

Specifically, bullet graphs support the comparison of the featured measure to one or more related measures (for example, a target or the same measure at some point in the past, such as a year ago) and relate the featured measure to defined quantitative ranges that declare its qualitative state (for example, good, satisfactory, and poor). Its linear design not only gives it a small footprint, but also supports more efficient reading than radial meters. The bullet graph consists of five primary components:

• Text label
• A quantitative scale along a single linear axis
• The featured measure
• One or two comparative measures (optional)
• From two to five ranges along the quantitative scale to declare the featured measure’s qualitative state (optional)

As you can see, it also takes care of color blindness issues, so it's a very complete solution, but again, not sure if useful for your case

Otherwise, a common approach is to "cut" the bar, as follows:

well, hope this helps!

Answer 2

Your question is about information design.

First, if this topic interests you greatly, I recommend you find The visual display of quantitative information by Tufte. His books are beautifully illustrated but expensive—so check your local library first or get your employer to buy you this book. Tufte will get you thinking about the design of charts and graphs in all sorts of clever ways.

Second, information-design problems such as this benefit from iteration. Try sketching five or more distinct solutions to this problem. You can probably do better than what I'm about to suggest. I'll repeat and add to this, below.

Third, here's my "next draft" of your iteration:

1. Rotate the left side by 90°, such that negative = down and positive = up.
2. Match the colours on the left side and right side, so one colour can show differing values of the same attribute.

Here's an illustration of this idea:

Lastly, let me re-iterate: I have no doubt you can improve on my suggestion, and you can come up with additional ideas of your own that are better. I can't overemphasize the benefit of sketching, with a pen on paper, five or more distinct solutions to this problem. [Edit: As @Nightning notes, make sure you know what information users need.—See comment.] They key is to generate the ideas without critiquing. There may be a sticking point after the first two or three sketches. Keep going. Once you have five or more ideas, mash them up and identify any weaknesses, and then sketch again. So first it's a generative/creative stage—without judging—and next it's a separate, analysis/mash-up stage. Repeat as needed. It's hard work to come up with good ideas, but rewarding.

—

And one more thing…. This is excerpted from a UIE post on effective data visualization, which confirms you're on the right track:

1. Clear purpose – Define what you want the infographic to do for your users.
2. Relevant content – Trim anything extraneous and distill what’s left down to its essence.
3. Appropriate structure – Choose the most effective way to display your data and consider its physical placement on the page.
4. Useful formatting – Make informed choices about fonts, colors, typography, labels, tool tips, and icons.

Answer 3

Iterate and test

JeromeR is right on track with the general approach. Experiment with possible data sets and ways to visualize them, then ask yourself and others what best tells the story. Just like anything else in our business, user testing is key.

There's one other important point that shouldn't be missed ...

Visualizations should expand understanding

Your budget variance chart should be scaled to % of total budget. It appears that you've scale the figure to itself (the budget subset, in this case), but placed it in the context of other subsets of the whole. Not only does this cause unnecessary alarm, it can lead to reactive decision-making.

At a high level, you're trying to expose the important trends to key executives. If the visualization gives disproportionate priority to a minor issue, they are going to focus on it. If they don't dig deeper, they'll also make poor decisions, either out of false confidence or panic.