
1004
DEVELOPING
COLDFUSION 9 APPLICATIONS
Working with Documents, Charts, and Reports
Las
t
upda
te
d 8/5/2010
Linking charts to URLs
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:
<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 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
” on page 1007.
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.
Code
Description
<cfchart name="myChart" format="jpg">
Define a chart written to the
myChart
variable by using the JPEG
format.
<cffile action="WRITE"
file="c:\inetpub\wwwroot\charts\vehicle.jpg"
output="#myChart#">
Use the cffile tag to write the chart to a file.
<img src="/charts/vehicle.jpg" height=240
width=320>
Use the HTML
img
tag to display the chart.