Sign in to follow this  
bcrosby

Using FusionCharts v3.0 ActionScript Files in Flex Builder 3.0

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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]

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
Guest Rajroop

Hello B),

 

 

 

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this