CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationtooltip
madasionka
madasionka

Reputation: 922

Google geo chart map: tooltip without region name

I'm creating a Google GeoChart Map and I can customize the tooltip, but I can't seem to get rid of the name of region in it. I'm creating a map of Poland and Google GeoChart Map uses ISO 3166-2 standard for regions and it shows the code of the province in the tooltip which just looks bizarre.

This is the code

 function drawRegionsMap() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Województwo');
    data.addColumn('number', 'Frekwencja');
    data.addColumn({type: 'string', role: 'tooltip', p:{html:true}}, 'ToolTip');

    data.addRows( [
                  ['PL-DS', 60, '<p>Dolnośląskie</p>60%'],
                  ['PL-KP', 62, '<p>Kujawsko-Pomorskie</p>62%'], 
                  ['PL-LU', 59, '<p>Lubelskie</p>59%'], 
                  ['PL-LB', 61, '<p>Lubuskie</p>61%']
                  ])

    var options = {
        region: 'PL',
        resolution: 'provinces',
        datalessRegionColor: 'transparent',
        displayMode: 'regions',
        tooltip: {
            isHtml: true
        }
    };

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

    chart.draw(data, options);
}

And I end up with something like this: enter image description here

Upvotes: 3

Views: 882

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

you can use object notation for data table values
you can provide both the value (v:) and formatted value (f:) 

{v: 'PL-DS', f: ''}

the tooltip will display the formatted value by default,
supply a blank string to remove it from the tooltip...

see following working snippet... 

google.charts.load('current', {
  packages: ['geochart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Województwo');
  data.addColumn('number', 'Frekwencja');
  data.addColumn({type: 'string', role: 'tooltip', p:{html:true}}, 'ToolTip');
  data.addRows([
    [{v: 'PL-DS', f: ''}, 60, '<p>Dolnoslaskie</p>60%'],
    [{v: 'PL-KP', f: ''}, 62, '<p>Kujawsko-Pomorskie</p>62%'],
    [{v: 'PL-LU', f: ''}, 59, '<p>Lubelskie</p>59%'],
    [{v: 'PL-LB', f: ''}, 61, '<p>Lubuskie</p>61%']
  ]);

  var options = {
    region: 'PL',
    resolution: 'provinces',
    datalessRegionColor: 'transparent',
    displayMode: 'regions',
    tooltip: {
      isHtml: true
    }
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div"></div>

Upvotes: 3

Related Questions