Mind the gap: designing graphs with missing data

December 12, 2015 · 5 min read

Data-driven interfaces are on the rise. Financial District CEOs want to see a birds-eye view of their bottom line as much as Silicon Valley Co-founders want to watch their growth hackers hack. Each user has their own hopes and fears about data, but there’s one thing nobody wants to see: a blank space.

Unfortunately, errors happen. No database is perfect, and as designers and product owners, we have to prepare for the worst. So let’s look at a (real-world!) example from some recent work at Planetary:

A line graph with missing data
A line graph with missing data

In this graph, the values for December 6th, 9th, 13th, and 14th are missing. What are the possible ways of handling this?

The first answer, of course, is “make sure the data is there.” But as I mentioned, there are likely going to be cases where we have to handle missing data — changes in the vendor APIs, hardware issues, acts of god — so let’s analyze a few solutions.

Solution 1: do nothing

This is what we’re currently doing. If we don’t have the data, we’re simply not drawing that portion of the graph.

Pros:

Cons:

Solution 2: fill in the gaps

Here’s what it would look like if we simply filled in the gaps by connecting the dates that we do have:

A line graph with gaps filled in
A line graph with gaps filled in

Pros:

Cons:

Solution 3: error states

What if we shaded in the regions for which we didn’t have data with some informative error state?

A line graph with error states where data is missing
A line graph with error states where data is missing

Pros:

Cons:

Conclusion

As an advocate of user needs even over technical requirements, I prefer solution 3. But I’ve employed all three of these approaches in products, and each can be useful depending on the circumstance.

I’m curious to hear how others have addressed this problem. Opinions? Alternative solutions? I’m all ears.