Tooltips for Google Chart API
As described in the article "A five dimensional scatterplot" it is only possible to display three dimensions with Google's chart API: x, y and size of the dots. In order to provide more information to the reader of the chart, tooltips are the solution at hand.
These tooltips can be realized using the HTML area tag. For any image you can provide a map, which lets you specify certain mouse sensitive areas with different shapes like rectangle, circle or polygon. So this is exactly what we need in order to install tooltips to a google chart.
In order to see what information is needed a short inventory helps.
- the height and width of the target image
- the domain values that should be mapped to the target dimension
- the maximum and the minimum of the domain values
- the mapped coordinates of the domain values
The mapping of the domain values to coordinates can be achieved easily with the following mapping function:
coordinate = (value – min / max – min) * target size
which essentially maps the domain value into a range between 0 and 1 and then multiplies it with the available target image size (width or height), such that the maximal value is mapped to the maximal available coordinate. Since Google always starts the axes with 0, the mapping function gets even easier:
coordinate = (value / max) * target size
This coordinates can be used to create the map with the area tags that will be mouse sensitive. This sensitivity is used to show tooltips with detailed information about this data point as shown below.
Click on the image to see the interactive version of the tooltips for Google's chart API with an example scatter plot.
The chart was created with the following parameters:
- chs (chart size):
- cht (chart type):
- s (scatter plot)
- chm (chart shape marker):
- 20 maximal size
- chxt (chart axis type):
- x,y (y and y axis)
- chxl (chart axis label):
- 0:|1.4|2.5|6.4|1:|0.2|0.95|2.1 (min, middle, and max values per axis)
- chtt (chart title):
- chd (chart data):
- s: and the encoded data using simple encoded data
More information about the parameters you find on Google's chart API site.
Saved me some more hours of desperate nightly search: