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.

This section describes the following topics:

View comments in LiveDocs