Adobe 38043740 - ColdFusion Standard - Mac Development Manual page 1011

DEVELOPING COLDFUSION 9 APPLICATIONS
Working with Documents, Charts, and Reports
Code
<cfquery name="GetSalaryDetails"
datasource="cfdocexamples">
SELECT Departmt.Dept_Name,
Employee.FirstName,
Employee.LastName,
Employee.StartDate,
Employee.Salary,
Employee.Contract
FROM Departmt, Employee
WHERE Departmt.Dept_Name = '#URL.Item#'
AND Departmt.Dept_ID = Employee.Dept_ID
ORDER BY Employee.LastName, Employee.Firstname
</cfquery>
<table border cellspacing=0 cellpadding=5>
<tr>
<th>Employee Name</th>
<th>StartDate</th>
<th>Salary</th>
<th>Contract?</th>
</tr>
<cfoutput query="GetSalaryDetails">
<tr>
<td>#FirstName# #LastName#</td>
<td>#dateFormat(StartDate, "mm/dd/yyyy")#</td>
<td>#numberFormat(Salary, "$999,999")#</td>
<td>#Contract#</td>
</tr>
</cfoutput>
</table>
Part 2: Making the chart dynamic
1 Open chartdata.cfm in your editor.
Edit the tag for the pie chart so it appears as follows:
2
cfchart
<cfchart
font="Times"
fontBold="yes"
backgroundColor="##CCFFFF"
show3D="yes"
url="Salary_Details.cfm?Item=$ITEMLABEL$"
>
<cfchartseries
type="pie"
query="DeptSalaries"
valueColumn="AvgByDept"
itemColumn="Dept_Name"
colorlist="##990066,##660099,##006699,##069666"
/>
</cfchart>
Save the file as chartdetail.cfm.
3
View the chartdata.cfm page in your browser.
4
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:
Description
Get the salary data for the department whose name was passed in
the URL parameter string. Sort the data by the last and first names
of the employee.
Display the data retrieved by the query as a table. Format the start
date into standard month/date/year format, and format the salary
with a leading dollar sign, comma separator, and no decimal
places.
Last updated 1/20/2012
1006