Drag graph and update y axis interval dynamically

[Ragu nathan]

Hi,

I have a chart with multiple y-axis. I want to drag and change the graph position dynamically.

I have sample jsfiddle. Is it possible to drag the graph dynamically and update y axis interval

[Ragu nathan]

I have tried this example. Here I can able to drag the datapoints. But I want to drag the entire horizontal line

Update Fiddle

[Adithya Menon]

@ragu1991nathan,

It is possible to change the position of a dataPoint by clicking on the marker and dragging as of now. But, moving the entire line by clicking on the dataPoint or on the line is not possible as of now.

—
Adithya Menon
Team CanvasJS

[Ragu nathan]

I tried to update the axisY interval dynamically which looks the entire line is moving. But it’s not looking good. Any suggestion?

Updated fiddle

[Adithya Menon]

@ragu1991nathan,

To move the entire line by clicking on the dataPoint, you will have to change the position of dataPoint by adding / subtracting a value indicated by the mouse position with the dataPoint’s value, along with it, you will also have to add / subtract the same value to the entire dataSeries as shown in the code-snippet below,

for(var i = 0; i < chart.options.data[selectedDataSeries].dataPoints.length; i++) {
            if(chart.options.data[selectedDataSeries].dataPoints[i] !== chart.data[selectedDataSeries].dataPoints[selectedDataPoint]) {
              chart.options.data[selectedDataSeries].dataPoints[i].y = chart.options.data[selectedDataSeries].dataPoints[i].y + yValueDifference;
   }
}

Kindly take a look at this JSFiddle for an example on repositioning the entire dataSeries by dragging a single dataPoint.

—
Team CanvasJS
Adithya Menon