Error with Timeline Tooltips taking up the all of the screen.

[Daniel D]

Hey guys,

I am using Ruby on Rails with Chartkick and Bootstrap to display chart data.

When I am using the timeline chart type all my tooltips are massive and take up the entire screen. It doesn't matter what kind of array or data I am using as the tooltips will still do this. I even used the same data in the Google Charts example found here: https://developers.google.com/chart/interactive/docs/gallery/timeline with the same result.

I was trouble shooting a lot of things but I am now a bit stuck. My bootstrap classes are not interfering as I tested the chart with both nested and un-nested tags.

I have attached an image just in case you want to see. Any help is much appreciated.

[Daniel LaLiberte]

Hi Daniel,

Could you point us at the actual page so we could poke around with a debugger?

--
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 https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/c060364b-819c-4b60-92e7-626940061109%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Daniel D]

Unfortunately, the website is not yet ready to deploy. Are there any troubleshooting steps I can follow or are there any files you would like to see?

The line of code to display the chart is simply:

<%= timeline charts.data_array %>

Where the data array looks like:

[ ["TOW29hgU (name)","2016-01-25T02:50:31.000+00:00","2016-01-25T02:55:39+00:00"],

  ["wYqPqaDS (name)","2016-01-24T08:54:00.000+00:00","2016-01-24T08:54:51+00:00"],

  ["lKZEdLwy (name)","2016-01-24T08:47:50.000+00:00","2016-01-24T08:51:53+00:00"],

  ["Hhmqa35v (name)","2016-01-24T06:56:07.000+00:00","2016-01-24T07:53:12+00:00"] ]

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oDEMiJM7Iic/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJPJ1Mnym3%2B7mN9ozoy4xbOnv09Ma6j-0GjbmBqtwKeURw%40mail.gmail.com.

[Daniel LaLiberte]

I would suspect there is some interference with the tooltip CSS by something else on the page, so with a debugger, I would poke at the CSS for the tooltip to see if I can resolve the problem. Your data  is not likely to be a problem here, especially if the chart shows up as you expect otherwise.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CABiiX%2Byrin8nxS%2BxjknQVwvwNHtExHLnOeGp1-3VqxcGXaQG7g%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Daniel D]

Hi, apologies about the lengthy delay. Currently I have a very rough version of the website here: https://mighty-peak-8243.herokuapp.com

To avoid having you sign in or sign up, I am temporarily putting the timeline chart on display before anything else.

Any help is very much appreciated. Preferably fairly quickly so I can return the draft website to normal.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMWxNz8c7oz%3D1ZKpDgfcaWhr4yC-RWoQg9YSDGxAUbUtg%40mail.gmail.com.

[Daniel LaLiberte]

Hi Daniel,

In that page, I see that your container for the chart, with id="chart-1" has a line-height style set to 300px.  That appears to be the cause of the lines in the tooltip taking more space, and thus the total height of the tooltip being so large.  Any reason for that line-height style?

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CABiiX%2Bz0P0LHbJm0%2BVfMwa%2BzwvLx1bXUauG5noM2QX_H5ZKNoA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Daniel D]

Wonderful! Thanks so much for the help Daniel, this problem has since been fixed. I am using a custom css template however funnily enough there is no code in the application's scss file which explicitly sets line-height in any way. However, I overrode the line-height of all elements and set it to 100% anyway, luckily this fixes the problem.

Once again much appreciated,

Daniel. 

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMTrFjTfvwdwaUU%2BSUYB1%2BkDCYMgdS13_8QxX4rYsd7Xw%40mail.gmail.com.