title: Dynamic Highcharts moving, adding and removing points and series
body: <p>I have been looking at several questions and I haven’t found a solution to my problem.</p>
  
  <p>I want to do the following: </p>
  
  <ul>
  <li>Add a point to a selected series by clicking on the chart and the point should be sorted
  in on the X axis so the line flows in one direction and not just add
  it to the end of the series.</li>
  <li>remove a point in a series by doubleclick ( however this seems to be very difficult when using drag/drop extension) if it's not possible then remove a selected point with a button.</li>
  <li>drag and drop  points from any series.</li>
  <li>Add and remove series.</li>
  </ul>
  
  <p>I've done several tests in fiddler and if I do them all separately they work fine but when I try to combine them it fails.</p>
  
  <p>here is a test version: <a href="http://jsfiddle.net/rDKE3/" rel="nofollow">http://jsfiddle.net/rDKE3/</a></p>
  
  <pre><code>    var currentIndexSelected;
  var data;
  data = [
      [1, 29.9],
      [2, 71.5],
      [3, 106.4],
      [4, 129.2],
      [5, 144.0],
      [6, 176.0],
      [7, 135.6],
      [8, 148.5],
      [9, 216.4],
      [10, 194.1],
      [11, 95.6],
      [12, 54.4]
  ];
  var chart = new Highcharts.Chart({
      chart: {
          renderTo: 'container',
          defaultSeriesType: 'spline',
          events: {
              click: function (e) {
                  // find the clicked values and the series
                  var x = e.xAxis[0].value,
                      y = e.yAxis[0].value,
                      series = this.series[0];
  
                  // Add it
                  series.addPoint([x, y]);
                  // data.addPoint([x, y]);
  
              }
          }
      },
      xAxis: {
  
      },
      yAxis: {},
      legend: {
          layout: 'vertical',
          floating: true,
          backgroundColor: '#FFFFFF',
          align: 'right',
          verticalAlign: 'top',
          y: 60,
          x: -60
      },
      tooltip: {
          formatter: function () {
              return '&lt;b&gt;' + this.series.name + '&lt;/b&gt;&lt;br/&gt;' + this.x + ': ' + this.y;
          }
      },
      plotOptions: {},
      series: [{
          allowPointSelect: true,
          cursor: 'ns-resize',
          point: {
              events: {
                  select: function () {
                      var pId = this.series.data.indexOf(this);
                      currentIndexSelected = pId;
  
  
                      $('#out').html(
                          'Dragging &lt;b&gt;' + this.series.points[pId].y); //this.series.data[0].x + '&lt;/b&gt;, &lt;b&gt;');
  
                  },
  
                  drag: function (e) {
  
                      // Returning false stops the drag and drops. Example:
                      /*
                          if (e.newY &gt; 300) {
                              this.y = 300;
                              return false;
                          }
                          */
                      $('#drag').html(
                          'Dragging &lt;b&gt;' + this.series.name + '&lt;/b&gt;, &lt;b&gt;' + this.category + '&lt;/b&gt; to &lt;b&gt;' + Highcharts.numberFormat(e.newY, 2) + '&lt;/b&gt;');
                  },
                  drop: function () {
                      $('#drop').html(
                          'In &lt;b&gt;' + this.series.name + '&lt;/b&gt;, &lt;b&gt;' + this.category + '&lt;/b&gt; was set to &lt;b&gt;' + Highcharts.numberFormat(this.y, 2) + '&lt;/b&gt;');
                  }
              }
          },
          data: data,
          //data: [[1,29.9], [2,71.5],[3,106.4], [4,129.2], [5,144.0], [6,176.0], [7,135.6], [8,148.5], [9,216.4], [10,194.1], [11,95.6], [12,54.4]],
          draggableX: true,
          draggableY: true,
  
      }]
  });
  
  
  
  
  // button handler
  $('#button1').click(function () {
      //this.point[currentIndexSelected].remove();
      var chart = $('#container').highcharts();
      if (chart.series.length == 1) {
          //chart.series[0].remove();
          chart.addSeries({
              data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
              draggableX: true,
              draggableY: true
          });
      }
  
  
  
  
      var series = chart.getSelectedSeries();
      $('#out').html('length:' + series.length);
  
      data.splice(currentIndexSelected, 1);
  
      chart.series[1].setData(data);
      chart.redraw();
  
  });
  
  // button handler
  $('#button2').click(function () {
  
      var series = chart.getSelectedSeries();
  
  
      data.splice(currentIndexSelected, 1);
  
      chart.series[0].setData(data);
      chart.xAxis[0].setCategories(categories);
  
  });
  </code></pre>