google geochart set selectected country

1,108 views
Skip to first unread message

consigliere

unread,
Jul 22, 2013, 6:26:45 PM7/22/13
to google-visua...@googlegroups.com

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/

asgallant

unread,
Jul 22, 2013, 6:50:25 PM7/22/13
to google-visua...@googlegroups.com
The GeoCharts don't implement a visual selection effect, so setting the selection on the chart doesn't have any visual impact.  There is no way to trigger a hover effect over a country without moving the mouse cursor over the county.

The closest you can get is to change the color of the "selected" country, but that isn't always a viable solution, especially if color has meaning in your chart.

Javier Guerrero García

unread,
Nov 15, 2019, 8:07:53 AM11/15/19
to Google Visualization API
Pfewww.. many years later... There IS a way, but it's not easy at all :-)

Summing up, each path has a "logicalname" property that lists a few things, being the ISO country it belongs one of them: "ocean or not # something # something else # another thing # country_iso # something more". If you want to highlight one country, you can iterate through all paths, split the logicalname string by "#", grab the 4th (zero based) item, and if it's your desired country then change that path properties (or add a css class, way more elegant).

Something like:

$('#visualization g[clip-path] path').removeClass("highlight")
$('#visualization g[clip-path] path').each(function (i,o)
{
country=o.logicalname.split('#')[4]; 
if (country=="US") $(o).addClass("whatever");
}

Being your CSS highlight class something like:

.highlight { fill: #00FF00; }

Hope it helps someone else!

Javier Guerrero García

unread,
Nov 15, 2019, 8:13:24 AM11/15/19
to Google Visualization API
P.S. Of course, register on the click events, and you can grab that same logicalname property from the object at your click event.
Reply all
Reply to author
Forward
0 new messages