Developing ColdFusion MX Applications with CFML Previous Up One Level Next Home Search
Charting and Graphing Data


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: 

<cfchart

  xAxisTitle="Department"
  yAxisTitle="Salary Average"
  url="moreinfo.cfm"
  >

    <cfchartseries 
      seriesLable="Department Salaries"
    ...
    />

</cfchart>

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: 

url="moreinfo.cfm?Series=$SERIESLABEL$&Item=$ITEMLABEL$&Value=$VALUE$"

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: 

http://localhost:8500/tests/charts/moreinfo.cfm?
Series=Department%20Salaries&Item=Training&Value=86000

You can also use JavaScript in the URL to execute client-side scripts. For an example, see "Linking to JavaScript 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:

  1. 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>
  2. 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.

Part 2: making the chart dynamic

  1. Open chartdata.cfm in your editor.
  2. 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>
  3. Save the file.
  4. Return to your browser and enter the following URL to view chartdata.cfm:

    http://127.0.0.1/myapps/chartdata.cfm

  5. 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.

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

  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 myapps under the web root directory.
  3. Return to your browser and enter the following URL to view chartdata_withJS.cfm:

    http://127.0.0.1/myapps/chartdata_withJS.cfm

  4. Click the slices of the pie chart to display the pop-up window.
Copyright © 2002, Macromedia Inc. All rights reserved. Previous Up Next Home Search

Comments