User Guide

Table Of Contents
758 Chapter 31: Creating Charts and Graphs
Linking charts to URLs
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:
$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 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” on page 761.
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.