Embedded CFCHART in Flash Forms - Part 3

In my previous posts (Part 1 and Part Two), I talked about how a chart can be embedded in Flash Forms. While it isn’t exactly straight forward, it isn’t too difficult either.

For my last example, I’m going to show how to pass data to your chart so you can change it on the fly. Let’s start with the chart data file, test3.cfm:

<FONT COLOR=MAROON><cfsetting enablecfoutputonly=<FONT COLOR=BLUE>"true"</FONT> showdebugoutput=<FONT COLOR=BLUE>"false"</FONT>></FONT>

<FONT COLOR=MAROON><cfparam name=<FONT COLOR=BLUE>"url.type"</FONT> default=<FONT COLOR=BLUE>"bar"</FONT>></FONT>

<FONT COLOR=MAROON><cfif not listFind(<FONT COLOR=BLUE>"bar,line,pie"</FONT>, url.type)></FONT>
   <FONT COLOR=MAROON><cfset url.type = <FONT COLOR=BLUE>"bar"</FONT>></FONT>
<FONT COLOR=MAROON></cfif></FONT>

<FONT COLOR=MAROON><cfchart name=<FONT COLOR=BLUE>"chartData"</FONT>></FONT>
   <FONT COLOR=MAROON><cfchartseries type=<FONT COLOR=BLUE>"#url.type#"</FONT>></FONT>
      <FONT COLOR=MAROON><cfchartdata item=<FONT COLOR=BLUE>"apples"</FONT> value=<FONT COLOR=BLUE>"#randRange(<FONT COLOR=BLUE>1</FONT>,<FONT COLOR=BLUE>100</FONT>)#"</FONT>></FONT>
      <FONT COLOR=MAROON><cfchartdata item=<FONT COLOR=BLUE>"oranges"</FONT> value=<FONT COLOR=BLUE>"#randRange(<FONT COLOR=BLUE>1</FONT>,<FONT COLOR=BLUE>100</FONT>)#"</FONT>></FONT>
      <FONT COLOR=MAROON><cfchartdata item=<FONT COLOR=BLUE>"pears"</FONT> value=<FONT COLOR=BLUE>"#randRange(<FONT COLOR=BLUE>1</FONT>,<FONT COLOR=BLUE>100</FONT>)#"</FONT>></FONT>
      <FONT COLOR=MAROON><cfchartdata item=<FONT COLOR=BLUE>"jedis"</FONT> value=<FONT COLOR=BLUE>"#randRange(<FONT COLOR=BLUE>1</FONT>,<FONT COLOR=BLUE>100</FONT>)#"</FONT>></FONT>
      <FONT COLOR=MAROON><cfchartdata item=<FONT COLOR=BLUE>"pies"</FONT> value=<FONT COLOR=BLUE>"#randRange(<FONT COLOR=BLUE>1</FONT>,<FONT COLOR=BLUE>100</FONT>)#"</FONT>></FONT>
   <FONT COLOR=MAROON></cfchartseries></FONT>
<FONT COLOR=MAROON></cfchart></FONT>

<FONT COLOR=MAROON><cfcontent type=<FONT COLOR=BLUE>"application/x-shockwave-flash"</FONT> variable=<FONT COLOR=BLUE>"#chartData#"</FONT>></FONT>

The only thing new here, compared to the earlier files, is the use of URL.type. I do some simple validation on the variable, and use it to define the chart type. Now let’s look at the front end:

<FONT COLOR=MAROON><cfform name=<FONT COLOR=BLUE>"test"</FONT> format=<FONT COLOR=BLUE>"flash"</FONT> width=<FONT COLOR=BLUE>"500"</FONT> height=<FONT COLOR=BLUE>"500"</FONT>></FONT>
   
   <FONT COLOR=MAROON><cfselect name=<FONT COLOR=BLUE>"type"</FONT>></FONT>
      <FONT COLOR=NAVY><FONT COLOR=FF8000><option value=<FONT COLOR=BLUE>"bar"</FONT> selected></FONT></FONT>Bar<FONT COLOR=NAVY><FONT COLOR=FF8000></option></FONT></FONT>
      <FONT COLOR=NAVY><FONT COLOR=FF8000><option value=<FONT COLOR=BLUE>"line"</FONT>></FONT></FONT>Line<FONT COLOR=NAVY><FONT COLOR=FF8000></option></FONT></FONT>
      <FONT COLOR=NAVY><FONT COLOR=FF8000><option value=<FONT COLOR=BLUE>"pie"</FONT>></FONT></FONT>Pie<FONT COLOR=NAVY><FONT COLOR=FF8000></option></FONT></FONT>
   <FONT COLOR=MAROON></cfselect></FONT>
      
   <FONT COLOR=MAROON><cftextarea name=<FONT COLOR=BLUE>"chartArea"</FONT> height=<FONT COLOR=BLUE>"300"</FONT>></FONT><FONT COLOR=MAROON></cftextarea></FONT>

   <FONT COLOR=MAROON><cfinput type=<FONT COLOR=BLUE>"button"</FONT> name=<FONT COLOR=BLUE>"submit"</FONT> value=<FONT COLOR=BLUE>"Test Flash"</FONT>
          onClick = <FONT COLOR=BLUE>"_root.chartArea.html=true;_root.chartArea.htmlText
='<FONT COLOR=NAVY><FONT COLOR=PURPLE><img src="</FONT><FONT COLOR=BLUE>"test3.cfm?type=
'+type.getItemAt(type.selectedIndex).data+'&bar=.swf"</FONT><FONT COLOR=BLUE>"/></FONT></FONT></FONT>'+'&nbsp;'"</FONT>>

<FONT COLOR=MAROON></cfform></FONT>

In this version, I’ve added a drop down with the valid chart types. Note how in the onClick for my button, I now pass the value of the selected item to my chart generator. You can see an example of this here. This is a pretty trivial example, but a lot more could be done. You could use radio/checkbox items to select which values should appear on the chart. You could vary the styles of the chart on the fly.

Please forgive the ugly formatting of the code above.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments