Using FusionCharts v3.0 ActionScript Files in Flex Builder 3.0

[bcrosby]

I am attempting to use the FusionChart v3 AS files within Flex Builder 3.0. However, I am unable to call any of the classes defined in the FC core. Does anyone have any examples of using FC w/in Flex Builder 3?

Thanks.

[dbasix]

You cannot use FusionChart v3 AS files within Flex Builder 3.0 as FusionChart v3 AS files are Actionscript 2 files and Flex Builder uses Actionscript 3 format and also there is ActionScript Virtual Machine(AVM) problem exist. FusionChart swf files runs on AVM1 whereas Flex 3 swf runs on AVM2.

We can use FC in flex in two ways - using Local Connection and FlashInterface (3rd paty API for AVM1 and AVM2 commnication).

1. Using Local Connection:

When you have the codes of FC, you need to add a bit of script in DataLoad scene before the chart object creation:

// LocalConnection object initialization

var flash_flex:LocalConnection = new LocalConnection();

// Exposing the setDataXML and setDataURL method to remote localConnection

// The main setDataXML method did not modified

// Calling that method through JavaScript also possible

flash_flex.setDataXML=function(strXML_flex : String):Void

{

setDataXML(strXML_flex);

}

flash_flex.setDataURL=function(strURL_flex : String):Void

{

setDataURL(strURL_flex);

}

// Exposing the printChart method to remote localConnection

flash_flex.printChart=function():Void

{

chart.printChart();

}

// Exposing the saveAsImage method to remote localConnection

flash_flex.saveAsImage=function():Void

{

chart.saveAsImage();

}

// Making the connection inter-domain

flash_flex.allowDomain("*");

// Unique connection name that remote localConnection can identify

flash_flex.connect("Column3D_connector");

Here the MXML :

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp()">

 <mx:VBox id="v1" paddingTop="5" paddingLeft="5">

<mx:Panel id="p1" title="LINE CHART" width="420">

 <mx:SWFLoader id="chart_1"/>

</mx:Panel>

<mx:Button id="b1" label="call setDataXML" click="call_1()"/>

<mx:Button id="b2" label="call setDataURL" click="call_2()"/>

<mx:Button id="b3" label="Print chart" click="call_3()"/>

<mx:Button id="b4" label="save as Image" click="call_4()"/>

 </mx:VBox>

 <mx:Script>

<![CDATA[

 import flash.external.*;

 import mx.controls.Alert;

 import flash.net.LocalConnection;

 

 // Local connection object declaration

 // This connection used by all loaded chart swf with different connection name

 private var flash_flex:LocalConnection;

 // Demo xml string for dataXML method

 private var dataXML:String="<chart><set label='B' value='12' /><set label='C' value='10' /><set label='D' value='18' /><set label='E' value='21' /></chart>";

 private var dataURL:String="Data_2.xml";  

 // Initialization of connection object and chart loading

 private function initApp():void

 {

flash_flex = new LocalConnection(); 

chart_1.source="Line.swf?chartWidth=400&chartHeight=300&registerWithJS=1";

 }

 // Functions for setDataXML method invokation of loaded chart swf

 // Parameter 1 for uniqe connection name of loaded chart swf

 // Parameter 2 for the method name you are trying to invoke

 // Parameter 3 stands for any parameter value for invoking method

 private function call_1():void

 {

flash_flex.send( "Column3D_connector", "setDataXML", dataXML);

b1.enabled=false;

 }

 private function call_2():void

 {

flash_flex.send( "Column3D_connector", "setDataURL", dataURL);

b2.enabled=false;

 }

 private function call_3():void

 {

flash_flex.send( "Column3D_connector", "printChart");

b3.enabled=false;

 }

 private function call_4():void

 {

flash_flex.send( "Column3D_connector", "saveAsImage");

b4.enabled=false;

 }

]]>

 </mx:Script>

</mx:Application>

You can use multiple charts but remember to give them different connection name in chart file to idenify separately. Like,

// Unique connection name that remote localConnection can identify

flash_flex.connect("Column3D_connector");

or,

flash_flex.connect("Pie3D_conn"); etc.

 

2. Using FlashInterface:

Make a AS class file named chartLoader.as and put it on the same folder where main mxml file exist with FlashInterface API(here folder 'flx'). The content of the file is below,

package

{

 import flash.display.*;

 import flash.events.*;

 import flash.net.URLRequest;

 

 import flx.external.FlashInterface;

 

 public class ChartLoader extends Sprite

 {

private var loader:Loader;

private var chartWidth:Number,chartHeight:Number,Xpos:Number,Ypos:Number;

private var Id:String;

 

public function ChartLoader(url:String,chartwidth:Number,chartheight:Number,xpos:Number,ypos:Number)

{

 Xpos=xpos;

 Ypos=ypos;

 chartWidth=chartwidth;

 chartHeight=chartheight;

 Id=this.name;

 

 loader = new Loader();

 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);

 var urlRequest:URLRequest = new URLRequest(url+"?flashId="+Id+"&chartWidth="+chartWidth+"&chartHeight="+chartHeight);

 loader.load(urlRequest);

 

}

 

private function loaded (e:Event):void

{

 trace("loaded");

 addChild(loader);

 loader.x=Xpos;

 loader.y=Ypos;

 

 dispatchEvent(new Event("chartLoaded")); 

}

 

public function setDataXML(dataxml:String):void

{

 FlashInterface.call(Id+".setDataXML",dataxml);

}

public function setDataURL(dataurl:String):void

{

 FlashInterface.call(Id+".setDataURL",dataurl);

}

public function saveAsImage():void

{

 FlashInterface.call(Id+".chart.saveAsImage");

}

public function printChart():void

{

 FlashInterface.call(Id+".chart.printChart");

}

 }

}

In FusionChart, you need to add a bit of script in DataLoad scene before the chart object creation. Place the FlashInterface API folder(here 'flx_2') where FC as files resides.

// 3rd party API for Flash 8 swf (AVM1) and

// Flash 9 or Flex 2/3 swf (AVM2) communication

import flx_2.external.FlashInterface;

// Allowing this flash 8 swf to communicate with Flash 9 swf

// or Flex 2/3 swf

FlashInterface.publish(this, true);

and here is the mxml file,

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">

 <mx:HBox x="10">

<mx:Button id="A1" label="setDataURL"/>

<mx:Button id="A2" label="setDataXML"/>

<mx:Button id="A3" label="saveAsImage"/>

<mx:Button id="A4" label="printChart"/>

 </mx:HBox>

 <mx:Script>

<![CDATA[

 import ChartLoader;

 import mx.core.UIComponent;

 import mx.controls.Alert;

 import flash.display.*;

 

 private var chart1:ChartLoader;

 private var ui1:UIComponent;

 private var dataXML:String="<chart><set label='A' value='12' /><set label='B' value='10' /><set label='C' value='18' /><set label='D' value='21'

/></chart>";

 

 private function initApp():void

 {

chart1=new ChartLoader("Line.swf",400,300,10,30);

ui1=new UIComponent();

addChild(ui1);

ui1.addChild(chart1);

chart1.addEventListener("chartLoaded",loaded);

addEventListener(MouseEvent.CLICK,func_call);

 }

 private function loaded(e:Event):void

 {

trace(e.target.name+" loaded");

 }

 

 private function func_call(e:MouseEvent):void

 {

switch(e.target.name)

{

 case "A1":

 chart1.setDataURL("Data_2.xml");

 break;

 

 case "A2":

 chart1.setDataXML(dataXML);

 break;

 

 case "A3":

 chart1.saveAsImage();

 break;

 

 case "A4":

 chart1.printChart();

 break;

}

 }

 

]]>

 </mx:Script>

</mx:Application>

You can add multiple chart by creating different chartLoader object by passing chart swf name, width, height, x and y position.

--> [FlashInterface API attached]

[prt212]

Thanks for sharing that code :-)

 

 

 

It works great except I can't control the size of the chart background. I tried chartWidth=400&chartHeight=300 but that didn't work. I'm loading up the AngularGauge.swf.

 

 

 

Anything else I can try to do?

 

 

 

Thanks,

 

Paulo

[Pallav]

Hi,

 

 

 

We're still working on FusionCharts for Flex and it'll be out soon (in beta).

 

 

 

Currently, we

[Pallav]

We've (finally) released the beta of FusionCharts for Flex. You can see it and download from http://www.fusioncharts.com/flex/ . The download contains source code of both our demo applications - Chart Explorer and Mortgage, which can also be seen online at http://www.fusioncharts.com/flex/Demos.asp

 

 

 

Your feedback is VERY important to us and as such please do let us know what you think of this and also if you face any bugs.

[Guest Rajroop]

Hello ,

 

 

 

We are really excited to announce the release of FusionCharts for Flex v1.1 featuring the following:

 

 

 

- 12 new chart types: 7 new gauges including Angular gauge, LED gauge and Linear gauge, Spark chart and Bullet graphs have been added.

 

- All the gauges can fetch data in real-time and come with alert managers and message loggers.

 

- All the charts and gauges can now be natively exported as images and PDFs.

 

- The data for all the charts can be exported as CSV.

 

- Data sets can now have custom text labels instead of numeric values.

 

- The charts can handle a lot more events to help you manipulate them better.

 

- Trendlines can also have custom tool-text.

 

- Custom color palettes can be defined for the data plots.

 

 

 

Learn more about it from www.fusioncharts.com/flex and learn more on whats new from http://www.fusioncharts.com/flex/VersionHistory.asp.

 

 

 

Existing customers can upgrade to the new version from www.fusioncharts.com/PUC.