GeoCharts how to show country names instead of codes - charts

Question

I would like to make a visualization with the google GeoChart. I put in country codes. I would like to display the full country names but only the country code pops up.
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Members'],
['LB', 3],
['JO', 2],
['IT', 24],
['PS', 3],
['LY', 1],
['TN', 6],
['LB', 3],
['EG', 2],
]);
var options = {
colorAxis: {
colors: ['#c1c1cd', '#53556e']
},
legend: 'none'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>

Answer 1

using object notation,
you can provide the value (v:) and the formatted value (f:)
{v: 'IT', f: 'Italy'}
the tooltip will display the formatted value by default
update the data using object notation and provide the name as the formatted value
see following working snippet,
hover over Italy to see the result...
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Members'],
['LB', 3],
['JO', 2],
[{v: 'IT', f: 'Italy'}, 24],
['PS', 3],
['LY', 1],
['TN', 6],
['LB', 3],
['EG', 2],
]);
var options = {
colorAxis: {
colors: ['#c1c1cd', '#53556e']
},
legend: 'none'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>

Answer 2

Based on the WhiteHat's answer I added some code to automatize the introduction of the formatted values.
// iso to name conversion
// https://gist.github.com/maephisto/9228207
var isoCountries = {
'IT': 'Italy',
'JO': 'Jordan',
'LB': 'Lebanon',
};
function getCountryName(countryCode) {
if (isoCountries.hasOwnProperty(countryCode)) {
return isoCountries[countryCode];
} else {
return countryCode;
}
};
// Load the Visualization API and the corechart package.
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawRegionsMap);
// Callback that creates and populates a data table,
// instantiates the chart, passes in the data and
// draws it.
function drawRegionsMap() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Members');
data.addRows([
['LB', 3],
['JO', 2],
['IT', 24],
]);
// Set chart options
var options = {
colorAxis: {
colors: ['#c1c1cd', '#53556e']
},
legend: 'none',
backgroundColor: '#efefef'
};
// Create new data table for iso and full country name
var dataMod = new google.visualization.DataTable();
dataMod.addColumn('string', 'Country');
dataMod.addColumn('number', 'Members');
// Adding rows with iso and full country name
var numRows = data.getNumberOfRows();
for (var i = 0; i < numRows; i++) {
dataMod.addRows([
[{
v: String(data.getValue(i, 0)),
f: String(getCountryName(data.getValue(i, 0)))
}, data.getValue(i, 1)],
]);
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(dataMod, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>