Legends for the Chart

Adding a complex legend to your Google Chart should not be a difficult job. Just do the legend on your own and let the Chart API handle the data values and the IMG object.

Simple is beautiful.

As shown in the Chart API documentation page, adding legends works well for small sets of data.

In most cases, the addition of a legend will chew up the real estate available to the graphical elements in the chart. As the Chart image size is limited, this is a major limitation.

Frequently enough, the data series are identified by the colour. If we know which colours are allocated to which series, then we can work out a legend that does not interfere with the rendering of the IMG.

Show me the Legends


In the example above, the legend contains the colours and descriptions of the data series, and the display is triggered by an onClick Javascript event.

For the purposes of this example, the table is in a pop-up in a separate window, but can easily be integrated as a CSS layer in the same window.

A ZIP of this project can be found here.

This project uses Javascript code from Java Script Toolbox. The value data was sourced from Wikipedia

Disclaimer: This code is posted "as is", with a Creative Commons license and neither Carlos Labs nor any of its representatives guarantee the suitability of this script, or assume any responsibility for your actions.
This script is free to use on any software project, free or otherwise, provided you credit Carlos Labs and you do not remove the header in the script.
Project: 200803A