Question

I’ve recently dropped use of Graphael and and extensions package Ico. I think it’s still a great library, it just needs better documentation and a proper API before it can be widely adopted.

I’ve converted the areas with charting to use Google Charts and can’t seem to find a way to do one particular feature I used graphael for: drag support. One of my line charts needs to be editable, meaning that individual dots on the line can be dragged up and down to adjust value.

I’ve been trying to find an event or a way to attach an event in the API without much success. Has anyone managed to do something like that?

It’s supposedly possible to do custom charts – would it be possible to do it this way?

EDIT: Seems like it’s not really possible or is incredibly hard to hook into Google API or outputted SVG. It being in an iframe and no source code available just makes it less and less attractive option.

I’ve since started experimenting with Highcharts. I was able to do everything that Google engine does and can fiddle with chart after it’s been rendered. Since source code is provided it makes it easier to figure certain things out. It also seems to work a bit faster than Google solution since it uses path when doing a Line Chart instead of individual SVG circle elements.

The issue I’m facing now has to do with the SVG Path element – there is no single point to set up drag on. So in order to use jQuery.draggable one has to inject a SVG Circle or another element at the same position as the SVG Path fragment tying to drag. So the following has to be resolved:
– how to place the created element to correct position?
– how to move element when chart is scaled (min or max value change on either axis)?
– how to convert new position back to a value, scaled for series data supplied?

Has anyone got enough in depth experience with Highcharts to fiddle with these? I’ll try to provide JSfiddle example when possible.

Answer 1

Draggable points is not built-in into Highcharts but using the events and methods in the API it is possible to implement an editable line/column/scatter/area-chart (will only handle moving the point in y-direction so far). The following example uses mousemove, mousedown and mouseup events to handle interaction.

• At mousedown the start y value is recorded if a point is focused. The y-axis.translate method is the key here, it will translate mouse position to the data domain.
• At mousemove the focused point and tooltip is updated with the new value.
• At mouseup the point is updated and a new event drop is fired that updates the text in a status message.

Full example on jsfiddle.
See also the feature request draggable points