Adobe 38043740 - ColdFusion Standard - Mac Development Manual page 1009

DEVELOPING COLDFUSION 9 APPLICATIONS
Working with Documents, Charts, and Reports
Code
<cfchart name="myChart" format="jpg">
<cffile action="WRITE"
file="c:\inetpub\wwwroot\charts\vehicle.jpg"
output="#myChart#">
<img src="/charts/vehicle.jpg" height=240
width=320>
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 attribute of the cfchart tag to specify the URL to open when a user clicks anywhere on the chart. For
url
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
•
: The value of the selected item, or an empty string
$VALUE$
•
: The label of the selected item, or an empty string
$ITEMLABEL$
• : The label of the selected series, or an empty string
$SERIESLABEL$
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
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
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.
Description
Define a chart written to the
format.
Use the cffile tag to write the chart to a file.
Use the HTML
attribute to pass additional information to the target page:
url
attribute value, it could generate a URL in the following form:
url
Last updated 1/20/2012
variable by using the JPEG
myChart
tag to display the chart.
img
"Linking to JavaScript from
1004