Skip to content

Touch support for selection plugin #505

dnschnur opened this Issue Sep 28, 2012 · 12 comments

5 participants

Flot member

Original author: (October 11, 2010 00:21:15)

Add touch support to the selection plugin (specifically for iPad support).

Patch attached allows you to select an area on a plot on an iPad using your finger in a similar manner to the way selection is currently done with the mouse. This has been tested on Mobile Safari on iPad 3.2 and iPhone 4.0. This works great for single finger touch and drag, however I'm not sure how to handle multiple touches appropriately.

Original issue:

Flot member

From on October 11, 2010 00:23:12
Attaching patch I forgot to attach with issue sorry.

Flot member

From on October 21, 2010 20:16:16
Updated patch as the 'return false' on the onMouseDown event handler was preventing mouseover events from firing when touching a point on a plot on a touch screen device. This broke the hover feature on touch screen devices.

The return false was originally introduced to prevent the onMouseDown event handler being called twice per event (iPad/iPhone fires 'touchstart' then 'mousedown' events on every touch). Instead we disable the mousedown event if we catch a touchstart event; inspired by PPK's post on touch events (

Flot member

From on December 14, 2010 22:47:16
Okaydokey. It's nice you're working on this!

I just looked through your patch. Seems okay, but I get the feeling it might have to be extended at some point so I think it would be less confusing if the mouse paths and touch paths could be better separated with some refactoring.

Flot member

From on March 10, 2011 06:47:35
The Selection is working great now. Thanks. But what about the zoom feature?
When I have it enabled, it zooms in and right away out again.
But only on an IOS device. Works fine on desktop browsers.
I found out that in mobile safari, after the touchstart, move and end events are done, another onclick event is fired. Which is why the graph zooms out again.

Is there any way to supress this subsequent onclick when using a touch device?
All I tried broke the normal onclick, too. Which of course you need to highlight data points in the graph.

Flot member

From on October 22, 2011 11:31:41
Excellent suggestion, to include touch events in the system; saved me a lot of time;

However, I found that the default action of a touch-enabled browser is zooming/panning etc. Which leads to undesired results and may be annoying. So I would like to suggest the following:

    function onMouseMove(e) {
        if ( {

            plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
            // prevent the default action
Flot member

From markos on November 25, 2011 15:57:42
I submitted a patch (pull request) in git since I didn't find this code (or any working) in code base.

Flot member

From on February 01, 2012 20:41:31
I happened to need this patch for some android work, so I applied the current patch (which didn't apply cleanly and needed some work by hand) against flot 0.7. However, I altered the prevention of the default in onMouseMove so it only prevents the default action if there it was the result of a touch event. This is just a drive by patching, so hopefully it is sufficient. Thanks.

Flot member

From on August 23, 2012 16:06:20
none of the patches allow me to select anything with galaxy s2, anyone had any luck?

mgonto commented Apr 17, 2013

So, which is the patch to apply? I need this

naknak commented Dec 3, 2013

Pull request #1206 submitted...

@dnschnur dnschnur was assigned Jan 5, 2014
@dnschnur dnschnur closed this Jan 5, 2014

How do I use the patch on a javascript file ? will it be picked up automatically ? Will I need to include it in the html 5 for being picked up ?


See #1431

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.