
This example demonstrates using ChartDirector image maps to invoke client side Javascript functions.
In this example, a clickable area chart will be produced. Apart from responding to mouse clicks, detail information about the data points will be displayed in separate dynamic HTML blocks when the mouse pointer moves over the chart. This is accomplished using "onMouseOver" and "onMouseOut" event handlers with client side Javascript.
The code for this example is listed below.
[File: phpdemo/jsarea.php".]
Javascript Clickable ChartMove the mouse cursor over the area chart to see what happens! This effect is achieved by using image maps with client side Javascript.
Year
Revenue : USD K Gross Margin : % Back Log : USD K A/C Receviable : USD K |
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 for the chart is created using the following code:
|
Note that in additional to the "title" attribute for the "tool tip", the image map also includes event handlers "onmouseover" and "onmouseout".
The "onmouseover" and "onmouseout" event handlers call the client side Javascript function "setDIV". This function is a simple utility for showing and hiding a DIV block in dynamic HTML. The source code of "setDIV" is as follows. It is included as part of the web page to be sent to the browser.
|
The DIV blocks that show the detail information are generated using the following code.
Year
Revenue : USD K Gross Margin : % Back Log : USD K A/C Receviable : USD K |
Each data point is associated with a DIV block that shows its detail information. The "id" attribute of the DIV block is set to "info[i]", where [i] is the data point number.
Initially the DIV blocks are hidden using
"visibility:hidden"
inside the style attribute. When the mouse pointer moves over a hot spot,
the "onmouseover" event handler will execute the following code.
The above code uses the "setDIV" function to show the DIV block whose "id" attribute is "info{x}", where "{x}" is the data point number associated with the hot spot. As a result, the DIV block for that data point is shown.
Similarly, when the mouse pointer moves out of the hot spot, the "onmouseout" event handler will execute the following code to hide the DIV block.
In addition to responding to mouse over and mouse out events, the chart is also clickable using "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".]
Simple Clickable XY Chart HandlerYou have clicked on the following chart element :
|