Google Geochart: Highlighting by continent & country (multiple resolutions) - google-visualization

Question

I would like to make a google chart that highlights different regions continents, or countries based on a particular grouping.
The problem is I can't figure the best way to show both continents and countries.
For instance, I'd like to have two highlighted entries: Europe and Japan.
I can use the below JS code to attempt this:
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Region', 'Label', {role: 'tooltip', p:{html:true}}],
['150', 1, 'Europe'],
['Japan', 2, 'Japan']
]);
var options = {
resolution: 'continents',
}
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, options);
};
The above code partly works- Europe is properly highlighted and labelled. However, because resolution is set to 'continents' Japan does not get highlighted. If I set resolution to 'countries' the opposite problem occurs.
So the real question:
Is there a way to highlight both Europe and Japan individually with one array entry each, or do I have to put every single European country in the list to also have Japan highlighted?

Answer 1

yes, you would need to put every single European country in the list to also have Japan highlighted
another option might be to draw two charts, one on top of the other,
using the following config options to allow the bottom one to show thru.
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
however, this would suppress the tooltip on the bottom chart.
see following working snippet for an example...
google.charts.load('current', {packages:['geochart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Region', 'Label', {role: 'tooltip', p:{html:true}}],
['150', 1, 'Europe']
]);
var options1 = {
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
resolution: 'continents'
}
var geochart1 = new google.visualization.GeoChart(
document.getElementById('visualization1')
);
geochart1.draw(data1, options1);
var data2 = google.visualization.arrayToDataTable([
['Region', 'Label', {role: 'tooltip', p:{html:true}}],
['Japan', 2, 'Japan']
]);
var options2 = {
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
resolution: 'countries'
}
var geochart2 = new google.visualization.GeoChart(
document.getElementById('visualization2')
);
geochart2.draw(data2, options2);
}
.geo {
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="geo" id="visualization1"></div>
<div class="geo" id="visualization2"></div>
note: jsapi should no longer be used to load the charts library,
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.
this will only change the load statement, see above snippet...