These hot spots are made using the
elements. The Chart API can return all the coordinates needed to make a hot spot
map for it, as described next.
Creating a Map for Your Chart
If you add the parameter
your chart URL, you will receive back a JSON string that includes all the data
you need to create an image
map for your chart. You can then add links
to make your chart more interactive. Note that not all chart types support this;
see your specific chart documentation for details.
The tool on this page will help you generate the HTML for an image map. You can embed this HTML in your page permanently, or you could even copy our code to your page, and then request and generate the map on the fly, if your page enables the user to change the map on the page dynamically.
Here is how to use this tool to generate a map:
- Get the JSON output for your chart: add
chof=jsonto your chart URL, browse to that URL in your browser, and copy the returned text.
- Paste the JSON text you copied into the text box below marked "JSON Output" and click "Make Map".
- Paste the generated map code into your page
- Update the generated code with a unique name for your
- Remove any map elements that you don't need (for example, specific bars, slices, labels, or axis elements).
- Update the href attributes in the generated
- Add the attribute
<img>element, substituting your map's name for
Important: Be sure to prefix the usemap value with '#'. For example:
usemap="#mymap". In this case, the map name is "mymap" not "#mymap".
Format of the JSON String
Here is the format of the JSON returned when you specify
- A root object called chartshape. This object holds an array of objects, each
representing one area in an image map of the chart. Each object has the
- name - A name for this specific area. The general naming convention is elementtype_series#_item#. For example: bar0_0 for an area describing the first bar in the first series, or axis0_1 for an area describing the second axis label on the x-axis.
- type - The shape of this area. It will be one of the following values,
depending on the chart type: RECT, CIRCLE, or POLY. This is equivalent to
the shape attribute
- coords - A numeric array describing the area; equivalent to the coords attribute of the