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:

<cfsetting enablecfoutputonly="true" showdebugoutput="false">

<cfparam name="url.type" default="bar">

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

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

<cfcontent type="application/x-shockwave-flash" variable="#chartData#">

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:

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

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

</cfform>

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.