Adobe ColdFusion 8

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.

Create a dynamic chart with JavaScript:

  1. 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>

  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.