Extending your Charts > Creating Skinned Charts
 
FusionCharts supports the option to embed a background movie into the chart movie. You can use this option to embed background images into chart, create interactive backgrounds, embed data tables etc – the possibilities are limitless. Here, we will delve into the basics of creating skinned charts.

Let’s first define what a skin movie is. A skin 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 skin movie would appear at the same position in the chart, when the skin movie is embedded behind the chart, provided the chart and the skin movie have the same dimensions. For example, let’s say our chart has the normal 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 skin/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 get kicking and first of all create a simple back-drop for our chart. Launch Macromedia Flash MX and then open the skin template (SkinTemplate.fla) provided in the folder Source with the download. Here, you’ll get a screen as under – a guide layer contains an image of a chart depicting which elements of the chart are present at which co-ordinates. You can use this guide back-drop as a positional estimate for your own graphical elements.
Now, we have to place our own graphic symbols above this layer. So, create a new layer – MyGraphics and import the graphic that you want to have as the back drop.

Now, export this movie as MySkin.swf.

Now, create an HTML file to wrap a Column Chart and the XML data file for the chart. Make sure that you add the bgSWF="MySkin.swf" to the <graph> element. After everything is done, you’ll get the following output:
So you just saw how easy FusionCharts makes it for you to embed background stuff to your charts.