Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Traditional graphs like this http://dygraphs.com/tests/range-selector.html or http://www.highcharts.com/products/highstock have tooltips to indicate the values at cursor position. Since there is no cursor in a touch based device.. that element of interactivity is not available.

Also the range selector has couple of hooks that are easy to latch onto with the mouse, but fairly difficult to use with touch.

Are there any interaction paradigms to follow for graphs on touch interfaces? I have used native iOS library like CorePlot earlier, but it was limited in capabilities. So started looking at the Web based plotting frameworks. Quite a few of them claim to have touch support but I think the graph interaction patterns need to change.

Even the common pinch and zoom.. though it can be used to zoom into a plot - very often conflicts with the rest of the page. It gets confusing - you don't know if you have zoomed the plot or the whole page.

I have been looking mainly at Canvas based Plotting libraries like dygraphs, jqPlot but I am assuming the same applies to SVG based ones as well.

If you could point me to some great examples of charting for touch based devices or best practices, that would help a lot.

share|improve this question
1  
Takes a look at Sencha Touch Charts. –  JohnGB Feb 2 '13 at 5:06
    
Thank you. Looked at it. Seem very basic in terms of interaction patterns. I will look around more and may be develop my own. –  Sudhir Feb 2 '13 at 5:41
1  
In decreasing order of interactivity, checkout Tableau Mobile, Roambi Analytics, SAS Mobile BI. Search for 'business intelligence' on the app store to find more apps like those. –  user1757436 Feb 6 '13 at 11:33
    
Thanks you @user1757436. Useful. –  Sudhir Feb 7 '13 at 10:59
add comment

2 Answers 2

up vote 3 down vote accepted

I would look at Apple's native Stocks app on the iPhone for inspiration with both UI and UX. The app allows users to display a larger graph by rotating their phone into landscape mode, at which point you can interact with the graph. The two main interactions a user can have with the map are as follows:

  1. Tapping and holding with one finger gives the user the ability to get pricing information for a specific point in time (minute, day, week, etc.). Users can move along the graph seamlessly by dragging their finger across the screen.
  2. Tapping and holding with one finger and then tapping and holding with another finger gives the user the ability to see the change in price of the stock over a set period of time (as shown in this screenshot). Users can also move both points of the range.

For additional functionality, I can see the following gestures being useful/intuitive:

  • Single-tap to show the graph in fullscreen-mode
  • Double-tap to zoom in on a specific section of the graph
  • Press-and-hold to show a specific point and its value on the graph
  • Swiping for moving along the x-axis and y-axis
  • Two-finger tap to zoom out
  • Two-finger double tap to zoom out to the maximum view area
  • Spread fingers apart to zoom in
  • Pinch fingers together to zoom out

Hope that helps!

share|improve this answer
1  
Thank you Luke. These are all useful suggestions and good starting points. I will update this with our findings as we go about implementing. –  Sudhir Feb 6 '13 at 11:28
add comment

As a beginner Android developer, I've had the same concern, however I have not found any information about it. But to deal with this problem I would implement something like a "cursor mode" (a toggle button always on the screen), where the normal touch interaction be suspended for the sake of typical interaction of a cursor, as the one shown in your examples.

Thus, the user would drag or touch the screen with one finger, and independently of its vertical position on the screen, an indicator would be located on the graph providing the current horizontal coordinate and its corresponding graph value, just as happens for mouse cursor in your examples.

In this vein, within this same "cursor mode" and when the user does certain interaction (may be two-finger tap), he/she could start selecting a range, enabling a button at the top or bottom of the screen to exit the range selection.

This is what I'd do, but if you find a better solution please don't hesitate to post it here as a new answer. Thank you.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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