FusionCharts charts can now be directly loaded inside your Flash movies/applications. You don't need to customize any of the charts or tweak them so as to make them load-enabled. In this section, we'll see a few examples of loading FusionCharts charts.
Let's first get to the basics of loading, before we delve into any examples.
loadFusionCharts method is an extension to the base MovieClip object of Flash.
We use this method to load a FusionCharts
chart inside any movie clip instance. You can
create new (empty) movie clips at runtime and then load FusionCharts charts
into them.
This method accepts the following parameters:
strSWFName - Exact path and the name of the .swf file (i.e., chart), which
you want to load
chartStartLevel - Starting depth (level in Flash), from where FusionCharts
will start plotting.
This has been given so that you can adjust the chart below or above certain
elements.
strURL - dataURL - relative or absolute URL of the XML data document or
XML providing data document.
If you wish to use dataXML method to provide data, set this value as null.
strXML - dataXML - Complete XML data as a string.
If you wish to use dataURL method to provide data, set this value as null.
intChartWidth - Intended width of the chart (in pixesl)
intChartHeight - Intended height of the chart (in pixesl)
intChartStartX - Starting x position (w.r.t to global movie i.e., your
movie) of the chart
i.e., left starting position of chart
intChartStartY - Starting y position (w.r.t to global movie i.e., your
movie) of the chart
i.e., top starting position of chart
This method returns nothing.
*/
MovieClip.prototype.loadFusionCharts = function(strSWFName, chartStartLevel,
strURL, strXML, intChartWidth, intChartHeight, intChartStartX, intChartStartY)
{
//If no starting level has been defined for
the chart, we automatically assume it to be 1000.
if (chartStartLevel == undefined || chartStartLevel == null) {
chartStartLevel = 1000;
}
//Now, if dataURL has been specified, we use
dataURL else dataXML
if (strURL != "" && strURL != undefined && strURL
!= null) {
_root.dataURL = strURL;
} else {
//we use strXML (where strXML contains the full
XML data)
_root.dataXML = strXML;
}
//chartWidth & chartHeight specifies the
size of FusionCharts chart
_root.chartWidth = intChartWidth;
_root.chartHeight = intChartHeight;
//Set initial x and y position for the chart
//i.e., (where the chart would start from in
this movie).
_root._FCXShift = intChartStartX;
_root._FCYShift = intChartStartY;
//Set the plot level.
_root._FCLastLevel = chartStartLevel;
//Finally, load the movie
this.loadMovie(strSWFName);
};
So, to load a FusionCharts chart inside your movie, you'll need to do the following:
- Include the above code in your flash movie before you invoke the call to load.
- Create a new movie clip (either at run time or at design time)
- Prepare the XML data document/data document source which FusionCharts would consume
- Invoke the loadFusionCharts function (with the required parameters) for that movie clip.
Let's now quickly see a very basic example of loading a multi-series line chart inside one of our Flash Movies.
We'll load a multi-series line chart inside our Flash movie to represent a count of "International Students". Our movie clip would contain a few local objects like preloader, a relevant background, a few text etc. When our movie is loaded, it would invoke loadFusionCharts method to load the FusionCharts chart.
In this example, we'll prepare an external XML data file and save it as Data.xml under the same folder (where we have our .fla file and the chart .swf file). In the downloads, this folder is named as LoadFC. Data.xml looks as under for this example:
divLineColor='CCCCCC' baseFontColor='13333C' canvasBaseColor='6AB9CC' canvasBgAlpha='50'>
<categories font='Arial Bold' fontSize='10'>
<category name='1980' showName='1'/>
<category name='1981' showName='0'/>
<category name='1982' showName='0'/>
<category name='1983' showName='0'/>
<category name='1984' showName='0'/>
<category name='1985' showName='1'/>
<category name='1986' showName='0'/>
<category name='1987' showName='0'/>
<category name='1988' showName='0'/>
<category name='1989' showName='0'/>
<category name='1990' showName='1'/>
<category name='1991' showName='0'/>
<category name='1992' showName='0'/>
<category name='1993' showName='0'/>
<category name='1994' showName='0'/>
<category name='1995' showName='1'/>
<category name='1996' showName='0'/>
<category name='1997' showName='0'/>
<category name='1998' showName='0'/>
<category name='1999' showName='0'/>
<category name='2000' showName='1'/>
<category name='2001' showName='0'/>
<category name='2002' showName='0'/>
<category name='2003' showName='0'/>
<category name='2004' showName='0'/>
<category name='2005' showName='1'/>
</categories>
<dataset seriesname='University A' color='00ccff' showValues='0' anchorSides='15' anchorBgColor='ffffff' anchorRadius='2'>
<set value='130' />
<set value='126' />
<set value='129' />
<set value='131' />
<set value='134' />
<set value='141' />
<set value='143' />
<set value='137' />
<set value='132' />
<set value='123' />
<set value='134' />
<set value='141' />
<set value='149' />
<set value='146' />
<set value='152' />
<set value='157' />
<set value='149' />
<set value='146' />
<set value='145' />
<set value='142' />
<set value='148' />
<set value='154' />
<set value='159' />
<set value='161' />
<set value='157' />
<set value='156' />
</dataset>
<dataset seriesname='University B' color='ffcc33' showValues='0' anchorBgColor='ffffff' anchorRadius='2' anchorSides='15' >
<set value='67' />
<set value='98' />
<set value='79' />
<set value='73' />
<set value='80' />
<set value='82' />
<set value='81' />
<set value='85' />
<set value='86' />
<set value='89' />
<set value='86' />
<set value='84' />
<set value='81' />
<set value='76' />
<set value='79' />
<set value='81' />
<set value='89' />
<set value='91' />
<set value='94' />
<set value='97' />
<set value='104' />
<set value='112' />
<set value='116' />
<set value='112' />
<set value='119' />
<set value='123' />
</dataset>
</graph>
Let's now create our .fla file BaseMovie.fla. Set the frames per second of this movie to 120 (as all FusionCharts charts have fps of 120 to render smooth animations without distortions).
In this movie, we define two scenes namely, Loading and Chart. Loading scene contains the preloader for this entire movie.
The Chart scene is structured as under:
As you can see above, we've four layers in the movie above:
- LoadFusionCharts Function layer contains the loadFusionCharts method.
- Actions layer contains the local actions and actions responsible for loading the chart in this movie.
- Text and Background layers contain local visual objects like background, text etc.
The code responsible for loading the chart is contained in Actions frame and can be reproduced as under:
createEmptyMovieClip("FusionChartsHolder", 100);
//Load the chart
FusionChartsHolder.loadFusionCharts("FC_2_3_MSLine.swf", 101, "Data.xml", null, 400, 300, 200, 90);
//Stop here
stop();
In the above code, we first create an empty movie clip, where we would load FusionCharts. We name the instance as FusionChartsHolder. Thereafter, we load the multi-series line chart (FC_2_3_MSLine.swf) at a depth of 101 and we specify the XML data document as Data.xml. We've set dataXML to null as we're using dataURL method here. We also set the size of the movie clip to 400x300 pixels and its starting position at 200,90.
When you now export this movie and view it, you'll see the following output:
Note: You can include only one FusionCharts chart in your movie at a time. Suppose you've included the above line chart in your movie and you now want to include a column chart too. However, you won't be able to invoke the call to load the column chart, till this entire line chart has been loaded. So, you'll have to consider the following before loading the second chart:
- The second (or consequent) chart cannot be loaded till the first chart has been completely rendered.
- You should always set different start levels for different charts in the loadFusionCharts function so that two chart elements do not occupy the same level overwriting each other.