|
|
Charts Overview
A "FusionChart" is any implementation of the Flash based charting technology from www.infosoftglobal.com. The charts are instantiated using the javascript technology "SWFObject", and the parameters are passed in via XML.
Rules:
The charts must be able to run with a "one version old" Flash browser plug-in. For example: if Macromedia has release version 10, we must be able to run in version 9.
Implementation:
To make the implementation of a chart as simple as possible, it is broken down into steps.
- Include the swfobject javascript file so it is loaded before the call for the chart.
For Example: <script src="scripts/swfobject.js"></script>
- Determine the appropriate chart to be displayed and match it to it's compiled swf file name.
- Create the div tag that the fusion chart is to display in. You must remember that the code for the chart is INSERTED into the div tag upon page render. You don't insert it there in your html. Remember: the id for this div element must be unique.
- Determine the exact height and width for your chart. You must know this in advance, as you must declare it in the object call and the javascript call.
- Build the XML to be used in the chart. The XML for every chart is different depending on the type of chart. See www.infosoftglobal.com for details. However, here is an example for a Pie chart.... it is the simplest.
<graph bgColor='FFFFFF' baseFontSize='10' formatNumberScale='0' decimalPrecision='1' showPercentageValues='1' showNames='0' numberPrefix='' showValues='0' showPercentageInLabel='1' pieYScale='45' pieBorderAlpha='40' pieFillAlpha='70' pieSliceDepth='15' pieRadius='125'>
<set value='1315.73' name='American Funds Growth Fund of America-R4: 1315.73'/>
<set value='2415.28' name='CRM Mid Cap Value-Inv: 2415.28'/>
<set value='6124.36' name='American Beacon Small Cp Value-Plan: 6124.36'/>
</graph>
- Insert the javascript to insert the chart object. Here is where it all comes together. Note that the id for the flash object must match the id of the div tag you created for the location of the chart. Also note that the height and width elements are built into the object call.
<!-- HERE IS WHERE YOU INCLUDE THE JAVASCRIPT FILE -->
<script src="scripts/swfobject.js"></script>
<!-- HERE IS THE DIV TAG THAT WILL HAVE IT'S CONTENTS OVERWRITTEN WITH THE FLASH OBJECT-->
<div id="flashcontent">
<strong>You need to upgrade your Flash Player to version 8</strong>
</div>
<!-- HERE IS THE JAVASCRIPT THAT ACTUALLY INSERTS THE FLASH OBJECT -->
<!-- NOTE THE COLOR CODED TEXT FOR VARIABLES THAT MUST MATCH-->
<script type="text/javascript">
// <![CDATA[
var chartDataString = "&dataXML=<graph bgColor='FFFFFF' baseFontSize='10' formatNumberScale='0' decimalPrecision='1' showPercentageValues='1' showNames='0' numberPrefix='' showValues='0' showPercentageInLabel='1' pieYScale='45' pieBorderAlpha='40' pieFillAlpha='70' pieSliceDepth='15' pieRadius='125'><set value='1315.73' name='American Funds Growth Fund of America-R4: 1315.73'/><set value='2415.28' name='CRM Mid Cap Value-Inv: 2415.28'/><set value='6124.36' name='American Beacon Small Cp Value-Plan: 6124.36'/></graph>";
var so = new SWFObject("Chartsv3/Pie3D.swf", "Pie3D", "549", "175", "8", "#FFFFFF");
so.addVariable("FlashVars", chartDataString); // this is where the xml variable is passed in
so.write("flashcontent");
// ]]>
</script>