I'm displaying a geochart at the state level. When configuring with the Brazilian region works, as you can see below, but not with the state code, for example: BR-SP
google.load('visualization', '1', {
'packages': ['geochart', 'table']
});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Views'],
['BR-AL', 300],
['BR-SP', 300],
['BR-RJ', 400]
]);
var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));
var options = {
region: 'BR',
resolution: 'provinces',
width: 800,
height: 600,
colorAxis: {
colors: ['#acb2b9', '#2f3f4f']
}
};
geochart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script><scriptsrc="https://www.google.com/jsapi"></script><divid="chart_div"></div>
At the state level:
google.load('visualization', '1', {
'packages': ['geochart', 'table']
});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Views'],
['Sao Paulo', 300],
['Campinas', 300],
]);
var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));
var options = {
region: 'BR-SP',
displayMode: 'markers',
width: 800,
height: 600,
colorAxis: {
colors: ['#acb2b9', '#2f3f4f']
}
};
geochart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript" src="https://www.google.com/jsapi"></script><divid="chart_div"></div>