CODEWITHSUNDEEP
chartsgoogle-visualization
knguyen
knguyen

Reputation: 3074

Color provinces in my country with Google charts (geocharts)

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.

Upvotes: 2

Views: 2921

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

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>

Upvotes: 4

Related Questions