Four and Twenty Blackbirds Baked in a Pie Chart

I read a question last week about creating a flash cfchart pie chart with a transparent background. For whatever reason I was convinced this was a simple task, and could have sworn I had done it before. Well it seems I was wrong and must now eat crow.

After checking the trusty webchart3d utility I did find a transparent setting for background color. But it appears to do nothing for png charts. They are always saved as opaque. Eventually, I did find a hack for flash charts (only). But it does require tweaking the output a bit.

First create a custom style file, adding the tranparent background property. The simplest way is to make a copy of C:\ColdFusion8\charting\styles\default_pie.xml. Save it to the same directory as your cfm script as transparent_pie.xml. Then add the transparent background property towards the end, just before the closing </pieChart> tag:

<?xml version="1.0" encoding="UTF-8"?>
<pieChart depth="Double" style="Solid" angle="340" is3D="false">
 ...
 <insets left="5" top="5" right="5" bottom="5"/>
 <background type="Transparent"/>
</pieChart>

Next, use the custom style to generate the cfchart. But capture the output with cfsavecontent so you can manipulate it.

<cfsavecontent variable="chartOutput" >
 <cfchart format="flash" style="transparent_Pie.xml"> 
     <cfchartseries type="pie">
         <cfchartdata item="Yes" value="750">
         <cfchartdata item="No" value="550">
     </cfchartseries>
 </cfchart>
</cfsavecontent>

Finally, use a few string functions to insert the "wmode" setting to make the background of the swf transparent.

<!--- add "wmode" parameter to OBJECT tag --->
<cfset newParam = '<param name="wmode" value="transparent">'>
<cfset newOutput = reReplaceNoCase(chartOutput, "(<OBJECT [^>]+>)", "\1"& newParam, "all")>
<!--- add "wmode" attribute to EMBED tag --->
<cfset newParam = 'wmode="transparent"'>
<cfset newOutput = reReplaceNoCase(newOutput, "(<EMBED [^>]+)", "\1 "& newParam &" ", "all")>

Now the chart's background will be transparent. Definitely a hack. But if anyone knows of a cleaner work-around, I would love to hear it.

<!--- display the chart --->
<div style="background-color: #ff0000;">
 <cfoutput>
     #newOutput#
 </cfoutput>
</div>