Using Open Flash Charts in Flex 3.0

By now Continuum was finding, collating and storing data from various sources like emails, web pages, documents, presentations and spreadsheets. What we needed now was a capability to analyze this information and display it as charts or graphs. This would make Continuum a decision making tool rather than just a traditional DMS. The upper management, who is short on time, likes to see data in colourful, neat charts and graphs rather than long list of numbers.

We looked at a few open source and licensed tools for this. Finally we settled with Open Flash Charts. Its a open source project under GNU/GPL license. It supports line, bar, pie and area charts. To use it, you simply need to include the Open Flash Chart in your HTML, and provide the data file on the server. We got the Open Flash Chart working in HTML but the glitch came when we tried to integrate it with Flex 3.0.

Being new to Flex, our first instinct was to use SWFLoader to load the swf file of Open Flash Chart (OFC). So we used the following code:

<mx:SWFLoader id="ldr" x="36" y="232" source="./open-flash-chart.swf" autoLoad="true" width="734" height="272" complete="initNestedProps(event)"/>

public function loadData():void{
sysMgr.application["width"] = "300";
sysMgr.application["height"] = "300";
sysMgr.application["data"] = "/continuum/chart-data-files/test.txt";
}

public function initNestedProps(event:Event):void{
sysMgr = SystemManager(event.target.content);
}

This throws the classic Error #1034: Type Coercion failed: cannot convert flash.display::AVM1Movie@c223201 to mx.managers.SystemManager.

We realized that OFC is in Flex 2.0 (AS2) which means the display object is AVM1Movie and not a MovieClip as expected by Flex 3.0 (AS3).

Trying to convert the loader.Content to MovieClip fails as well.

The next logically step was to try using Loader class.
So we tried the following code:
var loader:Loader = new Loader();
loader.load(new URLRequest("AS2animation.swf "));
addChild(loader);
This doesn't work either. It gives error for addChild.

After searching the net and digging deeper, we found that the simple solution is to use "this.rawChildren.addChild(loader)" instead of addChild(loader). Apparently when you need to add something to a subclass of UIComponent which doesn't extend a flex display class you need to use rawChildren.addChild.

Finally we have beautiful charts being shown in Flex 3.0 UI.
...OFC and Flex rock!