How do you provide interaction in plots and graphs on touch devices?

Question

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.

Answer 1

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!

Answer 2

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.