Hi Max M, you were passing strings to xAxis.setExtremes. When I changed them to numbers, it worked. Also you called both your inputs "min", while it should be "min" and "max". See http://jsfiddle.net/highcharts/bKPBp/4/.

Hello,

First of all, thank you for this.

Now, I have an issue, I need the points to be draggable in both X and Y directions, it works fine until I let the user change the extremes of the X axis. Once the x axis has been resized, the points are no longer draggable in the X direction, any ideas why?
Example: http://jsfiddle.net/bKPBp/2/

Thank you.

Function Message_save() {
drop();
var answer1 = confirm("Do you want to save your change?"); //after this i will save changes to database
if (answer1) {
alert("saved your changesı!");
}
else {
var answer2 = confirm("do you wanna go back?");this is the main problem i dont have an idea, have can i reach the value which is before dragging
if (answer2)
alert("it went back!!");
}
}

I implemented the dotted lines again on 3.0. Added support for Highstock, though there's something wrong with the Navigator after dragging points in the base series.

Thanks. Is there a way to make that dashed bar appear with the current version? That was a very useful feature to have! We're actually implementing Highstocks currently and I wasn't able to get this plugin to work with Highstocks. Will this plugin work with Highstocks?

Thanks, I removed that part of the code. Now we don't have visual handles for really small columns though.

Thank you for this great plugin. I'm really new to Highcharts and had a question about the compatibility of this plugin with version 3.0.1 of Highcharts. The jsfiddle link - http://jsfiddle.net/highcharts/AyUbx/ -does not seem to work with the current version of Highcharts. It works with 2.3.5 though. Is that an issue or user error on my part?

The error is at this line - point.tracker.attr(point.shapeArgs.height < 3 ? { - where it shows the dashed bar when the column is dragged below zero.

Also, will this work with Highstocks? I tried a basic example but was running into errors.

Thank you!

@Christoper:

No problem, all levels of skills are represented here!

1. You're right. I've fixed that now. Now when you return false, the point is dropped at that location. You can also set this.y to a new value, as shown in the comment in the updated fiddle.

2. The point is referred to by the 'this' keyword.

3. Use jQuery.inArray to get the index of the point (this) in the points array (this.series.points). Then the neighbours are refered to by neighbouring indices.

@Leon: Here's a proposition for your prognosis: http://jsfiddle.net/highcharts/fDhhv/
In short, make a second series that starts at the end of the first, then you make the second series draggable. The one thing missing now as far as I can see is that the first point, next to the empircal data series, should be locked for dragging.

I see what you did and I have a few questions. (Please forgive with me if I seem dense. Javascript isn't my best language.)

1. I found if I return 'False' on the event, the animation stops, but the point still moves.
2. I got the newX and newY, but how do I know which point is being moved?
3. I want to stop the dragging when the x value is within 1 of it's immediate neighbors. How can I reference it's neighbors to compare?

Thanks you for your help!

@Christopher, I added a drag event also, so you can return false from this in order to stop further dragging.

I have a requirement that is very close to this but maybe a bit more complex. I have time across my x-axis and am plotting data over that period of time. I need a way for a user to draw a "forecast" line by extending the x-axis axis into the future and "dragging" line out into the future. I don't want to offer the capability of modifying existing data.

I see this as a combination of the functionality displayed here as well as the "dynamic-click-to-add" functionality in the following demo:

http://www.highcharts.com/demo/dynamic-click-to-add

The forecast line would always be a straight line (in a different color, or dotted) extending from the last point into the future. I would then save that single "point" into my database so I can pull it out and display the same forecast in future renderings of the chart. Ideally, as the user "pulls" the line to the right, the x-axis would automatically extend but I understand that may be difficult to achieve so I am thinking the user would have to extend the time axis as a first step by clicking on an "extend time" button or something like that.

Any guidance on this would be appreciated.

Thank you for providing that prototype code. It's helped me a great deal with a project I'm working on. I've been able to add functionality to add and remove data points using Ctrl-Click and Alt-Click on the series, but I'm stuck trying to figure out one thing. I want to limit movement on the X-axis so it can't be dragged past it's neighbors. Is there a easy way to do this?

Thanks!

You can access this.series.name. In the drop callback, just do console.log(this) to see what properties you have access to. I updated the demo to show the series name as well.

Hi, I'm making some nice progress with using highcharts :-)
Question, how to I retrieve the series name in the event handling method:
drop: function() {
$('#report').html(
this.category + ' was set to ' + Highcharts.numberFormat(this.y, 2)
);
}
I can retrieve the x axis value (this.x) no problem. I tried this.name but it's undefined.
What other values can I get from 'this'?
Cheers,
Tony.

Thanks Tony, we'll be here to help you implement!

Hi Torstein, thank you very much for replying.
I found out about HighCharts via this page:
http://dotnethighcharts.codeplex.com/
so initially, I thought the whole product was DotNet HighCharts, but that's actually just a plugin to HighCharts to make creation of the javascript via C#.
So, after seeing the drag and drop example, I was really confused, why wasn't it in C#?! What's going on here?!
When I finally realised today how HighCharts actually works, it all fell in to place.
I.e. I just created an MVC view that included the jquery and highcharts javascript files, copied the HTML and javascript from http://jsfiddle.net/highcharts/AyUbx/ in to the view and blamo, up comes an editable chart!
Even better was to do what you said, and chop out the self executing function and put in its own JS file after the highcharts.js include.
Now, on to using HighChart directly rather than DotNet Highchart and investigate your second point. No doubt I'll have more questions later on ;-)
Cheers for your help, really appreciate it, I'm excited to start using HighCharts properly now ;-)
Tony.

Hi Tony!

1) How do I extend Highchart to use the code?
The plugin itself is the code within the self executing function, from line 1 through 135. Copy this code into a separate file, for example draggable-highcharts-plugin.js and add it to your HTML page right after the highcharts.js file.

2) How to I let my controller know when a point has been moved (so it can update a database)?
Use the point.events.drop event, as demonstrated in http://jsfiddle.net/highcharts/AyUbx/. In our demo, the drop event simply prints the new value to a div in the page. In your example, it will either run an ajax call back to the server with the new value, or alternatively store updated values in an array and save it to the database later, for example when the user clicks a "Save" button.

Hi, I'm a newcomer to Highchart, drawn to it mainly due to the ability to drag and drop points.
I've downloaded the samples and had a good look at it, even got a basic chart displaying in a new MVC 4 project (was very straightforward, encouraging me to put Highchart at the top of my list of charting tools to use in my new project).
I'm also pretty much a newcomer to MVC. I've spent many hours going through tutorials and playing with it and understand the concepts well enough to create a website (cheers to Pluralsight http://goo.gl/Hlfm1).
Question I have, is how do I extend Highchart to use the code at http://jsfiddle.net/highcharts/AyUbx/ and how to I let my controller know when a point has been moved (so it can update a database)?
I can't see any examples which show updating a database after points have been changed (by accessing series.data as other comments suggest)
Ideally it would be fantastic to include the drag and drop example in the Highcharts MVC downloadable project I guess.
Sorry if this is all basic stuff I'm asking, but I'm really keen to get involved with Highchart!

how can we drag series such that all the points move by a constant percentage--every time a user drags a point on the series...