0

I want to add the drag and drop event functionality to the xAxis plotline in angular2 highcharts. The answer to this question has a good description of how to do it - https://stackoverflow.com/a/18484071/4567096. (http://jsfiddle.net/VXTeR/1/ - link from answer) I am trying to adapt the code to angular2-highcharts. Being a newbie to TS/JS/Angular2, I am not sure what the mistakes are. The code I tried is:

import { Component,OnInit} from '@angular/core';
import { CHART_DIRECTIVES, Highcharts } from 'angular2-highcharts';

@Component({
selector: 'smooth',
directives: [CHART_DIRECTIVES],
template:`<chart [options]="options"></chart>`


})

export class AppSmoothComponent 
{options:Object;
line;clickX;clickY;
chart;

ngOnInIt(){
this.dranganddrop(this.chart)
}

dranganddrop=function(chart)
        {console.log(chart.xAxis[0].plotLinesAndBands[0]);
        this.line=chart.xAxis[0].plotLinesAndBands[0].svgElem.translate(0,0)
        .on('mousedown', this.start);
           }

start = function (e) {

    $(document).bind({
        'mousemove.line': this.step,
            'mouseup.line': this.stop
    });

    this.clickX = e.pageX - this.line.translateX;

}

step = function (e) {
    this.line.translate(e.pageX - this.clickX, e.pageY - this.clickY)
}
stop = function () {
    $(document).unbind('.line');
}          

constructor(){
 this.options={
     xAxis:[{
         plotLines:[{value:3,width:6,color:'blue',id:'T1'}],

    }],
     series:[{
         data:[1,2,3,4,5],
         allowPointSelect:true
     }]

 }
 }

 }

I would appreciate any help in understanding how to make this work or a simpler way to add drag and drop to xAxis plotline.

Community
  • 1
  • 1
Vysh
  • 718
  • 1
  • 7
  • 20

1 Answers1

1

It might look like:

Template

<chart [options]="options" (load)="load($event.context)"></chart>

Component

export class App {
  options = {
      xAxis: [{
        plotLines: [{ value: 3, width: 6, color: 'blue', id: 'T1' }],
      }],
      series: [{
        data: [1, 2, 3, 4, 5],
        allowPointSelect: true
      }]
    };

  line: any;
  clickX: any;

  start = (e) => {
    document.addEventListener('mousemove', this.step);
    document.addEventListener('mouseup', this.stop)

    this.clickX = e.pageX - this.line.translateX;
  }

  step = (e) => {
    this.line.translate(e.pageX - this.clickX)
  }

  stop = () => {
    document.removeEventListener('mousemove', this.step);
    document.removeEventListener('mouseup', this.stop);
  }

  load(instance) {
    this.line = instance.xAxis[0].plotLinesAndBands[0].svgElem
      .attr({
        stroke: 'yellow'
      })
      .css({
        'cursor': 'pointer'
      })
      .translate(0, 0)
      .on('mousedown', this.start);
  }
}

Plunker Example

yurzui
  • 205,937
  • 32
  • 433
  • 399