search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.94k stars 1.86k forks source link

Add 'touch' handlers for panning on mobile devices #480

Closed etpinard closed 6 years ago

etpinard commented 8 years ago

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

why not?

kusan-thana commented 8 years ago

Is there a way to add the compatibility to our scripts? Or how can I help to include this feature into the library?

rreusser commented 8 years ago

Pulled this off successfully once (requires mobile device for full effect, obv). Here's the code. Unfortunately it's not very isolated into something reusable.

Useful utilities:

I won't list them all but long story short, there are good isolated utilities that can hopefully handle as much as possible and straighten out browser kinks, hopefully leaving the rest pretty short.

Bonus features:

rreusser commented 8 years ago

Although, that said, camera, pan, and zoom (and a couple other trivial variables) look like the only external references, so maybe it's not inconceivable to think about just lifting that code and swapping out some logic.

kusan-thana commented 8 years ago

I tried this: http://stackoverflow.com/questions/1517924/javascript-mapping-touch-events-to-mouse-events

I thought it would have been nice to have the touch work as the mouse (before implementing new features like pinch, etc.).

But it doesn't seem to work.

Another thing, I can't have relayout work for camera changes.

    var update = {
        title: 'Surface Plot 2',
        scene: {
          camera: {
            eye:{
              x:1,
              y:1,
              z:1
            }
          }
        }
    }
    Plotly.relayout('myDiv', update);

I get the title updated but not the camera, any idea why?

Edit : got to modify camera position manually like in this exemple: http://codepen.io/etpinard/pen/WxrRoG calling this code with: document.addEventListener("touchstart", touchHandler, true);

jdugge commented 8 years ago

The Bokeh plotting library supports this, all the tools (pan, zoom, box zoom, box select, lasso select) work really well using touch gestures. If I understand correctly, Bokeh uses the hammer.js library for handling touch events.

sriver commented 8 years ago

Any news/plans on this front? Would really love to manipulate plotly.js graphs in a touch-based cordova app.

dy commented 7 years ago

Used touch-position and touch-pinch in pan-zoom, should say these two cover both mouse and touch interactions neatly.

martin-braun commented 7 years ago

Any updates on this? The touch functionality is not working at me, is someone working on it? We need touch support in our project.

hy9be commented 7 years ago

@etpinard Is this still a part of the roadmap for Plotly 1.x?

dy commented 7 years ago

There are actually ready patches for that https://github.com/mikolalysenko/3d-view-controls/pull/1 and https://github.com/gl-vis/gl-plot3d/pull/6

dy commented 7 years ago

Merged.

jackparmer commented 7 years ago

3d chart touch is working now thanks to @dfcreative 🙇 Any companies out there that want to fund this one for 2d chart touch? http://plot.ly/products/consulting-and-oem/

sriver commented 7 years ago

This example seems to work also for 2d scattergl plots by adding those modifications to plots->gl2d->camera.js. However, to be useful for more complex cases (mine has a mixture of bars and scatter in the same graph), similar modifications would be needed elsewhere, but there is no camera.js equalent for generic 2d cases. In ideas how to implement this more generally (e.g. without Webgl)?

drorasaf commented 7 years ago

@jackparmer , 2d support is for cartesian as well as webgl? I wonder what's the scope of work.

g34g34 commented 7 years ago

Any plan to support pinch-to-zoom in the future?

malina-kirn commented 7 years ago

PR https://github.com/plotly/plotly.js/pull/1804 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. As linked earlier in this thread, 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, though pinch-to-zoom and two-finger scroll don't work.

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.

swiperii commented 6 years ago

@malina-kirn The CodePen example you provided seems not to work anymore. Maybe related to #1967?

etpinard commented 6 years ago

Closing.

Parts of this tickets were either: