Mental Jetsam

By Peter Finch

Archive for May, 2009

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.

Posted in HTML | Leave a Comment »