Is it possible to display a vertical line that moves along a chart?

[Florent]

Hello,

I need to display a vertical line that moves over a chart, a bit like the green vertical line of http://gmaps-samples-v3.googlecode.com/svn/trunk/elevation/elevation-profile.html but where the line would moves not accordingly to the mouse movement over the chart but rather depending of a JavaScript event. For instance in this example, the green line would move along the chart when the user drags a marker of the maps.

I could not find a way to achieve this, maybe I missed it.

Is that possible?

Thanks!

Florent

[Viz Kid]

There is no natural way to do it at the moment, but there is some way.

You can add an annotation of style line to your domain values, and at any given point in time, only the domain point where you want the line to appear has an annotation. That will cause the vertical line at that location and no where else, and you can redraw the chart with its new location anytime you want it to move.

You should add the domain role column just after your axis values, add it the 'annotation' role, and put a non empty string (for example a ' ') for the location you want a line). This is not completely documented at the moment, but you should specify {annotations: {style: 'line'}} in order for them to appear as lines.

Here is a simple example:  http://savedbythegoog.appspot.com/?id=7e54024673afee6264407cc6c21f99f3a6b160ad 

Annotations role documentation: http://code.google.com/apis/chart/interactive/docs/roles.html#annotationrole 

Hope this helps,

  Viz Kid

Florent

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/oZWmFSxW8r0J.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Jim]

Very helpful, thank you!!

[laurent coudurier]

great !!  it works fine

but in the doc : https://developers.google.com/chart/interactive/docs/roles?hl=fr#annotationrole

I can read : "You can specify the line style by setting this chart option: annotation: {'column_id': {style: 'line'}}"

1/ 'column_id' ?? is it possible to define 'line' for the domain, and 'text' for a data column (it would be great)?

2/ annotation is not listed within avalaible options : https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=fr#Configuration_Options  (how many other vital options like this is 'hidden' ?)

Thanks in advance

[Sergey Grabkovsky]

Hello, the annotation line feature requires you to have a column with the role 'annotation'. This is the 'column_id' that the documentation refers to. You can put the annotation on either a data point in a series (like the examples in the docs show) or on the domain column. I made an example of the domain column case. Hopefully it helps! We're aware that the state of our documentation isn't ideal and are working to fix it.

- Sergey

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/nuSWHD1YM7sJ.

[laurent coudurier]

in fact I almost had the right syntax but, when adding the column_id, I forgot to delete the final 's' :

annotations: {style: 'line', stemColor: 'red'} : all annotations are red lines

annotation: {1: {style: 'line', stemColor: 'red'}} : only the annotation of domain is line (but black)

your example was very usefull, thank a lot.

[asgallant]

FYI, for those who are looking for something like this, the recent addition of the ChartLayoutInterface method to some charts makes this much easier.  See an example here: http://jsfiddle.net/asgallant/tVCv9/