
Contents > Developing ColdFusion MX Applications > Charting and Graphing Data > Linking charts to URLs > Dynamically linking from a pie chart

Dynamically linking from a pie chart

In the following example, when you click a pie wedge, ColdFusion displays a table that contains the detailed salary information for the departments represented by the wedge. The example is divided into two parts: creating the detail page and making the pie chart dynamic.

Part 1: creating the detail page

This page displays salary information for the department you selected when you click on a wedge of the pie chart. The department name is passed to this page using the $ITEMLABEL$ variable.

To create the detail page:

Create a new application page with the following content:

<cfquery name="GetSalaryDetails" datasource="CompanyInfo">
   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>

<html>
<head>
   <title>Employee Salary Details</title>
</head>

<body>

<h1><cfoutput>#GetSalaryDetails.Dept_Name[1]# Department

Salary Details</cfoutput></h1>
<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>
</body>
</html>

Save the page as Salary_details.cfm in myapps under the web root directory.

Reviewing the code

The following table describes the code and its function:

Code	Description
<cfquery name="GetSalaryDetails" datasource="CompanyInfo"> 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>	Get the salary data for the department whose name was passed in the URL parameter string. Sort the data by the employee's last and first names.
<table border cellspacing=0 cellpadding=5> <tr> <th>Employee Name</td> <th>StartDate</td> <th>Salary</td> <th>Contract?</td> </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>	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.

Code

Description

<cfquery name="GetSalaryDetails"
      datasource="CompanyInfo">
   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>

Get the salary data for the department whose name was passed in the URL parameter string. Sort the data by the employee's last and first names.

<table border cellspacing=0 cellpadding=5>
<tr>
   <th>Employee Name</td>
   <th>StartDate</td>
   <th>Salary</td>
   <th>Contract?</td>
</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>

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.

Part 2: making the chart dynamic

Open chartdata.cfm in your editor.

Edit the cfchart tag for the pie chart so it appears as follows:

<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.
Return to your browser and enter the following URL to view chartdata.cfm:
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 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	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 containing the department name of the selected wedge.


Contents > Developing ColdFusion MX Applications > Charting and Graphing Data > Linking charts to URLs > Dynamically linking from a pie chart

Version 6.1

Comments are no longer accepted for ColdFusion MX 6.1. ColdFusion 8 is the current version.