Draggable points
Click and drag points on line charts and a correspoinding PointModified event so backend data can be updated.
This will allow features to be built so users can modify data using the chart itself.
draggable-points is an official module.
API reference: https://api.highcharts.com/highcharts/series.line.dragDrop
-
javabutter commented
Great Example... but can in this points are dragged over yAxis, any example of moving them in "xAxis"?? thx in advance.
-
Please keep in mind that I only published this code as a proof of concept. It should be considered a hack and comes without a guarantee of support.
-
Oskar Andersson commented
Yes, it seems even the marker: series: hover mechanics are affected by these "interruptions" - and they happen rather frequently im afraid. If you move 5 different points sequentially in your fiddle, it will be enough to trigger the bug. How to reinstall hoverpoints: move mousepointer outside chart, click, and back in again. I hope that this helps at all (to zone in on the potential bug / lack of functionality)... Will you look into this anytime soon?
-
I did some updates to the hack, which preserve the hoverPoint until the mouse drops. The case where the hoverPoints is not present on the second click, however, goes deeper.
-
Oskar Andersson commented
Sorry about the spam, I just wanted to add that you can easily reproduce the loss of hoverPoint if you click the same point repeatedly... (even if you do mousedown - wait - mouseup you can detect the absence of hoverPoint on mousedown, which would be needed to properly initialize a drag/drop)
-
Oskar Andersson commented
I suppose that I am really asking for somewhat more info on the hoverPoints, is there anyway to refresh them, reaquire them, control them or summon them etc?
-
Oskar Andersson commented
Oskar here again, I thankyou for the info. About the hoverPoint; does this mean that my method of recovering the hoverPoint when lost (this happens for example in your fiddle if you drag a point out of the chart and let go) would be concidered valid? Will you concider making it part of the API for increased interactivity in the future?
I disabled animation on chart as you suggested and boom - no lag, I missed it and it was causing the lag - wonderful!
It's starting to shape up BUT... I have noticed that sometimes when I hover a point with the mouse pointer - I get no label popup and the mouse pointer doesn't change (as it normaly does by cursor: "pointer" set on the series). What also happens is that there is no hoverPoint - thus the click will fail to init a drag n drop (or anything else requiring hoverPoint to be set) - I can reproduce this by doing a drag n drop fairly fast (or a couple in fast sequence) - then sometimes the chart seems to "time out" and the condition sets. However, if it occurs, and I move the mouse outside of the point and back in again everything seems to work ok. Any ideas, is there any mechanics for waiting on a hoverPoint to manifest? =)
-
Hi Oskar,
"First, I had trouble with the hoverPoint (there is vritually no documentation!)"
That's because hoverPoint is not part of the API, it is an internal property. All API properties are documented at www.highcharts.com/ref.For the lagging issue, I suspect it has to do with animation, but I can't explain why it happens on your site and not on our jsFiddle example. Especially if you've made sure the versions are the same. You'll notice that I set chart.animation to false in the fiddle, and the reason for that is that animation caused a lag similar to yours.
-
Oskar Andersson commented
Hello, I have used your fiddle example as inspiration to some real world functionality alpha, but I have some trouble getting things to work properly and would greatly appreciate some help / answers...
First, I had trouble with the hoverPoint (there is vritually no documentation!) - if you drag your point outside of the plot area, the chart.hoverPoint will sometimes (always?) be lost. I solved this by saving it before this would happen, and reinstalling it if missing (including the hoverSeries) to prevent a dead response from diagram when trying to click the point again...
Secondly, I have a somewhat bizarre "bug" or "unwanted behvaviour" that sadly makes this a no-go... The problem is during drag and drop of a point on the curve, where the point being dragged to a new position with the mouse is lagging severely (but not the curve itself!). I have tried to put as much of my code into the fiddle as possible to debug or find a hint of what is causing this, but havent managed to reproduce any lag whatsoever in the fiddle. The lag shows itself as the point being draged sometimes staying in the starting position meanwhile the curve is aligned perfectly with the mouse cursos during the drag / drop. Then suddenly, and somewhat shutter-like, the point starts to lag behind in the movement path... I have downloaded the latest version of highcharts, and set the same version of jQuery as I use, in the fiddle. This far, I have found nothing and I am starting to think that it might be other activities / event handling in jQuery happening elswhere on my web application that disturbs highcharts - BUT why is it then ONLY the point and not the curve itself that laggs?
-
You you mean a draggable plot band? A plot band is completely different from a series, so it wouldn't work with the prototype above.
-
Ed Mellor commented
Can anyone help in getting getting working with plotBand options? I cannot get the chart.dragY value if I am not using a series? Any help would be great.
-
Ales commented
The provided JSFiddle example looks great. I'm just having a bit of trouble getting it tow work in a chart with shared series. There's a JS error on line 6226 (source): "Can't read property plotX of undefined".
-
Vipul Shah commented
This is awesome. This is really useful in "what-if" kind of analysis.
One observation, this prototype is not working on iPad. I replaced mouse events with relevant touch events (touchstart, touchmove & touchend).
Please provide pointers to make this functionality workable on iPad device. I will look forward to get the release having such interactive functionality.
-
Kareem Sultan commented
Awesome example. Thanks!
I guess the difficultly lies in making this work on a touch device.
A nice addition would be to modify the chart as the point is being dragged. Changing the mouseup event to mousemove doesn't cut it. -
kasik commented
thank you it's very great feature.
-
Ozzie commented
Shift + dragging multiply some values to ALL data on this line chart
not divide only multiplying
-
Ozzie commented
also add please features
Ctrl + dragging add or subtract some values to ALL data on this line chart
Shift + dragging multiply or divide some values to ALL data on this line chart