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!
On Tuesday, July 23, 2013 at 12:50:25 AM UTC+2, asgallant wrote:
>
> 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.
>
> On Monday, July 22, 2013 6:26:45 PM UTC-4, consigliere wrote:
>>
>> 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/
>>
>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/72ef954d-f50f-444b-a081-1a19b88a611d%40googlegroups.com.
