How/should I display data that has different units in a chart?

Question

I need to display some data for users to look at at track their progress, and at first I thought of using a line chart, which at a glance seems okay.

But the problem is there are 2 different units displayed, kgs and cm. (Technically there are 4, kgs/lbs, and cm/inches but the user chooses which metric they want on a settings page).

The issue I think the chart has, is the value could be mis-read. You see the value is 50, but because I can't label the V axis, and there are multiple units, you have to look further to understand what the value applies to.

Is this as much of a problem as I think it is, or am I thinking too hard about this?

If this could be an issue, does anybody have any suggestions on how else I could display this data?

Here's a JSFiddle with some test data, and a chart if anybody wants to have a play with it.

Update: This is what I ended up with.

Answer 1

I think you're right to be mildly concerned about mixing the units, and even if you could label the Y axis, it wouldn't make the problem go away.

If you want to remain consistent in your units, breaking things out into tabs is a reasonable option, though it does detract from the 'at-a-glance' value of the data display.

Creating tabs gives you a couple more opportunities to use labels (i.e. in the tab label) to reconfirm the metrics - "This tab is for kg. This tab is for cm" - so in the measurements tab, you don't have to repeat it for every measurement i.e. "Waist, Bicep" not Waist(cm), Bicep(cm)

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Combining two types of data in one chart makes it difficult to read and understand at a glance. If you really have to keep them in one chart, consider using a visibly different display type - e.g. a bar chart to display kilograms and line chart to plot centimeters.

A nice example could be seen here: Highcharts dual axes demo, also pictured below:

Note that there are two axes on both sides of the chart. This allows you to have two independent ranges of values for both data types. Still, it's not a perfect solution - if your design allows for some more space, try splitting it into two charts, which would greatly improve readability.

Answer 3

We dealt with this question at my job recently and we used multiple charts in a dashboard design at first. This made it very clear what data set you were viewing, since each chart had a prominent title.

In a later iteration, we switched to a solution similar to tabs: a dropdown menu to select a metric. The switch made it easier for users on mobile devices to view the data. They had much less scrolling to do when they viewed one chart at a time.

You can see our project at http://www.zingchart.com/demos/fantasy-football/