In my previous post, I talked about how you can embed a Flash chart inside a Flash-based CFFORM. I used a textarea, set it’s HTML property and pointed it at a Flash chart I had previously saved. This works fine, but it requires you to save the SWF before you can use it. Let’s make things a bit simpler and try to get rid of the file completely. As I mentioned in the previous post, it is possible to get the binary data from cfchart saved into a variable. In theory, we could just use cfcontent to serve up the chart. Consider this code:
<cfchart name="chartData">
<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>
<cfcontent type="application/x-shockwave-flash">#chartdata#
Everything looks fine and dandy, right? However, when I viewed this file in my browser, it didn’t load. Flash data was there, I could right click and see the normal right menu options for Flash, but the movie didn’t load correctly. What I didn’t realize was that for binary data, you need to use the variable attribute for cfcontent. Here is the modified version:
<cfchart name="chartData">
<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>
<cfcontent type="application/x-shockwave-flash" variable="#chartData#">
Running this version in my browser made the chart show up perfectly. So far, so good. Now let’s modify the earlier example we had so it loads my new dynamic chart.
<cftextarea name="chartArea" width="400" height="400"></cftextarea>
<cfset onClick = "_root.chartArea.html=true;_root.chartArea.htmlText='<img src=""test_b_data.cfm?""/>'+' '">
<cfinput type="button" name="submit" value="Test Flash"
onClick="#onClick#">
</cfform>
I won’t spend a lot of time on this since it the same code as before. The only difference is that I moved the onClick code into a variable so it is a bit easier to read. Also note that my image source is poinging to test_b_data.cfm, the file I created above.
When I run this, and click the button – nothing happens though. This one confused me for a while until Nimer suggested a trick. I added ?bar=.swf to the URL for the image – and it worked fine. Turns out – Flash must be doing some validation on the HTML. It sees an image source tag – and it sees a non-image extension – and it ignores the HTML. By adding bar=.swf to the URL, it is enough for Flash to be tricked. Here is the final version:
<cftextarea name="chartArea" width="400" height="400"></cftextarea>
<cfset onClick = "_root.chartArea.html=true;_root.chartArea.htmlText='<img src=""test_b_data.cfm?bar=.swf""/>'+' '">
<cfinput type="button" name="submit" value="Test Flash"
onClick="#onClick#">
</cfform>
Lastly, here is a screen shot. The cool thing is that you can click the button and the chart redraws. My next post will show a cooler example of this.

Archived Comments
Hoooray! What will you do in your next post, Leap tall buildings in a single bound?
Heh, thanks. I do have a cool demo planned.
At first I thought you were just trying to insert a chart into a flash form. Since the chart will re-draw on click, does that mean you are doing an AJAX ala Flash thing?
No Ajax at all. All that happens is you tell the text field to switch it's source to an image, and in this case the image is a Flash file. It would be no different than using JS to switch the source of an image- like you do for roll overs.
I'm having a problem displaying this chart correctly
Version 1 appears fine but with 2 and 3 I get the
chart filling the whole screen and no button
I put chartheight and chartwidth values also to no avail
Anyone else getting same prob?
You may have your file names messed up. The file with the cfform in it is what you want to open with your browser.
It is all one file. I just cut, pasted and combined your second and fourth code sections from the blog
Ah, no, sorry. There are 2 files involved here. One is the main display. If you use the last code sample in this entry, you will be fine. The other file is the file that 'serves' the Flash chart, this must be named test_b_data.cfm. That would be the secodn code sample in the doc, the one with the cfchart tags.
It is all one file. I just cut, pasted and combined your second and fourth code sections from the blog
Sorry about the double post
OK I follow that now and it works fine. Thanks
Still struggling with part trois though
Here again there are two files right. test3.cfm with the chart info and the calling one e.g. chartTest3.cfm with the form
chartTest3.cfm just produces a blank screen when i try it - no library loading etc.
Try hitting test3.cfm - if you don't see the chart, something went wrong.
Sorry about the double post
OK I follow that now and it works fine. Thanks
Still struggling with part trois though
Here again there are two files right. test3.cfm with the chart info and the calling one e.g. chartTest3.cfm with the form
chartTest3.cfm just produces a blank screen when i try it - no library loading etc.
OK figured it out
I needed to ensure the onclick info was all in one line
This is a great post but...
I have it working fine but when I change data in the chart file it will not show when I click the re-draw button. If I refresh the entire form then it will show the changes. Any sugestions?
It could be a few things. Are you sure you are passing the var to the embedded cfm? You may want to cflog to confirm. It may be caching on your web server. You could add a random variable to the call, see AS docs for working w/ random #s.
Hey, I am wondering if it is possible to load the chart when the flash form loads.??? Thanks