CODEWITHSUNDEEP
javascriptgoogle-visualization
mvp
mvp

Reputation: 213

Region not highlighted within Geo Chart

When a State of the US is selected from a dropdown containing all the states, I wish to show that state highlighted in the US map. I want to accomplish this using Geo Chart of the Google Charts API.

While trying to achieve that, I tried this sample in the Google Code Playground (where you can edit existing samples) 

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Country'],
    ['US-AK' ],
    ['US-AZ' ],
    ['US-HI' ],

  ]);

  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, {region:"US",legend:"none",width: 556, height: 347});
}

Although Alaska ('US-AK') & Hawaii ('US-HI') show up in the map, Arizona ('US-AZ' ) doesn't. How can I get Arizona to be highlighted as well? I'll also appreciate any pointers on my original goal of showing a state highlighted dynamically when a state within the dropdown is chosen.

Upvotes: 1

Views: 2283

Answers (2)

RohannG
RohannG

Reputation: 669

No need to add states code for US or any country. You can give full names of states in US as is and just one modification in your code. Just change the options like this....

 var options={
            region:"US",
            resolution: 'provinces',//This is the property due to which U can see regions.
            colors:['green', 'red'],
            dataMode:'regions'

    }

Upvotes: 0

asgallant
asgallant

Reputation: 26340

The reason Arizona doesn't show up on the map is because you have to set the resolution option to "provinces" to get a map of the states. Using a dropdown to highlight a selected state is a bit more complex, but certainly doable. Here's one way you could do it; in your javascript:

function drawChart () {
    var data = google.visualization.arrayToDataTable([
        ['State', ''],
        ['US-AK', 0],
        ['US-AZ', 0],
        ['US-HI', 0]
    ]);

    var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    var options = {
        region:"US",
        legend:"none",
        width: 556,
        height: 347,
        resolution: 'provinces',
        colorAxis: {
            minValue: 0,
            maxValue: 1,
            colors: ['green', 'red']
        }
    };

    var stateSelector = document.querySelector('#state');    
    function updateChart () {
        var index = this.selectedIndex;
        var selectedState = this.options[index].value;

        var view = new google.visualization.DataView(data);
        view.setColumns([0, {
            type: 'number',
            calc: function (dt, row) {
                return (dt.getValue(row, 0) == selectedState) ? 1 : 0;
            }
        }]);

        geochart.draw(view, options);
    }

    if (document.addEventListener) {
        stateSelector.addEventListener('change', updateChart, false);
    }
    else if (document.attachEvent) {
        stateSelector.attachEvent('onchange', updateChart);
    }
    else {
        stateSelector.onchange = updateChart;
    }

    geochart.draw(data, options);
}
google.load('visualization', '1', {packages:['geochart'], callback: drawChart});

And then in your HTML:

<select id="state">
    <option value="" selected="selected">Select a state to highlight</option>
    <option value="US-AK">Alaska</option>
    <option value="US-AZ">Arizona</option>
    <option value="US-HI">Hawaii</option>
</select>
<div id="chart_div"></div>

Here's a jsfiddle of this that you can play around with: http://jsfiddle.net/asgallant/wwDyU/

Upvotes: 3

Related Questions