Information visualization - display 6 related ranges on a single chart

Question

I sell apples and oranges.

I know how many items of each kind I expect to sell today and I know how many I've actually sold so far. I need to design a chart displaying this data in real time. What's most important is to understand at a glance the total amount of fruit sold overall and how it compares to the total expected amount. The specific breakdown to apples and oranges is less important but I'd like to be able to show this as well. I may sell more than expected. The expected ratio of apples to oranges may be as extreme as 99:1, but it's typically more like 80-20 or 60-40.

Answer 1

I'd go for the stacked bar chart (assuming time is an important dimension).

Here's a mockup:

^{download bmml source – Wireframes created with Balsamiq Mockups}

It (hopefully) gives you trends and totals at a glance for both the projections and the actual figures, and gives you the subdivision into apples and oranges upon closer inspection. For many days you can let the bars connect and get quite pleasing infographics.

Answer 2

Stephen Few uses a Bullet Graph in his book Information Dashboard Design: The Effective Visual Communication of Data which I think could be used for your purpose as it's used to display several comparative and competitive values as well as target reaching at the same time.

If you want to offset apples and oranges from an independent base, then you are going to have to split the graph, in which case you have 4 options (plus any others you can think of)

1. two separate bullet graphs - one above the other

2. two graphs growing outwards in opposite directions from a common origin

3. two graphs growing inwards to a meeting point

4. two graphs within one

options 2 and 3 both start adding a positive and negative directional meaning and that could be confusing

But here's some examples of option 4, where the inner bar grows in length until it reaches yesterdays values, after which the outer bars shrink

when you sold not so many apples today but more oranges:

when you sold more apples today but not so many oranges:

when you sold more apples and oranges:

when you sold way more apples and some more oranges:

That may require some creative labeling of axes, if you want to be able to read off all the values! It's also important that both parts of the graph retain the same scale.

Answer 3

I came up with the following chart, which is similar to a stacked bar chart and Edward Tufte's slope graph. It is good for showing the difference between the aggregate totals, but not so good for direct comparison between the individual categories. It does, however, work fairly well for a more or less comparison between the categories (i.e. it can be read easily that "I've sold more apples", but not "I've sold 10% more apples").

^{download bmml source – Wireframes created with Balsamiq Mockups}