CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
nautilia
nautilia

Reputation: 75

Customize tooltip in Google LineChart with data from spreadsheet

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/a555xLfp/
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!

Upvotes: 2

Views: 976

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117364

Add the tooltip-columns to the view:

'view': {'columns': [
                     0,
                     4,
                     {role:'tooltip',sourceColumn:2},
                     5,
                     {role:'tooltip',sourceColumn:3}
                    ]}

Result: https://jsfiddle.net/doktormolle/zsagu46h/

Additionally: When the format of the columns 2 and 3 is fixed(n-n) you don't need to add columns 4+5 with the average. You may use a function to calculate the value:

function avg(col){
  return function(data, row){
    var val=data.getValue(row,col).split('-');
      return ((Number(val[0])+Number(val[1]))/2);
  } 
}

var lineas = new google.visualization.ChartWrapper({
      'chartType': 'LineChart', 
      'containerId': 'fiebre',
      'options': {
        'width': 980,
        'height': 400
      },
      'view': {'columns': [
                            0,
                            {type:'number',calc:avg(2)},
                            {role:'tooltip',sourceColumn:2},
                            {type:'number',calc:avg(3)},
                            {role:'tooltip',sourceColumn:3}
                          ]
              }
});

Result: https://jsfiddle.net/doktormolle/4o3g22wr/

Upvotes: 4

Related Questions