Highcharts with Draggable Points
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
<div id="drag"></div>
<div id="drop"></div>
JavaScript
/**
* Experimental Draggable points plugin
* Revised 2013-06-13 (get latest version from http://jsfiddle.net/highcharts/AyUbx/)
* Author: Torstein Hønsi
* License: MIT License
*
*/
(function (Highcharts) {
var addEvent = Highcharts.addEvent,
each = Highcharts.each;
/**
* Filter by dragMin and dragMax
*/
function filterRange(newY, series, XOrY) {
var options = series.options,
dragMin = options['dragMin' + XOrY],
dragMax = options['dragMax' + XOrY];
if (newY < dragMin) {
newY = dragMin;
} else if (newY > dragMax) {
newY = dragMax;
}
return newY;
}
Highcharts.Chart.prototype.callbacks.push(function (chart) {
var container = chart.container,
dragPoint,
dragX,
dragY,
dragPlotX,
dragPlotY;
chart.redraw(); // kill animation (why was this again?)
addEvent(container, 'mousedown', function (e) {
var hoverPoint = chart.hoverPoint,
options;
if (hoverPoint) {
options = hoverPoint.series.options;
if (options.draggableX) {
dragPoint = hoverPoint;
dragX = e.pageX;
dragPlotX = dragPoint.plotX;
}
if (options.draggableY) {
dragPoint = hoverPoint;
dragY = e.pageY;
dragPlotY = dragPoint.plotY + (chart.plotHeight - (dragPoint.yBottom || chart.plotHeight));
}
// Disable zooming when dragging
if (dragPoint) {
chart.mouseIsDown = false;
}
}
});
addEvent(container, 'mousemove', function (e) {
if (dragPoint) {
var deltaY = dragY - e.pageY,
deltaX = dragX - e.pageX,
...