Linking To Javascript From A Pie Chart - MACROMEDIA COLDFUSION MX 61-DEVELOPING COLDFUSION MX Develop Manual

Developing coldfusion mx applications
Table of Contents

Advertisement

Part 2: making the chart dynamic
Open chartdata.cfm in your editor.
1
Edit the
2
cfchart
<cfchart
font="Times"
fontBold="yes"
backgroundColor="##CCFFFF"
show3D="yes"
url="Salary_Details.cfm?Item=$ITEMLABEL$"
>
<cfchartseries
type="pie"
query="DeptSalaries"
valueColumn="SumByDept"
itemColumn="Dept_Name"
colorlist="##6666FF,##66FF66,##FF6666,##66CCCC"
/>
</cfchart>
Save the file.
3
Return to your browser and enter the following URL to view chartdata.cfm:
4
http://127.0.0.1/myapps/chartdata.cfm
Click the slices of the pie chart to request Salary_details.cfm and pass in the department name
5
of the wedge you clicked. The salary information for that department appears.
Reviewing the code
The following table describes the highlighted code and its function:
Code
url=
"Salary_Details.cfm?Item=$ITEMLABEL$"

Linking to JavaScript from a pie chart

In the following example, when you click a pie wedge, ColdFusion uses JavaScript to display a
pop-up window about the wedge.
Create a dynamic chart using JavaScript
Create a new application page with the following content:
1
<script>
function Chart_OnClick(theSeries, theItem, theValue){
alert("Series: " + theSeries + ", Item: " + theItem + ", Value: " +
theValue);
}
</script>
tag for the pie chart so it appears as follows:
Description
When the user clicks a wedge of the pie chart, call the
Salary_Details.cfm page in the current directory, and
pass it the parameter named Item containing the
department name of the selected wedge.
Linking charts to URLs
639

Advertisement

Table of Contents
loading

This manual is also suitable for:

Coldfusion mx

Table of Contents