Google Geochart - Same Countries, Different Values

I got some problems with displaying values for a country. The thing is, I want to display where football players of a certain team come from. Because many of them have same nationa

Solution 1:

following is an example of building a custom tooltip to show all names at each country

the group() method is used to group the names by country

then the tooltip is updated for each row in chartdata

for all the names found for each country

see following working snippet...

google.charts.load('current', {
  callback: drawRegionsMap,
  packages:['geochart']
});

functiondrawRegionsMap() {
  var container = document.getElementById('regions_div');
  container.innerHTML = '';
  var names = ["Sam Johnstone", "Chris Smalling", "Phil Jones", "Luke Shaw"];
  var places = ["United Kingdom", "United Kingdom", "United Kingdom", "United Kingdom"];

  var data = [];
  var header = ["Country", "Name"];
  data.push(header);
  for (var i = 0; i < places.length; i++) {
    var temp = [];
    temp.push(places[i]);
    temp.push(names[i]);
    data.push(temp);
  }

  var chartdata = google.visualization.arrayToDataTable(data);

  // group data by country, namevar groupdata = google.visualization.data.group(
    chartdata,
    [0, 1],
    [{
      aggregation: google.visualization.data.count,
      column: 1,
      label: "Name",
      type: "number"
    }]
  );

  // update tooltip for each chart data rowfor (var i = 0; i < chartdata.getNumberOfRows(); i++) {
    // find group rows for current countryvar locationRows = groupdata.getFilteredRows([{
      column: 0,
      value: chartdata.getValue(i, 0)
    }]);

    // build tooltip of all names for current countryvar nameTooltip = '';
    locationRows.forEach(function (index) {
      if (nameTooltip !== '') {
        nameTooltip += ', ';
      }
      nameTooltip += groupdata.getValue(index, 1);
    });

    // update tooltip
    chartdata.setValue(i, 1, nameTooltip);
  }

  var chart = new google.visualization.GeoChart(container);
  chart.draw(chartdata);
}

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="regions_div"></div>