P.S. Of course, register on the click events, and you can grab that same
logicalname property from the object at your click event.
On Friday, November 15, 2019 at 2:07:53 PM UTC+1, Javier Guerrero García
wrote:
>
> 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;
>>>
>>>
--
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/4c6b0d94-0c2e-4ddb-aef6-7a061bb52747%40googlegroups.com.
