dbasix

Using FC in Your Flex APP

By dbasix, in General usage

Recommended Posts

krisni   

krisni
Posted

I have found a article below,but I don't try it successful,some code below is wrong.Could anyone try it and post the right code,or other better method that embed fusioncharts in flex app?

I want to use flex to get data from webservice and send the data to fusioncharts,what can i do?

load a swf from outside and call its function

Lets suppose you have a swf(Column3D.swf) and you don't have code(FLA) for it but you need to call its function(setDataXML) from Flex and need to send parameters.

How it can be done through JAVASCRIPT

<HTML>

 

<HEAD>

 

<TITLE>FusionCharts & JavaScript - Updating chart using setDataXML() Method</TITLE>

 

<SCRIPT LANGUAGE=

Share this post

Link to post
Share on other sites

dbasix   

dbasix
Posted (edited)

Hi,

Here is the flex code (.mxml) where you can send XML and other data to wrapper swf file which holds the Chart swf file. You need to change the chart code a 'bit. It is also possible to send data through javascript, without changing the code of chart files. That will be posted shortly.

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

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

 <mx:SWFLoader source="container.swf" id="l1" scaleContent="true" creationComplete="put_Size()"/>

 

 <mx:Script>

<![CDATA[

 import mx.controls.Alert;

 import flash.net.LocalConnection;

 

 private var flash_flex:LocalConnection;

 // Chart Height-Width initialization

 private var chartWidth:Number=400;

 private var chartHeight:Number=300;

 // Chart data (xml) as string

 private var strXML:String="<chart><set label='Jan' value='17400' /><set label='Feb' value='10000' /><set label='Mar' value='21800' /><set label='Apr' value='23800' /></chart>";  

 

 private function initApp() : void

 {

flash_flex = new LocalConnection(); 

 } 

 

 private function put_Size():void

 {

flash_flex.send( "flex_connector", "set_Size", chartWidth, chartHeight, strXML);

 }

]]>

 </mx:Script>

</mx:Application>

 

Here is the code for wrapper flash file :

//variable declaration

var chartWidth:Number;

var chartHeight:Number;

var strXML:String;

//local Connection with flex

var flash_flex:LocalConnection = new LocalConnection();

flash_flex.set_Size = function(_chartWidth:Number, _chartHeight:Number, flexXML:String):Void

{

 chartWidth=_chartWidth;

 chartHeight=_chartHeight;

 strXML=flexXML;

 //load chart swf

 mc.loadMovie("Line.swf");

 //close local connection

 flash_flex.close();

}

//here connection can be made inter-domain

flash_flex.allowDomain("*");

flash_flex.connect("flex_connector");

 

Change in dataLoad scene of core chart file :

import mx.utils.Delegate;

import flash.external.ExternalInterface;

import com.fusioncharts.helper.Logger;

import com.fusioncharts.core.charts.Line2DChart;

//Include the data loading functions

#include "com/fusioncharts/includes/DataFunctions.as"

//Create an instance of relevant Chart class

//in depth 3 as (1,2) are reserved for loading/data loading

//text field and progress bar.

var chart:Line2DChart = new Line2DChart(this, 3, _chartWidth, _chartHeight, 0, 0, _debugMode, _lang, _scaleMode);

//Register the chart with external interface

#include "com/fusioncharts/includes/ExternalInterface.as"

//Load the data now.

//XML Object to hold data and data passed to it from Flex

var xmlData:XML = new XML(_root.strXML);

chart.setXMLData(xmlData);

var mcProgressBar:MovieClip;

//Movie clip to hold text field

var tf:TextField;

chart.render();

//Stop here till the data functions invoke actions

stop();

Edited by Guest

Share this post

Link to post
Share on other sites

krisni   

krisni
Posted

//variable declaration

var chartWidth:Number;

var chartHeight:Number;

var strXML:String;

//local Connection with flex

var flash_flex:LocalConnection = new LocalConnection();

flash_flex.set_Size = function(_chartWidth:Number, _chartHeight:Number, flexXML:String)

{

 chartWidth=_chartWidth;

 chartHeight=_chartHeight;

 strXML=flexXML;  //How can I send this xml data to Line.swf?

 //load chart swf

 mc.loadMovie("Line.swf");

 //close local connection

 flash_flex.close();

}

//here connection can be made inter-domain

flash_flex.allowDomain("*");

flash_flex.connect("flex_connector");

Share this post

Link to post
Share on other sites

dbasix   

dbasix
Posted

1. If you are using only one chart in your flex application, load the chart(Line.swf) in SWFLoader and do the following within flex:

mySWFLoader.source=

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

While attaching the flex(.swf) file with html, assign a id / name to the swf in object / embed tag.

Attach "FusionCharts.js" file in html, like:

<SCRIPT LANGUAGE="Javascript" SRC="../script/FusionCharts.js"></SCRIPT>

CAll setDataXML() or setDAtaURL() method and pass the values. suppose you have assigned the id/name of flex swf as chart_1.then,

chart_1.setDataXML("<chart><set label='B' value='12' /><set label='C' value='10' /><set label='D' value='18' /><set label='E' value='21' /></chart>"); or,

chart_1.setDataURL("../data/Data.xml"); 

 

2. If you are using multiple charts within single flex application, load them in separate SWFLoader and do the followings:

<mx:Script>

<![CDATA[

 import flash.external.*;

 import mx.controls.Alert;

 import flash.net.LocalConnection;

 

 private var flash_flex:LocalConnection;

 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 function initApp():void

 {

flash_flex = new LocalConnection(); 

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

chart_2.source="Column3D.swf?chartWidth=400&chartHeight=300";

chart_3.source="Pie2D.swf?chartWidth=400&chartHeight=300";

 }

 private function call_1():void

 {

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

b1.enabled=false;

 }

 private function call_2():void

 {

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

b2.enabled=false;

 }

 private function call_3():void

 {

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

b3.enabled=false;

 }

]]>

 </mx:Script>

Change a lil'bit in chart(.fla) code also in DataLoad scene,

import mx.utils.Delegate;

import flash.external.ExternalInterface;

import com.fusioncharts.helper.Logger;

import com.fusioncharts.core.charts.Line2DChart;

//Include the data loading functions

#include "com/fusioncharts/includes/DataFunctions.as"

//---------------Code for LocalConnection----------------

var flash_flex:LocalConnection = new LocalConnection();

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

{

setDataXML(strXML_flex);

}

flash_flex.allowDomain("*");

flash_flex.connect("Line_connector");

//-------------------------------------------------------

//Create an instance of relevant Chart class

//in depth 3 as (1,2) are reserved for loading/data loading

//text field and progress bar.

var chart:Line2DChart = new Line2DChart(this, 3, _chartWidth, _chartHeight, 0, 0, _debugMode, _lang, _scaleMode, _registerWithJS, _DOMId);

//Register the chart with external interface

#include "com/fusioncharts/includes/ExternalInterface.as"

//Load the data now.

//XML Object to hold data

var xmlData:XML = new XML();

//Movie clip to hold progress bar

var mcProgressBar:MovieClip;

//Movie clip to hold text field

var tf:TextField;

//Load the data now.

loadData();

//Stop here till the data functions invoke actions

stop();

If you dont have the code of chart file, use a wrapper .swf file, put the bold faced "localConnection code" and load the chart swf in wrapper. e.g.

mc.loadMovie("Line.swf");

var flash_flex:LocalConnection = new LocalConnection();

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

{

mc.setDataXML(strXML_flex);

}

flash_flex.allowDomain("*");

flash_flex.connect("Line_connector");

 

 

3. NExt thing you can use is FlashInterface. Its a third party API for Flash 8 swf and Flex 2/3 communication. here our flex code:

<mx:Script>

<![CDATA[

import flash.external.*;

import mx.controls.Alert;

import flx.external.FlashInterface;

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 function initApp():void

{

chart_1.source=

"Line.swf?flashId=flash_1&chartWidth=400&chartHeight=300";

chart_2.source=

"Column3D.swf?flashId=flash_2&chartWidth=400&chartHeight=300";

chart_3.source=

"Pie2D.swf?flashId=flash_3&chartWidth=400&chartHeight=300";

}

private function call_1():void

{

FlashInterface.call(

"flash_1.setDataXML",dataXML);

b1.enabled=

false;

}

private function call_2():void

{

FlashInterface.call(

"flash_2.setDataXML",dataXML);

b2.enabled=

false;

}

private function call_3():void

{

FlashInterface.call(

"flash_3.setDataXML",dataXML);

b3.enabled=

false;

}

]]>

</mx:Script>

 

And here is the updated code for chart(.fla) file in DataLoad scene:

import mx.utils.Delegate;

import flash.external.ExternalInterface;

import com.fusioncharts.helper.Logger;

import com.fusioncharts.core.charts.Line2DChart;

//Include the data loading functions

#include "com/fusioncharts/includes/DataFunctions.as"

//---------------Code for FlashInterface----------------

import flx_2.external.FlashInterface;

FlashInterface.publish(this, true);

//-------------------------------------------------------

//Create an instance of relevant Chart class

//in depth 3 as (1,2) are reserved for loading/data loading

//text field and progress bar.

var chart:Line2DChart = new Line2DChart(this, 3, _chartWidth, _chartHeight, 0, 0, _debugMode, _lang, _scaleMode, _registerWithJS, _DOMId);

//Register the chart with external interface

#include "com/fusioncharts/includes/ExternalInterface.as"

//Load the data now.

//XML Object to hold data

var xmlData:XML = new XML();

//Movie clip to hold progress bar

var mcProgressBar:MovieClip;

//Movie clip to hold text field

var tf:TextField;

//Load the data now.

loadData();

//Stop here till the data functions invoke actions

stop();

Share this post

Link to post
Share on other sites

Sjoerd   

Sjoerd
Posted (edited)

Hi There,

Im trying to achieve the same, but i cant get it to work. Think it has to do something with my wrapper file.

I use this as my function:

//variable declaration

var chartWidth:Number;

var chartHeight:Number;

var strXML:String;

//load chart swf

mc.loadMovie("Line.swf");

//local Connection with flex

var flash_flex:LocalConnection = new LocalConnection();

//here connection can be made inter-domain

flash_flex.allowDomain("*");

flash_flex.connect("flex_connector");

flash_flex.set_Size = function(_chartWidth:Number, _chartHeight:Number, flexXML:String):Void 

{

alert("tes1t");

chartWidth = _chartWidth;

chartHeight = _chartHeight;

strXML = flexXML;

alert("test2");

};

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

{

alert("Start testdata");

strXML = strXML_flex;

mc.setDataXML(strXML_flex);

 alert("Einde testdata");

};

But i'm not sure where to add this, here's what i did:

In flash:

- choose to create a new flash file with AS2.0

- ctrl + f8 to insert a new symbol

- Choose for movieclip and use name "mc"

- Right click on the timeframe and choose for "handelingen" ( its the lowest option, handelingen is a dutch word and yes stupid me installed the dutch version )

- A code like editor comes up, i pasted the code above on it and close it.

- Export this to an SWF file and i called it WRAPPER.swf

Here's my Flex app:

private var lc:LocalConnection;

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>";

public var myXML:String="<chart><set label='A' value='10' /><set label='B' value='11' /></chart>";

// Create the LocalConnections when the application initializes. This isn't

// necessary to do here, you just need to create them before you use them.

private function initApp() : void

{

lc =

new LocalConnection();

lc.send(

"flex_connector","setDataXML","Line.swf", dataXML);

//lc.send("lc_name", "methodToExecute","Column3D.swf",myXML);

}

 

This is the error:

Error #2044: Unhandled StatusEvent:. level=error, code=

Any help will be appreciated

Edited by Guest

Share this post

Link to post
Share on other sites

Pallav   

Pallav
Posted

Just to update:

 

 

 

We're working on a Flex version of FusionCharts v3 itself where FusionCharts SWF can be loaded inside your Flex containers and methods can be invoked. We intend to release it a couple of weeks - the prototypes have been successful till now.

Share this post

Link to post
Share on other sites

Pallav   

Pallav
Posted

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

Sanket N   

Sanket N
Posted

FusionCharts for Flex v1 has been released (http://www.fusioncharts.com/flex). It offers 45 chart types in both 2D & 3D. In addition to the general charts comprising of single-series, multi-series, stacked and combination charts, it also offers unique charts like scroll charts, true 3D chart, funnel & pyramid charts and scatter & bubble charts. Also, the drag & drop support in Flex Builder IDE has been improved and now you can see a chart in action by just dragging it from the toolbar to your project.

 

 

 

You can check it out and download your no-restriction evaluation copy from www.fusioncharts.com/flex.

Share this post

Link to post
Share on other sites

Guest Rajroop   

Guest Rajroop
Posted

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.

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
Go To Topic Listing General usage