Google's GeoChart wont display Cork within Ireland map

user_620061 0
Viewed 169

I'm drawing a province map for Ireland and for some reason Google's doesn't recognise county Cork. Someone suggested using IE-CO. But that breaks my plans on using a CSV dataset(where I have no control over county names).

Does anyone know why it doesn't work and how can I fix that?

Here a sample of my code https://jsfiddle.net/sashareds/kLjtne42/2/

 google.charts.load('current', {
        'packages':['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
        ['County',   'Case'],
        ['Carlow',   0],
        ['Cavan',   41],
        ['Clare',   50],
        ['Cork',   292], //IE-CO
        ['Donegal',   77],
        ['Dublin',   2077],
        ['Galway',   98],
        ['Kerry',   79],
        ['Kildare',   103],
        ['Kilkenny',   47],
        ['Laois',   16],
        ['Leitrim',   12],
        ['Limerick',   96],
        ['Longford',   16],
        ['Louth',   54],
        ['Mayo',   55],
        ['Meath',   88],
        ['Monaghan',   17],
        ['Offaly',   47],
        ['Roscommon',   13],
        ['Sligo',   26],
        ['Tipperary',   94],
        ['Waterford',   43],
        ['Westmeath',   86],
        ['Wexford',   18],
        ['Wicklow',   105]
        ]);

        var options = {
          region: 'IE', // Africa
          resolution: 'provinces',
          colorAxis: {colors: ['#f9cb9c', '#f07b50', '#ea4435']},
          backgroundColor: 'white',
          datalessRegionColor: '#fefefe',
          defaultColor: '#fefefe',
        };

        var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
        chart.draw(data, options);
      };
google-maps-api-3 google-visualization charts google-maps
1 Answers

you could use a data view with a calculated column to replace the known problem countries.
and use object notation to allow the actual country name to show thru on the tooltip. 

  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      var country = dt.getValue(row, 0);
      switch (country) {
        case 'Cork':
          country = {v: 'IE-CO', f: country};
          break;
      }
      return country;
    },
    label: data.getColumnLabel(0),
    type: data.getColumnType(0)
  }, 1]);

see following working snippet... 

google.charts.load('current', {
  'packages':['geochart'],
  // Note: you will need to get a mapsApiKey for your project.
  // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
  'mapsApiKey': 'AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['County',   'Case'],
    ['Carlow',   0],
    ['Cavan',   41],
    ['Clare',   50],
    ['Cork',   292], //IE-CO
    ['Donegal',   77],
    ['Dublin',   2077],
    ['Galway',   98],
    ['Kerry',   79],
    ['Kildare',   103],
    ['Kilkenny',   47],
    ['Laois',   16],
    ['Leitrim',   12],
    ['Limerick',   96],
    ['Longford',   16],
    ['Louth',   54],
    ['Mayo',   55],
    ['Meath',   88],
    ['Monaghan',   17],
    ['Offaly',   47],
    ['Roscommon',   13],
    ['Sligo',   26],
    ['Tipperary',   94],
    ['Waterford',   43],
    ['Westmeath',   86],
    ['Wexford',   18],
    ['Wicklow',   105]
  ]);
  
  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      var country = dt.getValue(row, 0);
      switch (country) {
        case 'Cork':
          country = {v: 'IE-CO', f: country};
          break;
      }
      return country;
    },
    label: data.getColumnLabel(0),
    type: data.getColumnType(0)
  }, 1]);

  var options = {
    region: 'IE', // Africa
    resolution: 'provinces',
    colorAxis: {colors: ['#f9cb9c', '#f07b50', '#ea4435']},
    backgroundColor: 'white',
    datalessRegionColor: '#fefefe',
    defaultColor: '#fefefe',
  };

  var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
  chart.draw(view, options);  // <-- draw chart with data view
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors" style="width: 90%; height: 90%;"></div>

EDIT

when using a sheet for the data source,
the view needs to be created with the data table from the sheet.

so the view definition should be created,
after the data table is received.

see following working snippet... 

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': chartSettings.mapsApyKey
});
google.charts.setOnLoadCallback(drawRegionsMap);

//querying external data from a spreadsheet.
function drawRegionsMap() {

  var queryString = encodeURIComponent('Select *');

  var queryData = new google.visualization.Query(chartSettings.mapDataSource + queryString);

  queryData.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  
 //Swapping IE-CO on COrk in the dta array, I assume?
  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function(dt, row) {
      var country = dt.getValue(row, 0);
      switch (country) {
        case 'Cork':
          country = {
            v: 'IE-CO',
            f: country
          };
          break;
      }
      return country;
    },
    label: 'Country',
    type: 'string'
  }, 1]);


  var options = {
    region: 'IE',
    resolution: 'provinces',
    colorAxis: {
      colors: ['#f9cb9c', '#f07b50', '#ea4435']
    },
    backgroundColor: 'white',
    datalessRegionColor: '#fefefe',
    defaultColor: '#fefefe',
  };


  var chart = new google.visualization.GeoChart(document.getElementById('map'));
  chart.draw(view, options);

}
<html>

  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      var chartSettings = {

        mapsApyKey: "AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k",
        mapDataSource: "https://docs.google.com/spreadsheets/d/1YV7VSsG_nQXmL_L44cJSz4GrxOLIBNJrgd8qPXM_NQ0/gviz/tq?gid=249758876&headers=1&range=M21:N47&tq="

      };

    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>

</html>

user_50907710
Related