Fingelrest
Posts: 11
Joined: Mon Feb 07, 2011 2:40 pm

Preventing a chart from interfering with iPhone scrolling?

Hi all,

I'm trying to use HighCharts on the iPhone. Works great for now, but I can't scroll the page over the area where a chart is lying.

What I would like is to have the charts act just like normal images, i.e., wherever I put my finger I can scroll the page. I've tried to disable everything related to mouse tracking, but still it seems that the charts are capturing the mouse events, thus preventing page scrolling from working. This is very annoying for instance when a chart is covering the whole screen, as there's no way to scroll the page in this case.
hfrntt
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: Preventing a chart from interfering with iPhone scrolling?

Take a look here: http://highslide.com/forum/viewtopic.php?f=1&t=7630 However, if you don't need toolitp or clickable legend you can overlay chart with a div element and it'll work, check this: http://fiddle.jshell.net/7Mmee/4231/ (or directly, page with chart: http://fiddle.jshell.net/7Mmee/4231/show )
Slawek Kolodziej
Highcharts support team
Fingelrest
Posts: 11
Joined: Mon Feb 07, 2011 2:40 pm

Re: Preventing a chart from interfering with iPhone scrolling?

Thanks a lot! The trick with the overlay div works great!
mkmurray
Posts: 1
Joined: Thu Feb 02, 2012 11:39 pm

Re: Preventing a chart from interfering with iPhone scrollin

hfrntt wrote:However, if you don't need toolitp or clickable legend you can overlay chart with a div element and it'll work...
What if I need to keep tooltip when viewed on iPad? What is the solution then? When trying to do a swipe gesture to scroll the page on iPad, if the swipe starts in a HighChart the event appears to be captured by HighCharts and doesn't allow the browser window to scroll.
hfrntt
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: Preventing a chart from interfering with iPhone scrollin

It requires some source code changes (I suppose that removing this line: https://github.com/highslide-software/h ... c.js#L2316 should help) but if you allow scrolling, other default behaviours (like selecting text during the chart selection) could occur as well.
Slawek Kolodziej
Highcharts support team
frankxu
Posts: 1
Joined: Wed Jun 06, 2012 3:07 am

Re: Preventing a chart from interfering with iPhone scrollin

hfrntt wrote:It requires some source code changes (I suppose that removing this line: https://github.com/highslide-software/h ... c.js#L2316 should help) but if you allow scrolling, other default behaviours (like selecting text during the chart selection) could occur as well.
Hi hfrntt,
The line L2316 is blank. Can you be more specify on how to make the changes?

Thanks,
Frank
hfrntt
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: Preventing a chart from interfering with iPhone scrollin

I gave you a line number, it's quite specific. My bad that I gave a link to the file in a master branch, it changes quite often. Now it's around line 2160 (https://github.com/highslide-software/h ... c.js#L2160). It's exactly this line:

Code: Select all

	on: function (eventType, handler) {
		var fn = handler;
		// touch
		if (hasTouch && eventType === 'click') {
			eventType = 'touchstart';
			fn = function (e) {
				[hilight]e.preventDefault();[/hilight]
				handler();
			};
		}
		// simplest possible event model for internal use
		this.element['on' + eventType] = fn;
		return this;
	},
However, if it'll work, then I advice to remove these four lines:

Code: Select all

fn = function (e) {
	e.preventDefault();
	handler();
};
it has more sense.
Slawek Kolodziej
Highcharts support team
Raccoon
Posts: 6
Joined: Wed Jun 20, 2012 3:39 pm

Re: Preventing a chart from interfering with iPhone scrollin

I have tried out the fix suggested above but it doesnÔÇÖt work ÔÇô on the chart area, scrolling is still not possible on my iPhone.

Also, even if the fix had worked, such a code change could easily cause problems, e.g. in the future when new versions of HighCharts are released.

Is there a better fix (preferably one that is/will be incorporated in the code base)?
hfrntt
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: Preventing a chart from interfering with iPhone scrollin

I narrowed which lines exactly prevents default behavior (here you can find a git diff):

Code: Select all

@@ -8532,24 +8532,24 @@ MouseTracker.prototype = {
       }
 
       var chartX = e.chartX,
         chartY = e.chartY,
         isOutsidePlot = !chart.isInsidePlot(chartX - chart.plotLeft, chartY - chart.plotTop);
 
       // on touch devices, only trigger click if a handler is defined
       if (hasTouch && e.type === 'touchstart') {
         if (attr(e.target, 'isTracker')) {
           if (!chart.runTrackerClick) {
-            e.preventDefault();
+            // e.preventDefault();
           }
         } else if (!chart.runChartClick && !isOutsidePlot) {
-          e.preventDefault();
+          // e.preventDefault();
         }
       }
 
       // cancel on mouse outside
       if (isOutsidePlot) {
 
         /*if (!lastWasOutsidePlot) {
           // reset the tracker
           resetTracker();
         }*/
@@ -8621,21 +8621,21 @@ MouseTracker.prototype = {
         }
 
       } else if (!isOutsidePlot) {
         // show the tooltip
         mouseTracker.onmousemove(e);
       }
 
       lastWasOutsidePlot = isOutsidePlot;
 
       // when outside plot, allow touch-drag by returning true
-      return isOutsidePlot || !chart.hasCartesianSeries;
+      // return isOutsidePlot || !chart.hasCartesianSeries;
     };
 
     /*
      * When the mouse enters the container, run mouseMove
      */
     container.onmousemove = mouseMove;
 
     /*
      * When the mouse leaves the container, hide the tracking (tooltip).
      */
However I spent some time trying to get it working without touching the source code, and I did it. Now it works as an external module, you can find the code: https://gist.github.com/2983403

Demo is available here: http://jsfiddle.net/TBtM3/show (and its code: http://jsfiddle.net/TBtM3/)
Slawek Kolodziej
Highcharts support team
Raccoon
Posts: 6
Joined: Wed Jun 20, 2012 3:39 pm

Re: Preventing a chart from interfering with iPhone scrollin

First tests look great, thank you! :)
methnen
Posts: 22
Joined: Fri May 27, 2011 11:40 pm

Re: Preventing a chart from interfering with iPhone scrollin

@hfrntt Just wanted to say thanks for sharing the fix. Was a big help.

Jamie
Raccoon
Posts: 6
Joined: Wed Jun 20, 2012 3:39 pm

Re: Preventing a chart from interfering with iPhone scrollin

Used this fix for some time but we have now run into problems.

For other reasons (getting HTML formatting in the legend to work), we had to upgrade to an unreleased version from GitHub (1.2.4).

Now, the iDevice scroll fix does not work anymore. There are no obvious errors, the behavior is just like before the fix. Any ideas?
hfrntt
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: Preventing a chart from interfering with iPhone scrollin

This path wasn't released by highsoft (let's say that I made it in my free time :) ), so for now I can't provide you estimated time when it will be fixed.

Anyway, I know that handling touch events was rewritten recently (commit d610ec3cf8), so feel free to update my gist or post a feature request (http://highcharts.uservoice.com) if you want this available in options.
Slawek Kolodziej
Highcharts support team

Return to “Highcharts Usage”