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