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 countrythen the tooltip is updated for each row in
chartdata
for all the names found for each country
see following working snippet...