Customize tooltip in Google LineChart with data from spreadsheet

Frans

unread,

Sep 7, 2015, 5:18:32 PM9/7/15

to Google Visualization API

Hi,

I'm trying to implement a tooltip customization in a Google Chart.

I have a webpage that wants to be a polls tracker. It takes data from a Google Spreadsheet and creates both a linechart and a table from these data. (There are 2 filters that interact at the same time with the chart and the table).

The page: https://jsfiddle.net/z1o3qs5j/

The data: https://docs.google.com/spreadsheets/d/1O9Bc9Vg_iIVMLdsIIZNwG8UC3L-p-8fA4-44xkFVVQQ/edit?usp=sharing

Data is from daily electoral polls. But they offer a results bracket

(i.e. Party 1: between 50 and 52 seats; party 2: bw 40-42).

To draw the chart, I've duplicated columns and put the medium value (i.e 51 and 41).

But I want to show as a tooltip the bracket (columns C-D) instead of the number used to draw the chart (columns E-F).

I've seen at https://developers.google.com/chart/interactive/docs/customizing_tooltip_content that you can define a role to a column in order to act as a tooltip content.

I'm blocked. Is it possible to translate this tooltip customization to a chart that calls data from a spreadsheet?

As an option in the chart declaration?

      var lineas = new google.visualization.ChartWrapper({
          'chartType': 'LineChart', 
          'containerId': 'fiebre',
          'options': {
            'width': 980,
            'height': 400,
          },
          'view': {'columns': [0, 4, 5]} //the ones used to draw the chart
        });

I'm sorry I can't show you any test, as I haven't achieved any successful code.

Thank you!

Sergey Grabkovsky

unread,

Sep 8, 2015, 10:16:07 AM9/8/15

to Google Visualization API

Hi Frans,

This is indeed possible! It can be done simply by specifying role: 'tooltip' in the view. Here is a modified version of your jsfiddle where I used column 1 as a tooltip for the first series: https://jsfiddle.net/z1o3qs5j/6/

There were two issues with your jsfiddle:

1) By default, jsfiddle runs its code when the onload event is fired. google.setOnLoadCallback also does this. As a consequence, you can't use google.setOnLoadCallback in a jsfiddle if you do it like that. You can make it work either by changing the option to execute the code to 'No wrap - in <head>', or you could use the callback parameter (which is what I chose to do).

2) You were attempting to load jquery via http:// (was actually a typo, and was 'ttp://'), on an https:// page. Recent browser security policies have disallowed this. I took the liberty of correcting the typo and changing it to 'https://'.

--
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/f0b46c35-13f6-4f7a-8161-e4ff47d9c0e1%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Frans

unread,

Sep 8, 2015, 10:42:00 AM9/8/15

to Google Visualization API

Hi Sergey,

thank you very much!

It is simpler that I thought. My firsts tests were far more complicated.

Regarding the two issues, I saw both (page was not loading) and try to correct them , but it was before login in jsfiddle, so maybe changes were not saved.

Again, thank you!

Reply all

Reply to author

Forward