Dashboard Design: Visualizing Multiple Trends on a Chart

Introduction

There is an interesting design challenge that pops up when you need to compare a large number of trends on the same scale. While a line chart is a great way to visually compare trends on a common axis, too many trends on a single chart can result in an unreadable mess (Figure 1).

Figure 1 – A large number of trends on a single chart create an unreadable mess

Leaders in the field of data visualization such as Stephen Few and Edward Tufte emphasize the value of simplicity when designing dashboards. A traditional approach when comparing multiple trends is to place them in a scorecard, with each trend displayed on a separate row. The problem with this approach is that you lose the ability to visually compare trends on a common scale.

The two solutions proposed in this article allow you to keep trends on the same scale, while improving clarity and reducing clutter.

User Selectable Lines

An easy way to solve the problem is to allow the user to filter visible series in the legend.  The user can then select relevant metrics for a simple side-by-side comparison (Figure 2).

Figure 2 – Using checkboxes to show and hide trends

When the user unchecks one of the legend items, the line will disappear from the chart. This allows the user to decide which trends to display.

Highlighting Lines

Another approach is to highlight trends in response to mouse input. When the user moves their mouse over a line, it highlights that line and the others become greyed out (Figure 3).

Figure 3 – Highlighting a trend in response to mouse input

In addition, you may want to filter the legend so it only shows the currently highlighted trend. Dundas has a Retail Operations dashboard which demonstrates the trend highlighting functionality. This sample can be found in their dashboard gallery (select on the Customer Experience Tab at the top right).

Conclusion

Well-designed dashboards walk a fine line between simplicity and depth.  This article demonstrates two ways to maintain this balance.  Making use of interactions to power your visualizations is a great idea, especially in today’s business where most dashboards are viewed on a computer.

Proper dashboard design can be very challenging, and the addition of interactions is one way to add depth while maintaining simplicity.