Color provinces in my country with Google charts (geocharts) - charts

Question

I'm trying to light up "Ha Noi" and "Ho Chi Minh" using Google Charts but it's not working by modifying the example in the document.
google.charts.load('upcoming', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Provinces', 'Popularity'],
['Hanoi', 200],
['HCM', 300],
]);
var options = {region:'VN',resolution:'provinces'};
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>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
https://jsfiddle.net/na8hvgts/
I wonder whether it's possible at all to color provinces/states outside the US.Thanks.

Answer 1

try using the ISO 3166-2:VN codes
see following working snippet...
also, the colorAxis will default to the min and max values in the data
leaving the min value transparent when there are only two rows
set specific colorAxis.min / colorAxis.max to avoid...
google.charts.load('upcoming', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Provinces', 'Popularity'],
[{v: 'VN-HN', f: 'Hanoi'}, 200],
[{v: 'VN-SG', f: 'HCM'}, 300],
]);
var options = {
region:'VN',
resolution:'provinces',
colorAxis: {
minValue: 0,
maxValue: 400
}
};
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>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>