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.
tooltips for google a chart

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.

We have:

  • 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

We need:

  • 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.


tooltips for Google's chart API
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):
300x300
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):
Iris+Data+Sample+Scatter+Plot
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.

Side note:
Saved me some more hours of desperate nightly search:
http://www.webmasterworld.com/html/3142618.htm
To make it work in IE7 the “usemap” attribute in the javascript has to be “useMap”.

Epic Systems together with

Epic Systems together with Beemode (www.beemode.com) have developed a Data Visualization software "Trend Compass" almost ready to be released soon. It is an extension to Gapminder which was invented by a Swedish Professor. You can view it :

- www.gapminder.org

It is a new concept in viewing statistics and trends in an animated way. It could be used in presentation, analysis,research, decision making, etc.

Here are some links :
- Part of what we did with some Governmental institution:
www.epicsyst.com/visual.swf

- A project we did with Princeton University on US unemployment :
www.epicsyst.com/main3.swf

- April 2008 Media Monitoring on Cars TV ads (ad duration vs occurences over time) :
www.epicsyst.com/ads/cars.swf

- Ads Monitoring on TV Sattelite Channels during April 2008. Pick Duration (Ads daily duration) vs Repeat (Ads repetition per day).
http://www.epicsyst.com/ads3/allchannels.swf

I hope you could evaluate it and give me your comments. So many ideas are there.

You can test the software by uploading data on our website and getting the corresponding Flash charts. This is for a limited number of users.

Regards.

Eng. Hisham Abdel Maguid
www.epicsyst.com

Hi, great tip! But your

Hi, great tip! But your formula only the coordinates y-axis and it doesn't take into account the graphs y-offset which it should. And you can't use it to get the coordinates x-axis value.

hi i want to show a tool on

hi i want to show a tool on graph whose url is as bellow can you please guide me out :

http://chart.apis.google.com/chart?cht=lxy&chs=340x250&chd=t:0,28|76.6,76.6|0,28|91.9,91.9|0,28|122.5,122.5|0,1,2,8,9,10,12,13,14|73.4,75,56,76,75,78,75,89,87|7,11,20,21,22|96,58,55,69,69|0,28|55,55|0,1,2,8,9,10,12,13,14|73.4,75,56,76,75,78,75,89,87|14,28|87,123.16666666667&chxt=x,y,r&chco=FF8040,00FF00,FF8042,3072F3,ff0000,ff0000,3072F3,3072F3,FF8040,00FF00,FF8042,3072F3,ff0000,ff0000,3072F3,3072F3&chls=2,2,0|2,2,0|2,2,0|2,2,0|2,2,0|2,2,0|2,2,0|2,2,2&chxl=0:|10-05|14-05|18-05|22-05|26-05|30-05|03-06|07-06|1:||66|82|98|114|130|2:||21.6|26.8|32.0|37.2|42.4&chds=0,28.0,50.0,130.0,0,28.0,50.0,130.0,0,28.0,50.0,130.0,0,28.0,50.0,130.0,0,28.0,50.0,130.0,0,28.0,50.0,130.0,0,28.0,50.0,130.0,0,28.0,50.0,130.0&chf=c,lg,90,76A4FB,0.5,FFFFFF,0|bg,s,FFFFFF&chm=t,000000,0,0,15|tHealthy,000000,1,0,15|tOverweight,000000,2,0,15|o,3072F3,3,-1,5.0|s,ff0000,4,-1,5.0|tNext%20goal,000000,5,0,15|R,FFFF00,0,0.497,0.5&chg=14.3,20,1,8

Hi, please refer to the

Hi,
please refer to the source code of the example page. The createMap() function is probably what you are looking for. There it is defined how the tooltip is injected. Hope that helps.
Best regards, Fabian

Do you have any video of

Do you have any video of that? I'd love to find out some additional information.

The above example for tooltip

The above example for tooltip in google image scatter chart is awesome, i need to put the same functionality in my image line chart, is there any code for line charts, having only one graph. If so please mail me.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.