In the following example, when you click a pie wedge, ColdFusion uses JavaScript to display a pop-up window about the wedge.
Create a dynamic chart with JavaScript:
- Create an application page with the following content:
<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>
- Save the page as chartdata_withJS.cfm in the myapps directory under the web root directory.
- View the chartdata_withJS.cfm page in your browser:
- Click the slices of the pie chart to display the pop-up window.