User Guide Cancel

Linking charts to URLs

Search
ColdFusion

ColdFusion

Open app
  1. ColdFusion Developers Guide
  2. Develop ColdFusion applications
    1. Introducing ColdFusion
      1. Introducing ColdFusion
      2. About ColdFusion
      3. About Internet applications and web application servers
      4. About JEE and the ColdFusion architecture
    2. Changes in ColdFusion
      1. Changes in ColdFusion
      2. Replacement of JRun with Tomcat
      3. Security enhancements
      4. ColdFusion WebSocket
      5. Enhanced Java integration
      6. ColdFusion ORM search for indexing and search
      7. Solr enhancements
      8. Scheduler enhancements
      9. Integration with Microsoft Exchange Server 2010
      10. RESTful Web Services in ColdFusion
      11. Lazy loading across client and server in ColdFusion
      12. Web service enhancements
      13. Displaying geolocation
      14. Client-side charting
      15. Caching enhancements
      16. Server update using ColdFusion Administrator
      17. Secure Profile for ColdFusion Administrator
    3. Introduction to application development
      1. Introduction to application development using ColdFusion
      2. Using the Developing ColdFusion Applications guide
      3. About Adobe ColdFusion documentation for Developers
    4. The CFML programming language
      1. The CFML programming language
      2. Elements of CFML
      3. ColdFusion variables
      4. Expressions and number signs
      5. Arrays and structures
      6. Extend ColdFusion pages with CFML scripting
      7. Regular expressions in functions
      8. ColdFusion language enhancements
      9. Built-in functions as first class citizen
      10. Data types- Developing guide
    5. Building blocks of ColdFusion applications
      1. Building blocks of ColdFusion applications
      2. Create ColdFusion elements
      3. Write and call user-defined functions
      4. Build and use ColdFusion Components
      5. Create and use custom CFML tags
      6. Build custom CFXAPI tags
      7. Use the member functions
      8. Object Oriented Programming in ColdFusion
    6. Develop CFML applications
      1. Develop CFML applications
      2. Design and optimize a ColdFusion application
      3. Handle errors
      4. Use persistent data and locking
      5. Use ColdFusion threads
      6. Secure applications
      7. Client-side CFML (for mobile development)
      8. Use the ColdFusion debugger
      9. Debugging and Troubleshooting Applications
      10. Develop globalized applications
      11. REST enhancements in ColdFusion
      12. Authentication through OAuth
      13. Social enhancements
    7. Develop mobile applications
      1. Mobile application development
      2. Build mobile applications
      3. Debug mobile applications
      4. Inspect mobile applications
      5. Package mobile applications
      6. Troubleshoot mobile applications
      7. Device detection
      8. Client-side CFML
      9. Mobile Templates
      10. Code samples to build a mobile application
    8. Access and use data
      1. Access and use data
      2. Introduction to Databases and SQL
      3. Access and retrieve data
      4. Update database
      5. Use Query of Queries
      6. Manage LDAP directories
      7. Solr search support
    9. ColdFusion ORM
      1. ColdFusion ORM
      2. Introducing ColdFusion ORM
      3. ORM architecture
      4. Configure ORM
      5. Define ORM mapping
      6. Work with objects
      7. ORM session management
      8. Transaction and concurrency
      9. Use HQL queries
      10. Autogenerate database schema
      11. Support for multiple data sources for ORM
      12. ColdFusion ORM search
    10. ColdFusion and HTML5
      1. ColdFusion and HTML 5
      2. Use ColdFusion Web Sockets
      3. Media Player enhancements
      4. Client-side charting
      5. Display geolocation data
    11. Flex and AIR integration in ColdFusion
      1. Flex and AIR integration in ColdFusion
      2. Use the Flash Remoting Service
      3. Use Flash Remoting Update
      4. Offline AIR application support
      5. Proxy ActionScript classes for ColdFusion services
      6. Use LiveCycle Data Services ES assembler
      7. Use server-side ActionScript
    12. Request and present information
      1. Request and present information
      2. Retrieve and format data
      3. Build dynamic forms with cfform tags
      4. Validate data
      5. Create forms in Flash
      6. Create skinnable XML forms
      7. Use Ajax data and development features
      8. Use Ajax User Interface components and features
    13. Office file interoperability
      1. Office file interoperability
      2. Using cfdocument
      3. Using cfpresentation
      4. Using cfspreadsheet
      5. Supported Office conversion formats
      6. SharePoint integration
    14. ColdFusion portlets
      1. ColdFusion portlets
      2. Run a ColdFusion portlet on a JBoss portal server
      3. Run a ColdFusion portlet on a WebSphere portal server
      4. Common methods used in portlet.cfc
      5. ColdFusion portlet components
      6. Support for JSR-286
    15. Work with documents, charts, and reports
      1. Work with documents, charts, and reports
      2. Manipulate PDF forms in ColdFusion
      3. Assemble PDF documents
      4. Create and manipulate ColdFusion images
      5. Create charts and graphs
        1. About charts
        2. Creating a basic chart
        3. Charting data
        4. Controlling chart appearance
        5. Creating charts: examples
        6. Administering charts
        7. Writing a chart to a variable
        8. Linking charts to URLs
        9. Charting enhancements
      6. Create reports and documents for printing
      7. Create reports with Report Builder
        1. About Report Builder
        2. Common reporting tasks and techniques
        3. Creating a simple report
        4. Getting started
      8. Create slide presentations
    16. Use web elements and external objects
      1. Use web elements and external objects
      2. Use XML and WDDX
      3. Use web services
      4. Use ColdFusion web services
      5. Integrate JEE and Java elements in CFML applications
      6. Use Microsoft .NET assemblies
      7. Integrate COM and CORBA objects in CFML applications
    17. Use external resources
      1. Send and receive e-mail
      2. Interact with Microsoft Exchange servers
      3. Interact with remote servers
      4. Manage files on the server
      5. Use event gateways
      6. Create custom event gateways
      7. Use the ColdFusion extensions for Eclipse
      8. Use the data services messaging event gateway
      9. Use the data management event gateway
      10. Use the FMS event gateway
      11. Use the instant messaging event gateways
      12. Use the SMS event gateway

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:

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

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:

    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

 

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.

 

<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 cfcharttag for the pie chart so it appears as follows:

    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:

    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.

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy