You can make Flash-format bar and pie charts interactive so that ColdFusion displays a new data point-specific Web page when the user clicks a bar or pie wedge. ColdFusion provides two methods for specifying the destination page:
cfgraph
URL
attribute, appends the value of the query column specified by the URLColumn
attribute, and sends the resulting Web request.
URL
attribute as the page to link to.Using ColdFusion you can combine a static URL component with a query column component. This lets you link dynamically based on query column data without having to format the column contents as a URL. For example, you can use the values of the Dept_Name field in the CompanyInfo database to determine the data to display. To do this, follow these guidelines:
cfgraph
tag, specify a single Web page in the URL
attribute.
URL
attribute, include the name of a parameter, but not its value, in the form ParameterName=
URLColumn
attribute, specify a query column that contains the value of the parameter being passed.The example code in the following procedure illustrates this technique.
In the following example, when you click a pie wedge, ColdFusion displays a table containing 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 graph dynamic.
This page displays the drill-down information on the selected department based on the department name passed as the URL parameter.
<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.Dept_Name#' 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</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> </body> </html>
The following table describes the code and its function:
cfgraph
tag for the pie chart so it appears as follows:<cfgraph type="pie" query="DeptSalaries" valueColumn="SumByDept" itemColumn="Dept_Name" URL="Salary_Details.cfm?Dept_Name=" URLColumn="Dept_Name" title="Total Salaries by Department" titleFont="Times" showValueLabel="rollover" valueLabelFont="Times" backgroundColor = "##CCFFFF" borderWidth = 0 colorlist="##6666FF,##66FF66,##FF6666,##66CCCC" LegendFont="Times"> </cfgraph>
http://127.0.0.1/myapps/graphdata.cfm. Click the slices of the pie chart.
The following table describes the highlighted code and its function: