Take the 2-minute tour ×

I am building a web-based analytics platform. I am looking to plot a line chart that represents the number of seconds it took for me to reach a live service agent via phone on a given day.

In the y-axis, I have seconds. In the x-axis, I have date. I place one call per day, so I have one data point per day.

If I call and get an answering machine, I am left with a null data point, because I can't tell how long it took to reach a live agent, since I never reached one.

Currently, I am skipping over that date and just connecting the data point with the next available data point via the line (to show a trend).

However, these null values need to be represented in the chart because I need to indicate that I did indeed make an attempt to reach a live agent every day. It is also valuable to quickly be able to see when I was directed to an answering machine.

There is an added level of complexity here in that I am plotting this for multiple companies simultaneously on a single chart. A friend had suggested that instead of a line chart, I use a bar chart and represent each call with a bar value and that a null data point could be represented with a value of -1. This solution works great if I am only plotting the data for one company, but having multiple companies makes it less attractive since too many bars clutters the chart and makes the trend for a given company a bit tougher to decipher.

My best idea so far has been to represent each null value as a zero and simply change the marker on the datapoint to be a red "X" to indicate that it is a null value and not an actual zero value. The feedback I have gotten is that it's not an accurate representation and that it messes up the trend of the chart by lacing it with spikes. Here is an example of my idea:

Chart With Null Data Points

I am really struggling with this issue and appreciate any thoughts or feedback.

share|improve this question
Can you post a mockup or wireframe for this? I think I understand, but it would be helpful to see the exact context –  Bryan Robinson Oct 17 '12 at 16:05
Hey Bryan, I put up a quick and dirty example for you of what I'm talking about. In this case, I reached an agent on Jun-11 but then reached an answering machine on Jun-12 and Jun-13. I was then able to reach an agent again on Jun-14. Hope this helps! Thanks! –  Carlos Oct 17 '12 at 17:31
You could add this information under the x axis similar to i.stack.imgur.com/jrNhq.jpg –  Brian Oct 19 '12 at 13:48
I'd say a bar graph is more appropriate, as you are plotting discrete events, and there's really no connection between the call times today and yesterday. This means there's really no need for a line connecting days. –  Alex Stone Oct 22 '12 at 3:04
add comment

4 Answers

Have you considered a line chart with dots. You could use hollow dots to represent the missed information. This wouldn't effect your trend with spikes but would allow the users to see how often the connection wasn't made.


share|improve this answer
Thanks for your response Sobox. My chart does have dots to represent the data points. The issue is that I don't know where in the chart to place the hollow dot. It looks like your suggestion here is to draw the line between two full dots and then place the hollow dot along that plotted line where it intersects with the corresponding date, correct? I like how this keeps the trend in tact but I am concerned with the fact that the placement of null data points will be inconsistent. This will make them harder to recognize quickly, especially when multiple lines are plotted. Does that make sense? –  Carlos Oct 17 '12 at 17:25
Your correct in thinking the hollow dot is drawn between the two know dots. I think adding the hollow dots at a readable size will add more information to the chart. The user can see how many failed attempts their are. This could be useful for spotting trends. eg. every Friday the connection drops. –  sobox studio Oct 17 '12 at 17:29
Do you understand my concern about the inconsistency in the placement of the hollow dots though? If this is plotted out over 90 days and the data has a healthy variance, it will be tough to identify the hollow dots with an initial glance. That is why I was trying to make them all zero or something like that. Perhaps the answer is to go with your suggestion and add some sort of toggle control that shows only the null values instead of the entire set. That would allow for quick identification. Thoughts? –  Carlos Oct 17 '12 at 17:37
I guess it comes down to preference. I think adding an option would give the user the choice. Good idea. –  sobox studio Oct 17 '12 at 17:44
Now that I think of it, there are two more issues with this approach. I guess they are more special cases as opposed to issues. If the plot starts with a null value or ends with a null value, we can't take the average of the two adjacent points. We will probably have to set them equal to the only adjacent point they have. Additionally, if two null values are adjacent to each other we kind of have a chicken and the egg problem because we don't know who should look at the other one to set itself first. So I'll have to come up with special logic for that. It's a complex issue! Haha. –  Carlos Oct 17 '12 at 17:49
show 1 more comment

You have two graphical representations of the data, the dots and the line. For the line, I would recommend gaps where there's no data, rather than interpolating a line. This makes it really clear to the viewer that it's discontinuous data. Separately, for cases where you tried and failed, you can use the X instead of the dot. You'll want a consistent place for those, so that someone seeing the break in the line knows where to look (to see if you tried and failed, or didn't try). Since the top of the Y axis is the worst-case scenario, that seems a logical place to put them.

This approach introduces a problem for showing multiple companies (lines) on the same chart. Two approaches: do connect the lint to the X, but not the one from it (so you still get a gap). Or, preferable IMO unless you have a large number of companies, color-encode both the line and the X for each company, and leave the lines discontinuous. (You might want to jitter the Xs slightly to cover the case where more than one company doesn't answer on the same day, unless you're making those calls at different times of day already.) The discontinuity in the line is the primary thing they'll see and it communicates "missed a day"; the "X" at the top, or its absence, will tell the user why.

share|improve this answer
My first inclination was to use the 0-point for no connection, as you suggest. Thinking about it further, I prefer an label at the top of the y-axis labeled, "∞", with an explanation (corresponding to an asterisk next to the infinity sign) somewhere else. The problem with using the 0-point is that the 0-point represents the optimal scenario (reached a live agent immediately) whereas the null value represents the worst case scenario (never reached a live agent at all). "∞" is somewhat intuitive (waited forever to reach a live agent). –  Brian Oct 18 '12 at 18:19
@Brian, that's a good point. I've updated my answer. –  Monica Cellio Oct 18 '12 at 19:09
add comment

We used blank before and got user feedback it is not clear and confusing so we recently changed it. We now have a gray line that goes between the existing dots, other lines are with color and gray means "no data" in other places too. We didn't get feedback for the new presentation yet... From generally talking to users I wasn't able to get a clear answer yo what is the best solution to this. If you can do AB testing with some real users, it is probably the best. Nurit

share|improve this answer
As long as you don't add 'null' you're probably OK –  Benny Skogberg Oct 19 '12 at 6:17
add comment

Since no answer is a "special" value in this case and zero is not an accurate representation of it's meaning in a line chart I would leave gaps in the line to remove it from the trends (fortunately, most charting widgets support this technique too). To draw attention to "no answer" in within the line chart, try using annotations.

If "no answer" data is important to the user, then I'd analyze that data separately from hold time. They data has different meaning and isn't directly comparable, so if both are interesting to the user, analyze them separately. I've put an example of what I'm describing below:

So the the gaps in the line and the annotations might look like the following:


download bmml source – Wireframes created with Balsamiq Mockups

If there are many no answers then the annotations might get busy. So you could use an indicator (e.g. an X) with a legend or just leave the gaps as they're rather intuitive. However, if there are lots of no answers I think this again lends credibility to analyzing them separately as with lots of no answers the hold time line chart will become overwhelming.

BTW: If you have clear targets to compare the data to or maybe historical data to use as implied targets then there there are probably more interesting ways to visualize the data such as bullet graphs or maybe a deviation column chart to show hold time or no-answer deviation from industry averages or some other useful comparative data. As showing "time to live agent" in minutes may not be as informative as using some other comparative measure such as the historical data or industry averages.

share|improve this answer
add comment

Your Answer


