CODEWITHSUNDEEP
javascriptangularjsdraggablejqplot
Venugopal
Venugopal

Reputation: 1896

jqPlot with constrainTo - get dragged point value

I have useddragable option, restricting dragging to a single axis using constrainTo, while plotting a graph on all the series.

series: [{
    dragable: {
        constrainTo: 'y',
    }
}, {
    dragable: {
        constrainTo: 'y',
    }
},
....
]

Now, I want the new value of the point which is being dragged and the series too so that I will know which series to update. I found few questions related to my need.

  1. [jqplot]Get the point index when dragged

    $('#chart1').bind('jqplotDataClick',function(ev, seriesIndex, pointIndex, data) {});

    though the question is about drag, the given answer is for click event using jqplotDataClick which won't work in my case

  2. Jqplot - How do get array back from already created graph

    $('#chart1').bind('jqplotDragStop',function(ev, seriesIndex, pointIndex, data) {
    console.log(chart.series[0].data);
});

    this is about getting the whole series data after drag. this might work well when you have only one series and limited data set. In my case, I'm dealing with multiple series and each series contains nearly 100 data points.

  3. Draggind data points and submitting values

    this, again, summarize the above two but with an extra option postDrawSeries.

So, is there any way I can get

  1. dragged point value
  2. dragged series details.

Note: when constrainTo is used, pointIndex in the callback function gives the poistion of the mouse but the dragged point details. Ex. Suppose Im dragging (2, 100) and my mouse poision is, say (10, 200). As I'm using constrainTo on y-axis, the actual point value is (2, 200) but what I'm getting in pointIndex is mouse position i.e. (10, 200).

you can check the fiddle here

Upvotes: 1

Views: 388

Answers (1)

Ian A
Ian A

Reputation: 6163

Unfortunately I can't find any official docs to back up my answer, however from looking at the Draggable source, there appears to be a jqplotDragStart event which has parameters seriesIndex (the index of the series containing the dragged point) and pointIndex (the index of the dragged point within the series).

I've implemented this event handler assigned these parameters to Javascript variables when dragging is started:

var draggedPointValue;
var draggedSeriesValue;

...

$('#chart1').bind('jqplotDragStart',function(ev, seriesIndex, pointIndex, data) {   
    console.log('started dragging point ' + pointIndex);
    console.log('started dragging series ' + seriesIndex);
    draggedPointValue = pointIndex;   
    draggedSeriesValue = seriesIndex;   
});

They can then be accessed by your jqplotDragStop function:

$('#chart1').bind('jqplotDragStop',function(ev, seriesIndex, pointIndex, data) {
    console.log(draggedPointValue);
    console.log(draggedSeriesValue);
    console.log(pointIndex);
    //console.log(plot1.series);
});

You will still have to get the new 'y-axis' value from the yaxis attribute of the pointIndex parameter of the jqplotDragStop function.

I've created a Fiddle to demonstrate this.

Upvotes: 3

Related Questions