Geek Answers Handbook

Google chart: drag to adjust value

I recently abandoned using Graphael and and the Ico package extension. I think this is still a great library, it just needs good documentation and the right API before it can be widely accepted.

I converted the areas with graphics to use Google graphs and didn't seem to find a way to make one specific function that graphael used to: support drag and drop. One of the diagrams must be editable, which means that individual points on the line can be dragged up and down to adjust the value.

I tried to find an event or a way to attach an event in the API without much success. Could anyone do something like this?

Perhaps it is possible to make custom charts - is it possible to do so?

EDIT: It seems like it's really impossible or incredibly difficult to connect to the Google API or release SVG. It is in an iframe and there is no source code, which makes it less attractive.

Since then, I started experimenting with Highcharts . I was able to do everything that the Google engine does and can play with the chart after rendering it. Since the source code is provided, it simplifies the definition of some things. It also works a little faster than Google's solution, as it uses the path when it draws a line chart instead of the individual elements of the SVG environment.

The problem I'm currently facing is related to the SVG Path element - there is no single point to configure drag and drop. Therefore, to use jQuery.draggable, you need to insert the SVG Circle or another element in the same place as the binding of the SVG Path fragment for drag and drop. Therefore, it is necessary to solve the following: - how to put the created element in the correct position? - how to move an element when scaling a chart (minimum or maximum change in value on any axis)? - How to convert a new position back to a value that is scalable for series data?

Does anyone have enough experience with Highcharts to play with them? I will try to provide a JSfiddle example whenever possible.

+7
source share
2 answers

Draggable points are not built into Highcharts, but using events and methods in the API, you can implement an editable line / column / scatter / area chart (only moving the point in the y direction will be processed). The following example uses mousemove , mousedown and mouseup events to handle interactions.

  • In mousedown initial y value is recorded if the point is focused. The y.translate axis method is the key here, it converts the mouse position into a data area.
  • In mousemove focused point and tooltip are updated with a new value.
  • In mouseup point is updated and a new drop event is fired, which updates the text in the status message.

Full jsfiddle example. See also feature request for draggable points.

+13
source

Now this is an available plugin on Highcharts: http://www.highcharts.com/plugin-registry/single/3/Draggable%20Points

+2
source

More articles:


All Articles