In this example, a clickable line chart will be created with legend keys, a title box, a vertical mark with label, and a custom text box. All these objects will be clickable in addition to the lines and the data points.
This example also demostrate how to use client side Javascript as the click handler.
The code for this example is listed below.
[File: phpdemo/customclick.php".]
In the above code, the chart is created and saved in a session variable using BaseChart.makeSession. An <IMG> tag is used to retrieve the chart with "myimage.php?<?php echo $chart1URL?>" as the URL. "myimage.php" is a simple utility that comes with ChartDirector for retrieving images from session variables.
The image map in this example consists of multiple parts. The part for the line chart is produced using BaseChart.getHTMLImageMap with "xystub.php" as the handler:
|
|
For demo purpose, "xystub.php" simply displays information on what is clicked. It's source code is as follows.
[File: phpdemo/xystub.php".]
The image map for the legend keys is produced using LegendBox.getHTMLImageMap. In this example, a client side Javascript will be executed when the user clicks on the legend key.
|
|
As shown above, the "javascript:doSomething();" is used as the handler. ChartDirector will put the handler as "href" attributes in the <AREA> tags of the image map. The browser will interpret it as a client side Javascript statement to be executed when the <AREA> tag is clicked.
Note that the second argument to LegendBox.getHTMLImageMap is set to a space character. This argument specifies the HTTP query parameters get passed to the handler. If this argument is an empty string, default query parameters will be used. In this example, since the handler is a client side Javascript, no HTTP query parameter is necessary. So a space character is used.
The client side Javascript executed in this example is a function called "doSomething();". In this example, this just pops up a message.
|
|
Most text messages in ChartDirector are represented as TextBox objects, and their image map coordinates can be retrieved using Box.getImageCoor. This allows <AREA> tags for TextBox objects be created easily.
(For TextBox, there is no "getHTMLImageMap" method. It is because each TextBox object only has one hot spot. It is more convenient to enter the handler URL and tool tip text directly into the <AREA> tag, rather than generating them using getHTMLImageMap.)
In this example, the image map coordinates of the chart title, vertical mark label, and the copyright message are obtained using Box.getImageCoor:
|
|
The image map coordinates are then used to make <AREA> tags as follows:
|
|