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
-
Ian Watkins commented
Hi Torstein,
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?
Cheers
Ian
-
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 Thanks! As PHP runs on the server and JavaScript on the client, you can't immediately pass over arrays between them. You will need to establish an async connection, which is often done by AJAX techniques. I suggest you read up on communicating between JavaScript and PHP.
-
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.
What I cannot seem to do, is to feed those updated input values back into the chart to replace the original series. Effectively, when I submit those values to PHP, the chart goes back to the default series and I lose the updated one. I only seem to be able to get the series to show if it is typed in the javascript, attempting to call any calculated array from PHP results in that series not being shown.
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.
Thanks again!
-
Anonymous commented
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?
-
Karthik commented
high stock range Selector current state not updated on exporting the chart. please help me it very urgent. Thanks for advance
-
Anonymous commented
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?
-
Anonymous commented
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?
-
Anonymous commented
Thanks, I was managed to fixed. It's awesome API :)
-
You got your options structure messed up, see http://jsfiddle.net/highcharts/ZQQpS/2/
-
Anonymous commented
Hi,
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!
-
Patrik commented
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.
example: http://jsfiddle.net/FU9FS/
-
Patrik commented
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
-
Anonymous commented
thanks for this plugin! Any idea how I might get this to work smoothly with a (horizontal) bar chart?
-
Anonymous commented
Hi,
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
-
Anonymous commented
Hi Toretein,
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?
Thank you
-
Max M commented
Thank you!
I noticed for the min and max afterward but that wasn't in my code.
Parsing the values to numbers worked