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
Ian Watkins commented
Works fine for me for our needs.
However, it does reply on usng jQuery for your HighCharts framework, where as we would like to use the highcharts Standalone-frameowrk adapter.
Any plans to allow this or are we tied to using jQuery for this?
Yes, in the latest version of the plugin, bubbles are also draggable.
Adri Van den Berg commented
I like the draggable charts, is there anyone who ever created a bubble(scatter plot) chart, where the bubble are draggable and the data gets updated to the backend?
Daniel Kozakewycz commented
Hi Torstein, first up fantastic plugin, thank you for taking the time to create it!
I am a novice user and I want to use a draggable chart to set a range of inputs, to generate an array in php for further calculation.
I have managed to get the draggable series to dynamically update another series in the chart, and also to update a range of input fields with the dropped values.
Sorry if my explanation and/or terminology is not very clear, as I said I'm very new to all this and just trying to get my head around it.
When used with Highstocks the navigator does not function correctly with this plugin (when dragging points). Is it possible to have that enhanced/fixed please?
high stock range Selector current state not updated on exporting the chart. please help me it very urgent. Thanks for advance
I've managed to fix the secondary Y-Axis issue http://jsfiddle.net/ZQQpS/10/ but unable to do the sum of phasing series while user is dragging. Could you please help?
I've updated the sample http://jsfiddle.net/ZQQpS/5/, but facing 2 problems:
1. Secondary Y-Axis is not seems to be working, any reason why the line of for Phasing series is showing like this?
2. How can I show the sum of Phasing series in tooltip while user is dragging, how can I do it in drag event?
Basically only the uplift series is draggable and the sum of all points in that series should be exactly 100.
Could you please help?
Thanks, I was managed to fixed. It's awesome API :)
You got your options structure messed up, see http://jsfiddle.net/highcharts/ZQQpS/2/
Finally I was able to convince my company to buy HighCharts and now they want me to show the capabilities of it. I'm trying to implement drag and drop, I've followed http://jsfiddle.net/highcharts/AyUbx/ but it's not firing the drag/drop events, although I'm able to drag the series. Could you please follow this http://jsfiddle.net/ZQQpS/ and help me why it's not firing the events? Am I missing anything?
Extending the Point and Series prototypes is the cleanest way of implementing this I think, but if it introduces conflicts with non-DnD charts it should be considered a bug in the plugin. Do you have examples of such conflicts? Here is the demo with the DnD plugin loaded but not enabled: http://jsfiddle.net/highcharts/AyUbx/934/
Chris Stadler commented
Is there a way to add DnD functionality without modifying the prototype? I have many instances of the Highcharts object in my app and do not want callback conflicts. Appreciate any help!
Here is an updated version to the previous one both work kind of. It often happens that the point that you move disappears and also when you try and drag a new point it drag a previous point instead.
nice work I'm wondering how to combine your draggable function with add and remove points by clicking on the chart like in this example : http://jsfiddle.net/nfrGz/
I've tried but I can't add any points and when I try to drag it it will not release the point( place it in the graph)
Thanks again for draggable points
thanks for this plugin! Any idea how I might get this to work smoothly with a (horizontal) bar chart?
I was checking this and made small changes and got this fiddle http://jsfiddle.net/AyUbx/874/ which I was using for my combination chart.
i found one issue while using this.
On the very first value where all (2 columns an line) are 0. tried to hover on the point. The marker gets highlighted and suddenly goes to normal state. But when the marker goes to normal state drag isn't working as chart.hoverPoint is getting null.
note: at this point cursor indicates 'resizable'
Can anybody help me in fixing this issue
first of all thanks for providing such a nice tool for chart.
I've implemented draggable points and columns with the example given by you.
now I want to drag the column only by holding its top. if we drag from some where in the middle of the column it should not happen.
is there any way we can handle this from drag event provided?
Max M commented
I noticed for the min and max afterward but that wasn't in my code.
Parsing the values to numbers worked