Embedded CFCHART in Flash Forms Part Deux!
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.
