Dygraphs Tablet and Phone Custom Interaction Touch Point Selection

function init() {
// Create the chart
chart = new Dygraph(
document.getElementById("chartContainer"),
"userData.csv", // path to CSV file
{ ylabel: 'User Patience',
xlabel: 'Time',
hideOverlayOnMouseOut: false,
drawPoints: true,
animatedZooms:false,
fillGraph:true,
legend: "always",
interactionModel:{
mousedown: Dygraph.defaultInteractionModel.mousedown,
mousemove: Dygraph.defaultInteractionModel.mousemove,
mouseup: Dygraph.defaultInteractionModel.mouseup,
touchstart: newDygraphTouchstart,
touchend: Dygraph.defaultInteractionModel.touchend,
touchmove: Dygraph.defaultInteractionModel.touchmove
}
} // options
);
};

function newDygraphTouchstart(event, g, context) {
// This right here is what prevents IOS from doing its own zoom/touch behavior
// It stops the node from being selected too
event.preventDefault(); // touch browsers are all nice.

if (event.touches.length > 1) {
// If the user ever puts two fingers down, it's not a double tap.
context.startTimeForDoubleTapMs = null;
}

var touches = [];
for (var i = 0; i < event.touches.length; i++) {
var t = event.touches[i];
// we dispense with 'dragGetX_' because all touchBrowsers support pageX
touches.push({
pageX: t.pageX,
pageY: t.pageY,
dataX: g.toDataXCoord(t.pageX),
dataY: g.toDataYCoord(t.pageY)
// identifier: t.identifier
});
}
context.initialTouches = touches;

if (touches.length == 1) {
// This is just a swipe.
context.initialPinchCenter = touches[0];
context.touchDirections = { x: true, y: true };

// ADDITION - this needs to select the points
var closestTouchP = g.findClosestPoint(touches[0].pageX,touches[0].pageY);
if(closestTouchP) {
var selectionChanged = g.setSelection(closestTouchP.row, closestTouchP.seriesName);
}
g.mouseMove_(event);

} else if (touches.length >= 2) {
// It's become a pinch!
// In case there are 3+ touches, we ignore all but the "first" two.

// only screen coordinates can be averaged (data coords could be log scale).
context.initialPinchCenter = {
pageX: 0.5 * (touches[0].pageX + touches[1].pageX),
pageY: 0.5 * (touches[0].pageY + touches[1].pageY),

// TODO(danvk): remove
dataX: 0.5 * (touches[0].dataX + touches[1].dataX),
dataY: 0.5 * (touches[0].dataY + touches[1].dataY)
};

// Make pinches in a 45-degree swath around either axis 1-dimensional zooms.
var initialAngle = 180 / Math.PI * Math.atan2(
context.initialPinchCenter.pageY - touches[0].pageY,
touches[0].pageX - context.initialPinchCenter.pageX);

// use symmetry to get it into the first quadrant.
initialAngle = Math.abs(initialAngle);
if (initialAngle > 90) initialAngle = 90 - initialAngle;

context.touchDirections = {
x: (initialAngle < (90 - 45/2)),
y: (initialAngle > 45/2)
};
}

// save the full x & y ranges.
context.initialRange = {
x: g.xAxisRange(),
y: g.yAxisRange()
};
};

<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
canvas {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}
</style>