Geochart: Using ISO 3266-2 region code but show real name

Question

I'm using the Google Visualization Geochart API to create a map of a country's regions. I provide the ISO 3266-2 Country subdivision code and get the correct results. However showing the ISO 3266-2 codes as label in the chart is a bad user experience. So I would like to provide a custom label. Take this as an example:

  function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['DE-BY', 200],
      ['DE-NW', 500]
    ]);

    var geochart = new google.visualization.GeoChart(
          document.getElementById('visualization'));
    geochart.draw(data, {width: 556, height: 347, region: 'DE', resolution: 'provinces'});
  }

[Try it on the Code Playground]

I would like to provide 'DE-BY' but have 'Bavaria' as label. It is necessary for me to use the ISO 3266-2 codes as although Google writes that an

English text equivalent (for example, "US-NJ" or "New Jersey")

is allowed, it is very unreliable and doesn't work with the example 'Bavaria'.

Answer 1

This is a quick proof of concept that works, I'm looking at something similar and was hoping to get the name automatically but I'm not sure if that's possible quite yet but this at least allows manual population of the tooltip text.

The key factors are to create your table with the required columns and then apply a PatternFormat to get the tooltip as you want it then create a data view with only those columns that are required for the data binding.

function drawVisualization() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Country');
      data.addColumn('number', 'Value');
      data.addColumn('string', 'Display');

      data.addRows([
        ['Germany', 200, 'Germany'],
        ['United States', 300, 'USA'],
        ['Brazil', 400, 'Brasil'],
        ['Canada', 500, 'Canada'],
        ['France', 600, 'France'],
        ['RU', 700, 'Russia']
      ]);

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

      var formatter = new google.visualization.PatternFormat('{1}');  
      formatter.format(data, [0, 2]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1]);  

      geochart.draw(view, {width: 556, height: 347});
    }