CODEWITHSUNDEEP
javascriptgoogle-visualizationtreemap
Ming Z
Ming Z

Reputation: 21

How to add mouse click action to google treemap visualization

The google treemap visualization is very nice. Is there anyway to add a mouse click action to it (e.g. adding a hyper link so that a new browser window pop out when a particular tile is clicked.)? The document did not mention anything about mouse click event.

If google visualization does not allow this, would you recommend anything else that is easy to use and has this functionality?Thanks a lot!

Upvotes: 2

Views: 2008

Answers (1)

jmac
jmac

Reputation: 7128

Better late than never, but...

It is possible to do this using the 'select' handler.

google.visualization.events.addListener(myTreeMap, 'select', myOnClickFunction);

myOnClickFunction can contain whatever you want, but the best way to handle links is to add them as a column in your original data, and then look up the appropriate link from the column based on the row selected in the TreeMap.

When you use the select listener, it will give you the row in the DataTable if you use the getSelection() function as follows (documentation here):

myTreeMap.getSelection();

This will give you the row in the table, so if you were to have the URL in the 5th column, you could figure out the URL as follows:

myTreeMap.getValue(4, myTreeMap.getSelection());

Once you have the URL you can just use standard Javascript to do whatever you need (open a new window, etc.).

Upvotes: 2

Related Questions