google geochart set selectected country

Question

does anyone have idea how I can mark country from click? I need somehowe when link is clicked to select that country on map as on hover.

I just dont understand how to use setSelection functon from documentation: https://developers.google.com/chart/interactive/docs/gallery/geochart#Example

Here is my code:

<html>
<head>
<title>Geochart</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
    function isNumber (o) {
        return ! isNaN (o-0) && o !== null && o.replace(/^\s\s*/, '') !== "" && o !== false;
    }
    google.load('visualization', '1', {'packages': ['geochart']});
    google.setOnLoadCallback(drawRegionsMap);

    var chart;
    var options = {
        displayMode : 'regions',
        colorAxis : {minValue: 0, maxValue : 100, colors: ['red', '#d1d2d4']},
        legend: 'none',
        region : '142',
        tooltip : {
          trigger: 'none'
        }, 
        backgroundColor : "#f8f8f8", 
        datalessRegionColor : "#d1d2d4"
    };
    function drawRegionsMap() {
        var data = new google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600]
        ]);
        var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
        var newColor = '#c94033';

        google.visualization.events.addListener(chart, 'ready', function() {
            if ($.browser.msie && $.browser.version < 9) {
                $('#visualization').find('iframe').contents().on('hover', 'shape', function (e) {
                    if (e.type == 'mouseenter') {
                        if ($(this).prop('fillcolor') != '#f5f5f5' && $(this).prop('fillcolor') != 'none' && typeof($(this).prop('fillcolor')) != 'undefined') {
                            $(this).attr('baseColor', $(this).prop('fillcolor'));
                            $(this).prop('fillcolor', newColor);
                        }
                    }
                    else {
                        if (typeof($(this).attr('baseColor')) != 'undefined') {
                            $(this).prop('fillcolor', "#d1d2d4");
                        }
                    }
                });
            }
            else {
                $('#visualization').on('hover', 'path[fill!="#f5f5f5"][fill!="none"]', function (e) {
                    if (e.type == 'mouseenter') {
                        $(this).attr('baseColor', $(this).attr('fill'));
                        $(this).attr('fill', newColor);
                    }
                    else {
                        $(this).attr('fill', "#d1d2d4");
                    }
                });
            }
        });
        chart.draw(data, options);
        google.visualization.events.addListener(chart, 'regionClick', function(e) {
            var country = e.region;
            if(isNumber(country)){
                options.region = country;
                drawRegionsMap();
                $("#continents option").removeAttr("selected");
                $("#continents option").each(function(){
                    if($(this).val() == country){
                        $(this).attr("selected", "selected");
                    }
                })
            }
        });
    };
    $(document).ready(function(){
        $("#continents").change(function(){
            options.region = $(this).val();
            drawRegionsMap();
        });
        $(".mark-country").click(function(){
            var country_code = $(this).data("country-code");
            alert("select country: " + country_code);
        });
    });
 </script>
</head>
<body>
    <div id='visualization' style="width: 700px; height: 420px; float: left;"></div>
    <div style="float: left; margin-left: 10px;">
        <a href='javascript: void(0);' data-country-code="DE" class="mark-country">Germany</a><br />
        <a href='javascript: void(0);' data-country-code="US" class="mark-country">United States</a><br />
        <a href='javascript: void(0);' data-country-code="BR" class="mark-country">Brazil</a><br />
        <a href='javascript: void(0);' data-country-code="CA" class="mark-country">Canada</a><br />
        <a href='javascript: void(0);' data-country-code="FR" class="mark-country">France</a> <br />
        Select continent: <br />
        <select id="continents">
            <option value="002">Africa</option>
            <option value="142" selected="selected">Asia</option>
            <option value="150">Europe</option>
            <option value="021">Northern America</option>
            <option value="029">Caribbean</option>
            <option value="013">Central America</option>
            <option value="005">South America</option>
            <option value="009">Oceania</option>
        </select>
    </div>
</body>
</html>

Also here is jsfiddle: http://jsfiddle.net/KS7L2/

It is unclear what you want to do. Please try to explain what your desired behavior is, and what is currently happening. Clicking on a country executes whatever event you have set. When you say you want to "select" the country, what does that mean? — jmac

Abinaya Selvaraju Abinaya Selvaraju · Accepted Answer · 2013-07-24T09:58:03

Here is the sample code:

     google.visualization.events.addListener(table, 'select', function () {
                Geochart.setSelection(table.getSelection());

        var selection = table.getSelection();
        if (selection.length > 0) {
            var view = new google.visualization.DataView(data);
            view.setColumns([0, {
                type: 'number',
                label: data.getColumnLabel(1),
                calc: function (dt, row) {
                    return (selection[0].row == row) ? 2 : 1;
                }
            }]);
            Geochart.draw(view, options);
        }
        else {
            Geochart.draw(data, options);
        }
    });

    Geochart.draw(data, options);

    google.visualization.events.addListener(Geochart, 'select', function () {
                table.setSelection(Geochart.getSelection());

        var selection = Geochart.getSelection();
        if (selection.length > 0) {
            var view = new google.visualization.DataView(data);
            view.setColumns([0, {
                type: 'number',
                label: data.getColumnLabel(1),
                calc: function (dt, row) {
                    return (selection[0].row == row) ? 2 : 1;
                }
            }]);
            Geochart.draw(view, options);
        }
        else {
            Geochart.draw(data, options);
        }
    });

    Geochart.draw(data, options);
}

Here is the working sample jqfaq.com.

Hope this will help you.

google geochart set selectected country

1 Answers