Linking Charts to URLs | ColdFusion MX Professional Projects

If you're aware of HTML, you must have learned about the imagemaps. ColdFusion provides a similar facility. You can click on any area of the image to request a URL. For example, if you want the user to have more information about the chart legend, he can click on the legend to open the information page. You can pass value, itemlabel, and serieslabel variables to the target page with the url attribute of the <cfchart> tag.

Caution

Surround these variables with the dollar sign, instead of the usual pound sign used for ColdFusion variables, for the correct results.

Here's the syntax to create a link from a chart area:

 <CFCHART ATTRIBUTES . . URL="Information.cfm?series=$serieslabel$&value=$value$"> <CFCHARTSERIES      ATTRIBUTES....> </CFCHARTSERIES> . . . </CFCHART>

Linking from a Pie Chart

When you click on a wedge of a pie chart in the following example, it takes you to the information page URL. The following code creates the information page:

 <!--- information.cfm template ---> <HTML> <HEAD> <TITLE>Pie chart details</TITLE> </HEAD> <BODY>     <H2>Details of the Pie Chart</H2>     The pie chart here shows the department wise salary percentage.     The maximum salary is distributed to the marketing department. </BODY> </HTML>

Here's the code to create the dynamic pie chart page:

 <!--- piechart.cfm template ---> <HTML> <HEAD> <TITLE>Dynamic Pie Chart - example</TITLE> </HEAD> <BODY> <H2>Dynamic Pie Chart</H2> <CFCHART SHOW3D="yes"         URL="c:\CfusionMX\wwwroot\errorsandexceptions\information.cfm">      <CFCHARTSERIES TYPE="Pie" COLORLIST="red,blue,yellow,green">        <CFCHARTDATA ITEM="Production" VALUE="600000">        <CFCHARTDATA ITEM="Admin" VALUE="420000">        <CFCHARTDATA ITEM="Accounts" VALUE="570000">        <CFCHARTDATA ITEM="Marketing" VALUE="810000">     </CFCHARTSERIES> </CFCHART> </BODY> </HTML>

Figure 26.12 shows the dynamic pie chart.

click to expand
Figure 26.12: Dynamic pie chart.

Linking to JavaScript from a Pie Chart

Let's take another look at the example discussed in the preceding section. You can display the same information through JavaScript. Here's the code to use JavaScript to display the information in a pop-up window:

 <! --- piechart_js.cfm template ---> <SCRIPT LANGUAGE="javascript"> function Chart_OnClick() { alert("Dynamic pie chart showing department wise salary comparisons"); } </SCRIPT> <HTML> <HEAD> <TITLE>Dynamic pie chart with JavaScript - example</TITLE> </HEAD> <BODY> <H2>Dynamic Pie Chart with JavaScript</H2> <CFCHART SHOW3D="yes"           URL="javascript:Chart_OnClick();">      <CFCHARTSERIES TYPE="Pie" COLORLIST="red,blue,yellow,green">        <CFCHARTDATA ITEM="Production" VALUE="600000">        <CFCHARTDATA ITEM="Admin" VALUE="420000">        <CFCHARTDATA ITEM="Accounts" VALUE="570000">        <CFCHARTDATA ITEM="Marketing" VALUE="810000">      </CFCHARTSERIES> </CFCHART> </BODY> </HTML>