Multi-Y Graph

Example of the Multi-Y Graph UX pattern.

Problem

People need to see multiple kinds of data against a common baseline.

Solution

Establish a common X axis and then stack multiple Y axes up against that same X axis.

Context

  • You can establish a meaningful, shared variable for the X axis.
  • You’re okay with using line plots, bar charts, or area charts—other types don’t work so well.

Rationale

Using the same X axis makes it clear that the data sets are related and lets people see points of convergence along that same data axis while retaining very different measurements in number or kind along the Y axis. This sort of analysis will help people understand potential relationships and causes between the disparate measurements along that shared variable.

Implementation

There are essentially two approaches to the multi-Y graph. The first, as shown in the primary example, is to establish a common X axis and then stack multiple graphs with independent Y axis and graph space above each other. This requires people to draw a mental line through the various graphs to see connections, but you can help by adding guides at relevant intervals. It could also help if you provide a way for people to establish their own guidelines, such as a hover guide that follows the mouse and even a way to lay them down persistently so they can create multiple guides.

The other approach is similar except that instead of stacking the Y-axis graphs above each other, you can have all of the Y axes share the same graph space, layering them on top of each other, and then illustrating the Y axes stacked out to the side. While this can help people more easily see the relationships between the Y-axis graphs, it can also make the chart a little bit harder to read (requiring people to properly associate the plots with their respective axis) and be a little misleading as it may not be immediately obvious that the axes are different for the various plots. Be sure your users understand this approach if you choose it.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

This pattern can be implemented using ASP.NET WebChart control. Check out the samples browser to see it in action.

Silverlight

The NetAdvantage for Silverlight Data Visualization’s xamWebChart allows you to configure primary and secondary Y axis.

Examples

The primary example from Google Finance uses multi-Y graphs to help people understand the relationship between trading volume and price changes. It uses the stacked graph approach with the underlying grid lines as guides.

http://quince.infragistics.com/11f8

Example of the Multi-Y Graph UX Pattern Example of the Multi-Y Graph UX Pattern

This chart makes very easy to realize that the weekly set usage increased while the timer per channel decreased. It uses the same graph space approach, stacking the two axes on either side of the graph and using colors to establish the relationship between the axes and their plots.

http://quince.infragistics.com/115w

Example of the Multi-Y Graph UX Pattern Example of the Multi-Y Graph UX Pattern

This example is from the Infragistics toolset and shows how you can stack the Y axes along the left side of the graph area and use colors to associate the plots to their axes.

http://quince.infragistics.com/10x8

Example of the Multi-Y Graph UX Pattern Example of the Multi-Y Graph UX Pattern

This example from the Infragistics WPF toolset shows how you can stack two different kinds of charts on top of each other, sharing the same X axis to see their relationships.

http://quince.infragistics.com/1187

Example of the Multi-Y Graph UX Pattern Example of the Multi-Y Graph UX Pattern

Sources

Jennifer Tidwell, Designing Interfaces

Tags

Chart, Displaying Complex Data.