User Guide

Linking charts to URLs 761
itemColumn="Dept_Name"
colorlist="##990066,##660099,##006699,##069666"
/>
</cfchart>
3. Save the file as chartdetail.cfm.
4. View the chartdata.cfm page in your browser.
5. Click the slices of the pie chart to request the Salary_details.cfm page and pass in the department
name 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:
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.
To create a dynamic chart using JavaScript:
1. Create a new application page with the following content:
<script>
function Chart_OnClick(theSeries, theItem, theValue){
alert("Series: " + theSeries + ", Item: " + theItem + ", Value: " +
theValue);
}
</script>
<cfchart
xAxisTitle="Department"
yAxisTitle="Salary Average"
tipstyle=none
url="javascript:Chart_OnClick('$SERIESLABEL$','$ITEMLABEL$','$VALUE$');"
>
<cfchartseries type="bar" seriesLabel="Average Salaries by Department">
<cfchartData item="Finance" value="75000">
<cfchartData item="Sales" value="120000">
<cfchartData item="IT" value="83000">
<cfchartData item="Facilities" value="45000">
</cfchartseries>
</cfchart>
2. Save the page as chartdata_withJS.cfm in the myapps directory under the web root directory.
3. View the chartdata_withJS.cfm page in your browser:
4. Click the slices of the pie chart to display the pop-up window.
Code Description
url=
"Salary_Details.cfm?Item=$ITEMLABEL$"
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 that contains the
department name of the selected wedge.