FusionCharts for Flex > Special Cases > Connection to BlazeDS

BlazeDS is the server-based Java remote and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time. We use the Flex remote services to fetch data and pass it onto the FusionCharts object. Retrieving data dynamically is a 5-step process:

  1. Create Java classes on the server side which return data that conforms to FusionCharts for Flex data structures.
  2. Configure the remoting-config.xml file on the server to declare the remote classes and register them with the Flex remote services.
  3. Create a new project with the proper web-server, URL and context-path specifications.
  4. Retrieve the remote object in your Flex MXML file based upon the previous configuration.
  5. Provide the data source to your FusionCharts object.

On the BlazeDS server, declare Java classes which return data sets that conform to FusionCharts Flex data sources. You also need to specify an XML file which maps those classes to the Flex remote object. In the following Java code the getChartData() method returns a String containing a FusionCharts XML.

package example;

public class ChartData {
public String[][] getChartData() {
String[][] xmlData = new String[2][6];

xmlData[0][0] = "Jan";
xmlData[0][1] = "Feb";
xmlData[0][2] = "Mar";
xmlData[0][3] = "Apr";
xmlData[0][4] = "May";
xmlData[0][5] = "Jun";

xmlData[1][0] = "27400";
xmlData[1][1] = "29800";
xmlData[1][2] = "25800";
xmlData[1][3] = "26800";
xmlData[1][4] = "29600";
xmlData[1][5] = "32600";

return xmlData;
}
}

The above class should be compiled and the class file put in the "WEB-INF/classes" directory of your web project. After this, configure the remoting-config.xml file at "WEB-INF/Flex" to the as follows,

<?xml version="1.0" encoding="UTF-8"?>
<service id="remoting-service" class="flex.messaging.services.RemotingService">
<adapters>
<adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
</adapters>
<default-channels>
<channel ref="my-amf"/>
</default-channels>
<destination id="chartservice">
<properties>
<source>example.ChartData</source>
</properties>
<adapter ref="java-object"/>
</destination>
</service>

The highlighted block in the above code sets the remote reference identifier as "chartservice" and declares the class location at example.ChartData .

Set the remote URL and the context path at the beginning of the project.

The MXML block delares the remote object in the following manner:

<mx:RemoteObject id="my_ro" destination="chartservice" source="example.ChartData" result="chartGen(event)" />

The destination attribute is used to set the identifier of the object we want to retrieve. And the result attribute is set to the chart generation function. At runtime, the remote object is invoked using the following code. Particularly, the getChartData() method of the remote object is called to retrieve the FusionCharts data.

<mx:Button label="Data from BlazeDS" click="my_ro.getChartData()"/>

Finally, the FusionCharts data source is set using the script:

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;

private var arrayData:ArrayCollection;

private function init():void
{
arrayData=new ArrayCollection();
}

private function chartGen(e:ResultEvent):void
{
var temp:Array=e.result as Array;
arrayData.removeAll();
for(var i:Number=0; i<temp[0].length; i++)
{
arrayData.addItem({label:temp[0][i],value:temp[1][i]});
}
fc.FCData(arrayData);
fc.FCRender();
}
]]>
</mx:Script>

The chartGen function is used to set the data source and re-render the chart. The following code shows how the data is first converted to a Flex Array data type.

var temp:Array=e.result as Array;
arrayData.removeAll();
for(var i:Number=0; i<temp[0].length; i++)
{
    arrayData.addItem({label:temp[0][i],value:temp[1][i]});
}

After converting the data into a Flex data type, the chart data is set and the chart is re-rendered as follows:

fc.FCData(arrayData);
fc.FCRender()

By following the above method, you can use FusionCharts to show server-side data.