const char *getHTMLImageMap(const char *url, const char *queryFormat = 0, const char *extraAttr = 0, int offsetX = 0, int offsetY = 0);
Generates an HTML image map for the chart.
This method generates an image map to represent all data points on the chart. It does not include legend box, title box or custom text box. Please use
LegendBox.getHTMLImageMap or
Box.getImageCoor to produce image maps for these objects.
This method should be called only after creating the chart image (eg. using
BaseChart.makeChart,
BaseChart.makeChart2 or
BaseChart.makeChart3). The image map cannot be determined without creating the chart image first.
This method accepts a URL as its argument. When generating an image map, it appends query parameters to the URL to indicate which data point the user has clicked.
The following is an example image map generated for a bar chart with 3 bars.
<area shape="rect" coords="34,219,63,139" href="myurl.cpp?x=0&xLabel=Mon&dataSet=0&dataSetName=Revenue&value=100">
<area shape="rect" coords="74,219,103,119" href="myurl.cpp?x=1&xLabel=Tue&dataSet=0&dataSetName=Revenue&value=125">
<area shape="rect" coords="114,219,143,22" href="myurl.cpp?x=2&xLabel=Wed&dataSet=0&dataSetName=Revenue&value=245.78">
The image map consists of multiple <area> tags, one for each bar in the chart. In the "href" attributes, query parameters are appended to the URL to provide information on the bar clicked.
The image map produces by ChartDirector does not include the <map> and </map> tag. This is intentional so that you can add additional custom <area> tags to the image map, or append multiple image maps together.
The type of query parameters to append to the URL depends on the chart type and layer type. The default query parameters are as follows.
| Chart/Layer Type
| Default Query Format
|
| Pie chart
| sector={sector}&label={label}&value={value}&percent={percent}
|
| Bar, Line, Spline, Step Line, Area and Scatter layers
| x={x}&xLabel={xLabel}&dataSet={dataSet}&dataSetName={dataSetName}&value={value}
|
| Percentage Bar and Percentage Area layers
| x={x}&xLabel={xLabel}&dataSet={dataSet}&dataSetName={dataSetName}&value={value}&percent={percent}
|
| HLOC and CandleStick layers
| x={x}&xLabel={xLabel}&high={high}&low={low}&open={open}&close={close}
|
| Box-Whisker layer
| x={x}&xLabel={xLabel}&top={top}&bottom={bottom}&max={max}&min={min}&med={med}
|
| Trend layer
| dataSetName={dataSetName}
|
| Vector layer and Polar Vector layer
| x={x}&xLabel={xLabel}&dataSetName={dataSetName}&value={value}&dir={dir}&len={len}
|
| Polar Line, Area, Spline Line and Spline Area layers
| "x={x}&label={label}&name={name}&value={value}" |
The texts in curly brackets (e.g. {sector}, {dataSet}, etc.) will be replaced by the actual values when generating the image map. For example, {sector} will be replaced by the sector number of the sector.
ChartDirector allows developers to modify the query parameters by using the
queryFormat argument. For example, if "x={x}&v={value}" is used as the
queryFormat for a XYChart, only the x position and the value of the data point will be included in query parameters.
Please refer to
Parameter Substitution and Formatting on all available parameters and their meanings.
In addition to customizing the query parameters, ChartDirector supports additional HTML attributes in the <area> tags by using the
extraAttr argument.
For example, the following
extraAttr will add an "title" HTML attribute to every <area> tag. The attribute which will contain the x-axis label and the value of the data point. The "title" attribute will be displayed as "tool tip" when the mouse moves over the image map.
title='{xlabel}:{value}'
Another common usage of the extraAttr argument is to add "onmouseover" and "onmouseout" HTML attributes to handle user interaction using Javascript on the browser.
A text string containing the image map generated.
© 2006 Advanced Software Engineering Limited. All rights reserved.