Linking charts to URLs



ColdFusion provides a data drill-down capability with charts, which lets you click the data and legend areas of a chart 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, the following code defines a chart that opens the page moreinfo.cfm when a user clicks the chart: 

<cfchart 
    xAxisTitle="Department" 
    yAxisTitle="Salary Average" 
    url="moreinfo.cfm" 
    > 
 
        <cfchartseries  
            seriesLabel="Department Salaries" 
        ... 
        /> 
 
</cfchart>

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

  • $VALUE$: The value of the selected item, or an empty string

  • $ITEMLABEL$: The label of the selected item, or an empty string

  • $SERIESLABEL$: The label of the selected series, or an empty string

For example, to let users click the graph to open the page moreinfo.cfm, and pass all three values to the page, you use the following URL: 

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

The variables are not enclosed in number signs like ordinary ColdFusion variables. They are enclosed in dollar signs. If you click a chart that uses this url attribute value, it 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 department 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 a wedge of the pie chart. The department name is passed to this page using the $ITEMLABEL$ variable.

  1. Create an application page with the following content:

    <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> 
 
<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 the myapps directory under the web root directory.

Reviewing the code

The following table describes the code and its function:

Code

Description

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

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. 

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

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="AvgByDept"  
        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:

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.

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 with JavaScript:

  1. Create an 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.