focusTarget = series but still show tooltip on LineChart

[boooeee]

I have a line chart with a very large number of lines (~40). When the user hovers over a line, I want the whole line highlighted. I am able to do this by setting focusTarget to 'series'. However, I can no longer get the tooltip to display. Ideally, I would like the tooltip to display the series name when the user hovers over the line. Is there a way to do this?

Here is the jsfiddle: http://jsfiddle.net/srg5xjLk/

[Daniel LaLiberte]

Your request is reasonable; we should have a way to show a tooltip when the focusTarget is set to 'series'.  The only way you could hack this currently is to not use focusTarget set to 'series', but set to 'datum', and handle the hover (via 'onmouseover') and select the series.  Here is a demonstration of that idea based on a change of your jsfiddle: http://jsfiddle.net/dlaliberte/yy1ujmau/

I noticed the HTML tooltip was not displaying correctly, which I guess happens if you haven't provided a 'tooltip' role column.  Customizing the tooltip will be a bit tedious because you would have to provide a tooltip column after each data column in order to specify the same series summary for every row.

Also note that your div sizes were conflicting with your chartArea sizes.  I disabled the chartArea sizes.

On Sun, Jan 11, 2015 at 11:51 AM, boooeee <boo...@gmail.com> wrote:

I have a line chart with a very large number of lines (~40). When the user hovers over a line, I want the whole line highlighted. I am able to do this by setting focusTarget to 'series'. However, I can no longer get the tooltip to display. Ideally, I would like the tooltip to display the series name when the user hovers over the line. Is there a way to do this?

Here is the jsfiddle: http://jsfiddle.net/srg5xjLk/

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[boooeee]

Thank you Daniel. This is very helpful. However, I noticed in your example, the hovered line doesn't show up as starkly as in my example. I think because the mouseover event is activating "select" rather than "hover". Is there anyway to modify your example so that the hovered series shows up more clearly? Or is it possible to create a function that would change the line color of the hovered series? The latter would probably be ideal.

Thanks again for your help.

On Monday, January 12, 2015 at 6:15:23 AM UTC-8, Daniel LaLiberte wrote:

Your request is reasonable; we should have a way to show a tooltip when the focusTarget is set to 'series'.  The only way you could hack this currently is to not use focusTarget set to 'series', but set to 'datum', and handle the hover (via 'onmouseover') and select the series.  Here is a demonstration of that idea based on a change of your jsfiddle: http://jsfiddle.net/dlaliberte/yy1ujmau/

I noticed the HTML tooltip was not displaying correctly, which I guess happens if you haven't provided a 'tooltip' role column.  Customizing the tooltip will be a bit tedious because you would have to provide a tooltip column after each data column in order to specify the same series summary for every row.

Also note that your div sizes were conflicting with your chartArea sizes.  I disabled the chartArea sizes.

On Sun, Jan 11, 2015 at 11:51 AM, boooeee <boo...@gmail.com> wrote:

I have a line chart with a very large number of lines (~40). When the user hovers over a line, I want the whole line highlighted. I am able to do this by setting focusTarget to 'series'. However, I can no longer get the tooltip to display. Ideally, I would like the tooltip to display the series name when the user hovers over the line. Is there a way to do this?

Here is the jsfiddle: http://jsfiddle.net/srg5xjLk/

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

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

[Daniel LaLiberte]

You are correct that the series is only showing the selected state rather than hovered darker line.  There isn't a programmatic way to invoke the hovered state, unfortunately.

You could certainly change the line color of the series, but you have to call draw() again with a different color option, or other ways of doing the equivalent (e.g. setting series color).  While you are at it, you could change the lineWidth of the series to be thicker.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA