ColdFusion provides a data drill-down capability with charts. This means that you can click the data and the 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 on 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:
For example, to let users click on 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 on 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.
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 on a wedge of the pie chart. The department name is passed to this page using the $ITEMLABEL$ variable.
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 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
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. |