One question often is if you can embed a CFCHART inside a CFFORM Flash Form. The short answer is no. However, various people have gotten it working. After seeing a wonderful demo of this at CFUNITED, I decided to look into it a bit more. I spoke with Amit, the developer who showed off the impressive Flash Form demo during one of the keynotes. He told me how he was embedding CFCHART and gave me the ideas I needed to push it further.

Let’s start simple with the code that Amit showed me. You start off by adding a text area to your flash form:

<cftextarea name="chartArea"></cftextarea>

This is where the CFCHART will pop up. Next we need a way to load the chart. I’m going to tie the chart load to a button.

<cfinput type="button" name="submit" value="Test Flash"
onClick = "_root.chartArea.html=true;_root.chartArea.htmlText='<img src=""test.swf""/>&nbsp;'">

What is going on here? First we define a button and add a onClick attribute. We set the HTML property of the text area to true. Next we simply set the HTML value of the text area. We use the IMG tag and point it to a SWF. I didn’t even know that was possible, but it works just fine.

What’s the deal with the non-breaking space at the end? For the life of me I couldn’t get the image to render without some text as well. I spoke with a few people and they said this may be due to the fact that Flash doesn’t know what size the image is. Setting the height and width didn’t help any – but I didn’t explore it further. For now though – adding a simple character to the HTML works fine.

So where does test.swf come from? When you use CFCHART with the NAME attribute, it takes the binary output of the Flash chart and stores it in the variable specified by the NAME value. You can then save that data using CFFILE.

Let’s look at a complete example:

<cfchart name="data" chartwidth="350" chartheight="350">
   <cfchartseries type="bar">
      <cfchartdata item="apples" value="#randRange(1,100)#">
      <cfchartdata item="oranges" value="#randRange(1,100)#">
      <cfchartdata item="pears" value="#randRange(1,100)#">
   </cfchartseries>
</cfchart>

<cffile action="write" file="#expandPath("./test.swf")#" output="#data#">

<cfform name="test" format="flash">
      
   <cftextarea name="chartArea" width="400" height="400"></cftextarea>

   <cfinput type="button" name="submit" value="Test Flash"
onClick = "_root.chartArea.html=true;_root.chartArea.htmlText='<img src=""test.swf?""/>'+
'&nbsp;'">

</cfform>

Nice and easy, right? In my next blog entry, I’ll show you how you can get rid of the file and dynamically change the chart based on values in your Flash Form.