
This example demonstrates how you could use client side Javascript with ChartDirector's image map features.
In this example, a clickable area chart will be produced. Apart from responding to mouse clicks, the area chart will display in real time detail information about the data points when the mouse moves over the areas in the chart. It is accomplishing by using "onMouseOver" and "onMouseOut" event handlers with client side Javascript and dynamic HTML.
The code for this example is listed below.
[The following is available as "pythondemo_cgi/jsarea.py".]
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. """ % vars() for i in range(0, len(revenue)) : print """
Year """ % vars(), labels[i], """
"""
print """
"""Revenue : USD """, revenue[i], """K Gross Margin : """, grossMargin[i], """% Back Log : USD """, backLog[i], """K A/C Receviable : USD """, receviable[i], """K |
In the above code, the chart is created and saved in a temporary file using BaseChart.makeTmpFile. An <IMG> tag is used to retrieve the chart with "myimage.py?img=/tmp/tmpcharts/%(chart1URL)s" as the URL. "myimage.py" is a simple utility that comes with ChartDirector for retrieving images from files.
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 "onmouseover" and "onmouseout" attributes. These two attributes will instruct the browser to execute the corresponding code when the mouse moves over and moves out of the areas defined in the <area> tags.
The code in the "onmouseover" and "onmouseout" attribute calls a client side Javascript function "setDIV". This function is simple a utility to show and hide a DIV block in dynamic HTML. The definition 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 """ % vars(), labels[i], """
Revenue : USD """, revenue[i], """K Gross Margin : """, grossMargin[i], """% Back Log : USD """, backLog[i], """K A/C Receviable : USD """, receviable[i], """K |
Each data point is associated with a DIV block that shows its detail information. As seen from the "style" attribute in the above code, initially the DIV blocks are hidden. When the mouse moves over the area defined in an <area> tag, the "onmouseover" event handler will call the "setDIV" function to show the coresponding DIV block. When the mouse moves out of that area, the "onmouseout" event handler will call the "setDIV" function to hide the DIV block.
In addition to responding to mouse over and mouse out events, the area chart is also clickable using "xystub.py" as the handler. For demo purpose, "xystub.py" simply displays what is clicked.
[The following is available as "pythondemo_cgi/xystub.py".]
Simple Clickable XY Chart HandlerYou have clicked on the following chart element :
|