Search code examples
chartsgoogle-visualization

GeoCharts how to show country names instead of codes



I would like to make a visualization with the google GeoChart. I put in country codes. I would like to display the full country names but only the country code pops up.

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Members'],
    ['LB', 3],
    ['JO', 2],
    ['IT', 24],
    ['PS', 3],
    ['LY', 1],
    ['TN', 6],
    ['LB', 3],
    ['EG', 2],
  ]);

  var options = {
    colorAxis: {
      colors: ['#c1c1cd', '#53556e']
    },
    legend: 'none'
  };

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

  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>


Solution

  • using object notation,
    you can provide the value (v:) and the formatted value (f:)

    {v: 'IT', f: 'Italy'}
    

    the tooltip will display the formatted value by default

    update the data using object notation and provide the name as the formatted value

    see following working snippet,
    hover over Italy to see the result...

    google.charts.load('current', {
      'packages': ['geochart'],
      'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
    });
    google.charts.setOnLoadCallback(drawRegionsMap);
    
    function drawRegionsMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country', 'Members'],
        ['LB', 3],
        ['JO', 2],
        [{v: 'IT', f: 'Italy'}, 24],
        ['PS', 3],
        ['LY', 1],
        ['TN', 6],
        ['LB', 3],
        ['EG', 2],
      ]);
    
      var options = {
        colorAxis: {
          colors: ['#c1c1cd', '#53556e']
        },
        legend: 'none'
      };
    
      var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
    
      chart.draw(data, options);
    }
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>