8

I am displaying a daily data feed in my app, i.e. one value per day. The data is displayed in either a bar or line chart. In the event that a data point is missing on a given day, I want to indicate somehow that the value is missing on that day. Here are a couple initial design concepts that are quite visually distracting or strong. I'm aiming for a design that is less distracting, more elegant.

enter image description here

enter image description here

(If my wording of the question is not specific enough, please leave comments and I'll improve it.)

3
  • So, basically you want to distinguish between value zero and NA(Not Available) visually in a chart?
    – Chetan
    Dec 12, 2014 at 16:36
  • I'm trying to distinguish between NA and all other values in a chart, and I want to preserve the visual representation of time on the x-axis, since the data a given once per day. Dec 12, 2014 at 16:52
  • If you must use a symbol for the missing data, the question mark (?) seems more appropriate. Dec 12, 2014 at 18:05

6 Answers 6

6

Even I'm facing same issue in the analytics product I'm working on now.

My line of thinking is

Use solid base line(axis) for all the positions/bars which represent data existence. Use dotted base line for all the positions where data is missing as shown in the Mockup below:-

enter image description here

Highlight the axis label where there is dotted line and provide tooltip info regarding missing data.

This I guess is the natural analogy, which is, solid line indicating something present/existing and dotted line indicating something missing or virtual.

And, it is well known that dotted lines are meant for filling something which is not there.

2
  • 1
    I feel technically it is difficult to implement a axis where part of it is dotted and part solid.
    – Chetan
    Dec 12, 2014 at 16:51
  • This question is about design patterns so how difficult it could be to implement is not important here. Dec 12, 2014 at 16:57
3

Do not display days with missing data, at the X-axis add three dots when the days are not continuous. See image below :

enter image description here

1
  • 1
    I think @Chetan's answer (coloring the missing label in red) is better than placing "..." in the axis. Since we normally assume the axis is progressing linear, users who miss out the "..." may misread the data.
    – kevin
    Dec 13, 2014 at 2:44
2

I saw a similar scenario in the book Super Graphic. There was a graph of incomes across several years, but one year, no data was reported.

The author just left out that year, but reserved space to show the gap. I recreated the chart to be interactive in my job, so you can see how the final product looked. enter image description here

It is one way people have handled this for you to consider: http://www.zingchart.com/demos/fictional-fortunes-chart/

1

Leave it out.

Be true to the data. If it is missing (and your scale starts at a non zero) leave it out. The white space is true to the data by showing a gap.

Tufte says something to that effect when he talks about tabular data and whitespace. Sorry, I do not know the exact quote. Maybe someone else can research this. Check out his book if you have the $$$, time and/or interest.

Label appropriately

A very important aspect of visualizations is labeling. You can simply explain that the data is missing with help text.

...Unless it indicates necessary action

If you add an icon such as the one at the top, it resembles an alert thus prompting some sort of action. If the user needs to fix the problem, then it is ok to add a prompt.

1

Here is how Michael Bostock, the creator of D3 language, is showing it: http://bl.ocks.org/mbostock/3035090 The gap is obvious and self-explanatory enough.

enter image description here

I also like your own solution, but I would make the triangle light grey (#f3f3f3 or #dddddd), because red can be too distractive.

1

Light grey colors could work, the text could be "no data", "?", "NA", etc.

If you want to make that part less relevant, you have to subtract contrast from the whole vertical space including the date text and taking in account that what you are adding should bend with everything else.

enter image description here enter image description here

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.