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:
$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 empty string
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".
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.
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.
<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>
The following table describes the code and its function:
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>
http://127.0.0.1/myapps/chartdata.cfm
The following table describes the highlighted code and its function:
In the following example, when you click a pie wedge, ColdFusion uses JavaScript to display a pop-up window about the wedge.
<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>
http://127.0.0.1/myapps/chartdata_withJS.cfm