FusionCharts for Flex > Special Cases > Connection to BlazeDS

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

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

On the BlazeDS server, declare Java classes, which return data sets confirming to FusionCharts for Flex data structure. You also need to specify a XML file, which maps those classes to the Flex remote object. In the following Java code, getChartData() method returns a String containing 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;
}
}

To continue, the compiled class file of the code (above) should be copied to WEB-INF/classes directory of your web project. And the remoting-config.xml file located at WEB-INF/Flex should be configured in the following manner:

<?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 segment of the code (above) 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 declares 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, which is to be retrieved and the result attribute is set to the chart generation function. At runtime, the remote object is invoked using the following code. In the code - getChartData() method of the remote object is called and FusionCharts data is retrieved.

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

Finally, the FusionCharts data source is set using 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 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 implementing BlazeDS in the manner described (above) you can plot charts with data retrieved from a server.