3

I created a chart using wijmo5. (Click here to see the actual chart in action)

enter image description here

The client wants and I quote,

mouse-over / finger-press will show the exact data for that datapoint

on the mobile phone.

I have my concerns because due to the restriction of the screen space, it is hard to select the right datapoint on a chart.

I did consider adding ball-like markers to indicate which datapoint the user is looking at. Not sure if this is the best UX decision.

An example of ball markers is this:

enter image description here

On top of that, if there are any good UX suggestions for charts on the mobile phone would be great as well.

I found a good suggestion at reddit about pinning the top and left part of the chart. I think they mean the axes.

In summary, what UX should I add/modify on my current chart so that user can select/view details about specific data points on the chart via the mobile phone? And if there are additional good UX tips for displaying charts on mobile phone that will be great as well.

Improve this question

2 Answers 2

Reset to default
4

A common UX pattern for mobile charting is is to allow the user to touch anywhere on the graph and then highlight the data points in line with the principal axis above or below the touch point. Additionally, adding a textual representation of the data isn't a bad idea.

For a quick example:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This can be adapted easily even to polar or radial plots, though it becomes difficult to zone in on those near the origin.

Something else that the New Relic mobile app does, which is highly relevant to their use-case as a system monitoring tool, is allow you to mute selected data sets in order to drill down on something specific. For example, total CPU usage graphed as a stacked area over time, where you can disable the "system" portion and look only at your "application", which is a boon on mobile where I imagine eye-balling stacked areas is a bit harder. In the screenshot below, you can tap the segments to add or remove them from the overall graph.

enter image description here

Improve this answer
5
  • Thank you for your effort to include such details, @msanford. Just an additional point to clarify. Does this mean you will actually display that vertical line which connects your diamond markers? I presume the red circle with the white hand represents where the user finger presses the screen.
    – Kim Stacks
    Commented Feb 18, 2015 at 12:41
  • Often, yes (just for clarity, usually a dashed line but I don't think Balsamiq does that). And your presumption is correct (I chose the finger icon but it's not very clear).
    – msanford
    Commented Feb 18, 2015 at 14:22
  • this may go a little beyond the scope of this question, but do you recommend any good chart libraries that implement what you say well? either html/js or mobile app libraries
    – Kim Stacks
    Commented Feb 18, 2015 at 15:22
  • 1
    Yes, Raphael.js (raphaeljs.com) will do something functionally similar: raphaeljs.com/analytics.html
    – msanford
    Commented Feb 19, 2015 at 20:25
  • Raphael.js does meet the requirement of having the markers touchable via mobile. It does not however, ensure that the axes are visible and pinned. Any advice on that?
    – Kim Stacks
    Commented Feb 19, 2015 at 23:59
1

I see two ways to accomplish what the client wants. One is a pinned, dynamic legend. This will display the values as they click around. This example shows with mouse over updates, but the visual would be the same.

Another option would be to use tooltips, but offset the text/value box to accommodate for someone's finger. You could also make the tooltip "sticky" so that it would appear for a set amount of time after the user moves their finger. An example of both of these can be seen here: http://www.zingchart.com/playground/run/546fb0b867a96

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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