I have a line chart in Highcharts and want to redraw or the line when dragging a point past another point.
I want to redraw and sort the chart while dragging so the line updates and don't cross eachother. We can update the chart with chart.series[0].setData() or chart.series[0].update(); but i keep getting sorting errors or errors with the draggable point being null (dragPoint or hoverPoint) when updating the chart
Here is an example where I detect when a point is being dragged past another by changing the getNewPos(e) function in the draggable module http://jsfiddle.net/u4xpmf2j/1/
*/
function getNewPos(e) {
toClose = false;
var originalEvent = e.originalEvent || e,
pageX = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageX : e.pageX,
pageY = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageY : e.pageY,
series = dragPoint.series,
draggableX = series.options.draggableX && dragPoint.draggableX !== false,
draggableY = series.options.draggableY && dragPoint.draggableY !== false,
dragSensitivity = pick(series.options.dragSensitiviy, 1),
dragMaxToPoint = pick(series.options.dragMaxToPoint, 0.3),
deltaX = draggableX ? dragX - pageX : 0,
deltaY = draggableY ? dragY - pageY : 0,
newPlotX = dragPlotX - deltaX,
newPlotY = dragPlotY - deltaY,
newX = dragX === undefined ? dragPoint.x : series.xAxis.toValue(newPlotX, true),
newY = dragY === undefined ? dragPoint.y : series.yAxis.toValue(newPlotY, true),
ret;
newX = filterRange(newX, series, 'X');
newY = filterRange(newY, series, 'Y');
if (dragPoint.index > 0 && (newX - dragPoint.series.data[dragPoint.index - 1].x) < dragMaxToPoint || dragPoint.index < dragPoint.series.data.length - 1 && (newX - dragPoint.series.data[dragPoint.index + 1].x) > -dragMaxToPoint) {
toClose = true; // DETECT POINT BEING DRAGGED PAST ANOTHER
}
if (Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)) > dragSensitivity) {
return {
x: draggableX ? newX : dragPoint.x,
y: draggableY ? newY : dragPoint.y
};
} else {
return null;
}
}
Any ideas?