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 nationality, geochart displays only the last name in the array when hoovering over the country, but I want it to display all the names. This is the code:
var chart = function (item) { body = document.getElementById("regions_div"); body.innerHTML = " "; var places = []; var names = []; for (var i = 0; i<item.length; i++) { person = item[i]; country = person.nationality; name = person.name; places.push(country); names.push(name); }; console.log(places); console.log(names); google.charts.load('upcoming', {'packages':['geochart']}); google.charts.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { 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]); console.log(temp); data.push(temp); } console.log(data); var chartdata = google.visualization.arrayToDataTable(data); var options = {}; var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(chartdata, options); } }
And the screenshot, for example this time has multiple players from England but only the last one in the array is displayed : 
Thanks for help!
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'] }); function drawRegionsMap() { 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, name var 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 row for (var i = 0; i < chartdata.getNumberOfRows(); i++) { // find group rows for current country var locationRows = groupdata.getFilteredRows([{ column: 0, value: chartdata.getValue(i, 0) }]); // build tooltip of all names for current country var 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); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="regions_div"></div>
