Skip to content

Instantly share code, notes, and snippets.

@slawekkolodziej
Created June 24, 2012 14:26
Show Gist options
  • Save slawekkolodziej/2983403 to your computer and use it in GitHub Desktop.
Save slawekkolodziej/2983403 to your computer and use it in GitHub Desktop.
Highcharts tracker now don't prevent default behavior (like scrolling on touch devices).
Highcharts.Chart.prototype.callbacks.push(function(chart) {
var hasTouch = document.documentElement.ontouchstart !== undefined,
mouseTracker = chart.tracker,
container = chart.container,
mouseMove;
mouseMove = function (e) {
// let the system handle multitouch operations like two finger scroll
// and pinching
if (e && e.touches && e.touches.length > 1) {
return;
}
// normalize
e = mouseTracker.normalizeMouseEvent(e);
if (!hasTouch) { // not for touch devices
e.returnValue = false;
}
var chartX = e.chartX,
chartY = e.chartY,
isOutsidePlot = !chart.isInsidePlot(chartX - chart.plotLeft, chartY - chart.plotTop);
// cancel on mouse outside
if (isOutsidePlot) {
/*if (!lastWasOutsidePlot) {
// reset the tracker
resetTracker();
}*/
// drop the selection if any and reset mouseIsDown and hasDragged
//drop();
if (chartX < chart.plotLeft) {
chartX = chart.plotLeft;
} else if (chartX > chart.plotLeft + chart.plotWidth) {
chartX = chart.plotLeft + chart.plotWidth;
}
if (chartY < chart.plotTop) {
chartY = chart.plotTop;
} else if (chartY > chart.plotTop + chart.plotHeight) {
chartY = chart.plotTop + chart.plotHeight;
}
}
if (chart.mouseIsDown && e.type !== 'touchstart') { // make selection
// determine if the mouse has moved more than 10px
hasDragged = Math.sqrt(
Math.pow(mouseTracker.mouseDownX - chartX, 2) +
Math.pow(mouseTracker.mouseDownY - chartY, 2)
);
if (hasDragged > 10) {
var clickedInside = chart.isInsidePlot(mouseTracker.mouseDownX - chart.plotLeft, mouseTracker.mouseDownY - chart.plotTop);
// make a selection
if (chart.hasCartesianSeries && (mouseTracker.zoomX || mouseTracker.zoomY) && clickedInside) {
if (!mouseTracker.selectionMarker) {
mouseTracker.selectionMarker = chart.renderer.rect(
chart.plotLeft,
chart.plotTop,
zoomHor ? 1 : chart.plotWidth,
zoomVert ? 1 : chart.plotHeight,
0
)
.attr({
fill: mouseTracker.options.chart.selectionMarkerFill || 'rgba(69,114,167,0.25)',
zIndex: 7
})
.add();
}
}
// adjust the width of the selection marker
if (mouseTracker.selectionMarker && zoomHor) {
var xSize = chartX - mouseTracker.mouseDownX;
mouseTracker.selectionMarker.attr({
width: mathAbs(xSize),
x: (xSize > 0 ? 0 : xSize) + mouseTracker.mouseDownX
});
}
// adjust the height of the selection marker
if (mouseTracker.selectionMarker && zoomVert) {
var ySize = chartY - mouseTracker.mouseDownY;
mouseTracker.selectionMarker.attr({
height: mathAbs(ySize),
y: (ySize > 0 ? 0 : ySize) + mouseTracker.mouseDownY
});
}
// panning
if (clickedInside && !mouseTracker.selectionMarker && mouseTracker.options.chart.panning) {
chart.pan(chartX);
}
}
} else if (!isOutsidePlot) {
// show the tooltip
mouseTracker.onmousemove(e);
}
lastWasOutsidePlot = isOutsidePlot;
}
container.onmousemove = container.ontouchstart = container.ontouchmove = mouseMove;
});
@SamirBoulil
Copy link

Hello, I updated My highchartJS lib from 2.2.0 to 2.2.5. I can't get rid of the error explained below (and above) :

" Uncaught TypeError: Object # has no method 'onmousemove' - file: touch-tooltip-fix.js:100
mouseMove ".

However, the vertical scroll works perfectly while the horizontal scroll doesn't work at all. Did you manage to make the horizontal scroll work ?
(I use a container of width=800px).

Thanks for sharing anyway!

@slawekkolodziej
Copy link
Author

Could you set up a jsbin demo demonstrating this issue?

@SamirBoulil
Copy link

@marco-martins
Copy link

Someone know if its possible create one method to trigger de click event on xAxes or yAxis labels?

@slawekkolodziej
Copy link
Author

@Watticsam, your demo uses 2.2.0. I wrote, this "patch" requires at least 2.2.5. You can check current version by reading Highcharts.version property. Here's updated and working version: http://jsbin.com/oxitat/24/edit

@SamirBoulil
Copy link

@slawekkolodziej
The error disappeared. Sorry for the inconvenience. However I can't manage to add the horizontal scroll this way :/

Do you have any idea ?

Thanks

@ebrelsford
Copy link

@slawekkolodziej this is really useful. thank you!

@mwillson1
Copy link

@slawekkolodziej great fix for the scrolling issues I was having on my iPad! I was wondering if it ok to use this patch in my commercial web application. I suspect that since this is public you don't have any license restrictions but I just wanted to check. Thanks again.

@ricardoferreira1980
Copy link

For Highcharts 3.0, you can use this script. https://gist.github.com/ricardoferreira1980/5335186

@ShalomAleichem
Copy link

lastWasOutsidePlot is undefined

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment