8

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.

4
  • 1
    A grouped bar chart showing expected sales and actual sales for apple sales, orange sales, and total sales would show the data you need to answer the question. Feb 24, 2013 at 15:24
  • Since the total is composed of the apples and oranges, I am trying to avoid displaying the same data twice. Feb 24, 2013 at 15:30
  • A sum may be 'the same data' but it requires mental computation by the user. By imposing the 'not show the same data twice' constraint on the design, you are imposing your mental model of the design task on the user's actual task. The easiest way to compare total amount of fruit sold to total expect amount is to show the totals. Anything else requires more effort by the user. Feb 24, 2013 at 15:34
  • I'm not asking the user to compute anything. As I mentioned in the question, first and foremost I intend to show the totals. Then, since the totals are made up of the two types (which is precisely the user's mental model), I'd like to use the same chart to display the breakdown as well. And in any case all 3 pairs of numbers are displayed in text as well. The challenge is to effectively visualize the composition of the data. Feb 24, 2013 at 16:33

3 Answers 3

4

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

Here's a mockup:

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.

3
  • And of course, these are basically a series of vertical bullet graphs, but I think including the history actually helps the audience understand the meaning of the individual bullets.
    – Peter
    Feb 24, 2013 at 17:11
  • Doesn't seem to handle well situations where the ratio between apples and oranges is around 1:99...
    – Dvir Adler
    Feb 27, 2013 at 12:00
  • Depends on what you want to tell rom the graph. You will be able to see at a glance that the oranges make up the total or almost the total revenue. If you always show at least the outline of the bar (and the legend), then you will see that the apples play some part as opposed to none. In particular if the surrounding ratios are 80:20, you will be able to see that the apples have (almost) disappeared from the total.
    – Peter
    Feb 27, 2013 at 13:12
8

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. enter image description here

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:

enter image description here

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

enter image description here

when you sold more apples and oranges:

enter image description here

when you sold way more apples and some more oranges:

enter image description here

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.

3
  • Thanks Roger! It's a good direction but here's what bothers me about it: Let's say that the external bar is the expected amount and the internal bar is the actual amount. I can divide each bar in two, and get the breakdowns. But the 2nd half of the internal bar will only align to the 2nd half of the external bar once the 1 half of the internal is "full" - and until that point it's difficult to compare the two. I'm playing with the idea of fixing the zero point in the middle and having the two bars grows sideways, but that proves difficult to understand. Feb 24, 2013 at 9:26
  • added an update about that... Feb 24, 2013 at 9:57
  • Well, options 1,3 & 4 actually harm the main requirement - to quickly assess the overall amount. In the case of 4 it can be ok when the first measure exceeds expectations (then the two bars seem continuous), but that's uncommon - and in any case it doesn't offer a way to assess "overall expectations". I think that the most promising solution is #2. Feb 24, 2013 at 11:40
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").

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

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

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