Linking to JavaScript from a pie chart

In the following example, when you click a pie wedge, ColdFusion uses JavaScript to display a pop-up window about the wedge.

To create a dynamic chart using JavaScript:

1. Create a new 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>
   

2. Save the page as chartdata_withJS.cfm in the myapps directory under the web root directory.
3. View the chartdata_withJS.cfm page in your browser:
4. Click the slices of the pie chart to display the pop-up window.

View comments in LiveDocs