Advanced Charting> Setting background .swfs
 
FusionCharts supports the option to embed a background (Flash) movie into your chart. You can use this option to embed background images, interactive backgrounds, data tables etc. as your chart background – the possibilities are limitless. Here, we will delve into the basics of creating charts with background .swfs.

Let’s first define what a background movie is. A background movie is a Flash movie with the same dimensions as that of the chart. It could contain any Flash object – like an animated movie clip, buttons, graphics, interactive data tables etc. Every element placed in this background movie would appear at the same position in the chart, when the background movie is embedded behind the chart, provided the chart and the background movie have the same dimensions. For example, let’s say our chart has the dimensions 565x420 pixels. So, if you now create a skin movie with the same dimension (565x420), place a graphic symbol at the position 100x100, and then embed this skin movie behind the chart, the graphic symbol would appear at 100x100 behind the chart.

To specify a background SWF for the chart, we use the bgSWF attribute of the <graph> element in the following way:
<graph … bgSWF='../path/MyBg.swf' …>

Let's quickly create an example to illustrate this process. We'll create a simple pie chart with a bevelled border background movie (containing a few more items like company logo and details). The end result would look as under:
In the above image, everything apart from the pie chart is contained in the background movie (present as Background.fla under <root> > SampleCode > Advanced > BgSWF folder in the downloads), including the company logo, name, address and email. We export the background movie as Background.swf. Next, we use the following XML to create the pie chart:
<graph bgSWF='Background.swf' chartTopMargin='5' shadowXShift='3' shadowYShift='3' showNames='1' showValues='1' pieborderColor='FFFFFF' pieFillAlpha='95' pieRadius='90' nameTbDistance='12' decimalPrecision='0' numberPrefix='$'>
<set name='Item A' value='4' isSliced='1' />
<set name='Item B' value='5' isSliced='1'/>
<set name='Item C' value='2' isSliced='1'/>
<set name='Item D' value='4' isSliced='1'/>
<set name='Item E' value='5' isSliced='1'/>
<set name='Item F' value='2' isSliced='1'/>
<set name='Item G' value='4' isSliced='1'/>
<set name='Item H' value='5' isSliced='1'/>
<set name='Item I' value='2' isSliced='1'/>
</graph>

In the above code, see (in bold) how we've included this background as a part of the pie chart. And, to embed the pie chart in an HTML page, we use our normal code as under:
<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<TITLE>Background .swf example</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<BR><BR>
<CENTER>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="470" HEIGHT="370" id="FC_2_3_Pie2D" ALIGN="">
<PARAM NAME=movie VALUE="../../Charts/FC_2_3_Pie2D.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=FlashVars Value="&dataURL=data.xml&chartWidth=470&chartHeight=370">
<EMBED src="../../Charts/FC_2_3_Pie2D.swf" FlashVars="&dataURL=data.xml&chartWidth=470&chartHeight=370" quality=high bgcolor=#FFFFFF WIDTH="470" HEIGHT="370" NAME="FC_2_3_Pie2D" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
</CENTER>
</BODY>
</HTML>
Thus, you just saw how easy it is to brand your own charts and give them the look and feel you desire.