0

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.

enter image description here

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.

enter image description here

2

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)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • I like the tab idea a lot, thanks :). I think this is what I'll end up going with, but I'm just gonna wait a little while, see if anybody else comes up with anything. – TMH Dec 10 '14 at 13:41
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:

Highchart two axes demo

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.

  • I like this idea, but I don't feel it works as well with the data as the tab idea does. Definitely a good idea though :). – TMH Dec 10 '14 at 14:56
0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.