Btukfyl

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?

How about sorting data after drop event and then use series.setData to update the chart:

  plotOptions: {

    series: {

      point: {

        events: {

          drop: function() {

            var series = this.series,

                xData = series.xData.slice(),

                yData = series.yData.slice(),

                newData = ;



            xData.forEach(function(data, i) {

                newData.push([

                data,

                yData[i]

              ]);

            });



            newData.sort(function(a, b) {

                return a[0] - b[0];

            });



            series.setData(newData, false, false);     

            series.chart.redraw();

          }

        }

      },

      stickyTracking: false

    },

  }

Demo:
http://jsfiddle.net/BlackLabel/6kyt3roL/