Customize the content in a Map chart with Google visualization - HTML

[Marcela Moreno]

Hello,

I have a google.visualization.Map chart. The Datatable for that chart has 3 columns and I want that the third one works like a 'tooltip' with HTML format.

My data is something like :

[1,2,'"<div>marcela</br>moreno</br>5000<div>]

and I set the column property with this: this.data.setColumnProperty(2, 'role', 'tooltip'), even with this this.data.setColumnProperty(3, {type:'string', role:'tooltip', html:true});

and set the map options like:

var options ={

 ....other options,

 tooltip:{isHtml:true}

}

But even those configurations, The tooltip content is still a string. So, all of html tags are showed in the toottip.

I don't know if tooltip role doesn't work in Map chart.

The other approach is try to change the InfoWindow that appears when I click in any point of the map, but all the documentation  I had founded is with Google Maps API and I'm using Google visualization.

So, I'd really appreciated any help with this issue I have.

Thanks a lot.

Marcela

[Sergey Grabkovsky]

Hi Marcela,

The tooltip role is not supported by the Map visualization, but this is only because the Map visualization should automatically use the third column as a tooltip and process the HTML, no special options required. Here's an example: http://jsfiddle.net/8ttds5jv/

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/3662bbbf-1526-44a3-a469-7cde49f4df38%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

 

Sergey Grabkovsky | SWE  | gra...@google.com

[Marcela Moreno]

Thanks for your answer.

Is it possible to remove the tooltip when hover marker and leave the tootlip appears when click it in?

I'd appreciated your help.

Marcela

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/djGuF3P88vc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAEwwup6P98eD%3Dm7HXmv3ML4MaaC9ZjTC61w3GHYjxugfoUkcJw%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

July Marcela Moreno Gómez
Software Engineer
IT Project Management
Belfast, NI

[Sergey Grabkovsky]

I believe the tooltips in the Map visualization are only available when you click. This is inherited from the Google Maps behavior (since that's what we use to draw the map, markers, and tooltips). If you find some documentation or an example of a Google Map displaying its tooltips on hover, please link to it and we will integrate it when we have time.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CACKPh2Q6BQ%2BVeZWhDfPuAXnfgpy_a0oeYm0BroXZ6i1pxuFgZQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Marcela Moreno]

​Hi,

​In the example you sent me, if you hover the mouse on the market a tooltip appears without processing the HTML

So, I wonder how can I remove the tooltip to avoid to show the HTML tags?

Thanks​

​​

Marcela

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAEwwup7YB-yVZ56SDSXO7%3Dy-RP7yCxmMui0s%2BRrR8veq15WsuA%40mail.gmail.com.

[Sergey Grabkovsky]

Oh. You're talking about the actual tooltip. Sadly, I don't believe you can process the HTML there. It's a system tooltip, so I'm not even sure that browsers expose everything we would need to actually do it.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CACKPh2RkQx93c5VhjAo_C3hc4ySE5aDL0KKGUnmyCiGoJeR8OQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Marcela Moreno]

​Ok!! Seems I don 't have solutions :(

Then, Can I handle the Click event to change the tootlip content for Map chart from google visualization?​

Any ideas?

Thanks a lot

Marcela

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAEwwup5qtXofp-UpXQwOrVtOJd8KAYCG7qJDX4SDg%2BAVvgnQGw%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Sergey Grabkovsky]

Well it wouldn't be pretty, but you could listen for the 'select' event, swap out the tooltip content, and then redraw the map and setSelection() (since redrawing will lose the selection). However, when a tooltip is present, the user could still hover over the marker and make the text appear, so I don't think there's any way to get around this behavior outside of using the Google Maps API directly.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CACKPh2SSTvVqGSW0JvmdmEYZbGZ6t80uM1nYRPp3wSXipfugZg%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Marcela Moreno]

​Sergey, Thank you very much. We'll see what should be the best approach for this problem we have according your suggestions.

I'd appreciate your help.

Marcela​

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAEwwup7sAXz%2B5FE4dKhpwvtX6xZX83Q1%2BsNFeOTNuMaNTKoF_w%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.