ColdFusion MX : Linking charts to URLs

ColdFusion provides a data drill-down capability with charts. This means you can click on an area of a chart, both the data and the legend areas, to request a URL. For example, if you have a pie chart and want a user to be able to select a pie wedge for more information, you can build that functionality into your chart.

You use the url attribute of the cfchart tag to specify the URL to open when a user clicks anywhere on the chart. For example, define a chart that opens the page moreinfo.cfm when a user clicks on the chart using the following code:

You can use the following variables in the url attribute to pass additional information to the target page:

For example, to let users click on the graph to open the page moreinfo.cfm, and pass all three values to the page, you code the url attribute as follows:

The variables are not enclosed in # signs like ordinary ColdFusion variables. They are enclosed in dollar signs. Clicking on a chart that uses this url attribute value could generate a URL in the following form:

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:

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

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.

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

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

Comments

BioInfo said on Jan 30, 2004 at 3:27 PM :

It would be nice to be able to use ColdFusion expressions to format the $ItemLable$ value or convert it into a ColdFusion variable. I am trying to use #URLEncodedFormat($ItemLabel$)# and getting errors. I have not found a workaround to this problem.

halL said on Feb 2, 2004 at 7:53 AM :

We have logged an enhancement request (54105) for this feature.

Pharoah said on Jul 9, 2004 at 7:03 AM :

Why has there been no thought to being able to have the marker styl for a series be reflected in the legend for the graph. I have graphs online that are useless to users when printed out in black and white because they cannot distinguish between the dataseries.

halL said on Jul 9, 2004 at 3:16 PM :

Macromedia is planning significant enhancements to charting for the next major release of ColdFusion MX. We have considered the comments on this page in doing this planning.

Entropy said on Sep 1, 2004 at 1:58 PM :

It would also be handy to pass an ID field in with the series that was not the label so that the URL could use a primary key for the thing clicked on

extdw_doc said on Sep 2, 2004 at 10:51 AM :

Thanks. We'll add that to the list of considerations.

Current page: http://livedocs.adobe.com/coldfusion/6/Developing_ColdFusion_MX_Applications_with_CFML/graphing6.htm

Developing ColdFusion MX Applications with CFML
Charting and Graphing Data