Use Plotly with touch interactions

plotly.js
1

Hey,

Is there a possibility to use plotly with touch? So for example to pan the diagram with an iPad touch input?

Or does it work but not with AngularJS?

2

Not at the moment unfortunately.

I’m curious though. What kind of interactions are you thiking about?

3

Hey, thanks for your fast response.

I want to create a pan only diagram and scroll through the data on a touch display. (e.g. to a specific point of time)

Any idea on how am I able to translate touch inputs to mouse events?

4

That would be cool.

Unfortunately, I can’t think of robust way to implement this at the moment.

I created an issue Add 'touch' handlers for panning on mobile devices · Issue #480 · plotly/plotly.js · GitHub to start a discussion about it among plotly.js developers.

Thanks for writing in.

5

This PR correctly changed some of plotly’s behavior when the device does not have hover capabilities. When the device does not have hover, many interactions normally triggered by mouseover are now triggered by click. It’s relatively straightforward to intercept touch events and re-emit them as mouse events, here’s a working CodePen example (interact with it in your mobile device). This should get you most of the way towards using touch in plotly.

Note that the has-hover package being used by plotly.js returns true for the Android emulator (and false for an Android device). Consequently, plotly will still listen for mouseover events on the Android emulator. Use a physical Android device to test plotly touch interactions instead of an emulator. This is likely a bug with either the has-hover package or the Android emulator, but I haven’t dug in deeply enough to figure out the source of the issue.

6

Hello,

I’ve made some functionality that depends on plotly_click. Where /how can I make this click available to touch events on ipads and android phones?

Thanks.

7

Hello,

thank you very much!!! That helps a lot! I’m so glad to find a so easy an simple to use code extension.

Thank you Malina

8

For what it’s worth, I tested plotly.js events via Dash with a Microsoft Surface today, and hover and click events were fired. I tested with this app: dash.plot.ly/interactive-graphing.