Mental Jetsam

By Peter Finch

Hyperlinks on Google Charts

Posted by pcfinch on May 1, 2009

I love Google Charts! If you have ever needed to present information on a web page in a chart form, then Google Charts is really worth looking at. Once you have the chart on your webpage you may want to click on a entry of the legend (the little box that tells you what-is-what on the chart) to take you to more information on that section of the chart. Sadly, the API does not currently have a way to add links to a chart.

This is a simple way to add hyperlinks (or hotspots) to a Google chart using an image USEMAP.

<img src="http://chart.apis.google.com/chart?cht=lc&chd=s:Uf9a,a3fG&chs=250x100&chl=1|2|3|4&chco=000000,0000FF&chma=0,30,30,30&chdl=Desktops|Laptops" 
   usemap="#chart" border=0>
<map name="chart">
<area shape="rect" coords="199,31,249,49" href="javascript:alert('More information on Desktops')">
<area shape="rect" coords="199,50,249,69" href="javascript:alert('More information on Laptops')">
</map>

The above HTML ends up looking like this. If you were [on a normal webpage] to click on the “Desktops”, or “Laptops” sections of the graphics you will see the javascript popup. Sadly, the USEMAP does not work on WordPress (this website) web pages, but you get the idea. You can of-course replace the javascript with a link to another page if you like, or even another chart!

The down side of this approach is that it works great as long as the legend does not move or the size of the chart does not change. It seems to work pretty well with line and bar charts, so select your chart type carefully and play around and see what happens.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: