Monday, July 6, 2009

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>

0 comments:

  © Blogger templates The Professional Template by Ourblogtemplates.com 2008

Header image adapted from atomicjeep