Displaying the state in a geochart

Question

I am displaying a GeoChart the state level. When configuring with the Brazil 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>
<script src="https://www.google.com/jsapi"></script>

<div id="chart_div"></div>

A nível de estado:

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',
    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> 
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id="chart_div"></div>

Answer 1

It seems that you can't divide a country region (e.g. São Paulo) in subregions (e.g. Campinas) using options.displayMode: 'regions' but you can show them as markers with options.displayMode: 'markers'

google.load('visualization', '1', {
  'packages': ['geochart', 'table']
});
google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

  var data = google.visualization.arrayToDataTable([
    ['State', 'Views'],
    ['São Paulo', 300],
    ['Campinas', 200],
    ['Araras', 400],
    ['Buri', 100],

  ]);

  var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  var options = {
    region: 'BR',
    displayMode: 'markers',
    resolution: 'provinces',
    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> 
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id="chart_div"></div>