Flex – Java Real Time Chart With BlazeDS

In my previous post I’ve explained how to create a line chart populated with real time data.

In this post I’ve moved real time data generating to Java project and push that data to client using BlazeDS. The rest is same as the previous flex project.

I’ll simply put sources here so you can take a look at it. You need to modify build.xml in java project according to your system. Also right click on your flex project in your Flash Builder ¬†and select properties. Flex Compiler->Additional Compiler Arguments then modify path. You will be able to deploy the java project war file to tomcat and run your flex project from Flash Builder.

You will see the live data in line chart generated and pushed from the server.

There are 2 projects(RealTimeDataServer, RealTimeLineChart) one for server-side with BlazeDS and the other for client with Flex:

GitHub

Real Time Flex Line Chart

Hi,

That example may seems a bit silly but I saw that there is a lack of similar solutions. I’ve not used any third party library. You can find them on Internet.

In fact that project does not do anything other than populating data provider of a line chart in a fixed time interval basis. But in the next post I will integrate that one with BlazeDS and over channels you can send your real time data to your clients and populate line chart according to these data. Let the coding begin:

First we have 2 timers: 1 for populating data and the other for updating chart. We have a bindable data provider for chart. We change that array collection until update chart timer fires. So that we can optimize the speed of the update.

The code is like that:

 <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 minWidth="955" minHeight="600"
 creationComplete="application1_creationCompleteHandler(event)"
 initialize="application1_initializeHandler(event)">
 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 import mx.events.FlexEvent;

 private static const ARRAY_SIZE:int = 500;
 private static const DATA_INTERVAL:int = 8;
 private static const UPDATE_INTERVAL:int = 80;

 private var dummyGeneratorTimer:Timer;
 private var dummyUpdateTimer:Timer;
 [Bindable]
 private var chartData:ArrayCollection = new ArrayCollection;
 private var chartIndex:int = 0;

 protected function application1_initializeHandler(event:FlexEvent):void
 {
 dummyGeneratorTimer = new Timer(DATA_INTERVAL); // 8 millisecond
 dummyGeneratorTimer.addEventListener(TimerEvent.TIMER, populateData);

 dummyUpdateTimer = new Timer(UPDATE_INTERVAL); // 80 millisecond
 dummyUpdateTimer.addEventListener(TimerEvent.TIMER, populateChart);
 var dummyArray:Array = new Array();
 for(var i:int=0; i<ARRAY_SIZE; i++)
 {
 dummyArray[i]=128;
 }
 chartData = new ArrayCollection(dummyArray);
 }

 protected function application1_creationCompleteHandler(event:FlexEvent):void
 {
 dummyGeneratorTimer.start();
 dummyUpdateTimer.start();
 }

 private function populateData(event:TimerEvent):void
 {
 var randomNumber:int = Math.random()*256;
 //Does not trigger chart update
 chartData.source[chartIndex] = randomNumber;
 chartIndex++;
 chartIndex%=ARRAY_SIZE;
 }

 private function populateChart(event:TimerEvent):void
 {
 //Trigger update
 chartData.setItemAt(chartData.getItemAt(0), 0);
 }
 ]]>
 </fx:Script>
 <fx:Declarations>
 <!-- Define custom Strokes. -->
 <mx:SolidColorStroke id="s3" color="0x33F400" weight="1"/>
 </fx:Declarations>

 <mx:CartesianChart id="linechart" width="100%" height="100%" cacheAsBitmap="true"
 cachePolicy="on" paddingLeft="5" paddingRight="5">
 <mx:verticalAxis>
 <mx:LinearAxis id="vAxis" alignLabelsToInterval="true" autoAdjust="false"
 baseAtZero="false" interval="16" maximum="256" minimum="0" padding="1"/>
 </mx:verticalAxis>
 <mx:verticalAxisRenderers>
 <mx:AxisRenderer axis="{vAxis}" canDropLabels="true" color="0xF8F8F6" fontSize="8"/>
 </mx:verticalAxisRenderers>
 <mx:horizontalAxis>
 <mx:LinearAxis id="hAxis" alignLabelsToInterval="true" autoAdjust="false"
 baseAtZero="false" interval="25"/>
 </mx:horizontalAxis>
 <mx:horizontalAxisRenderers>
 <mx:AxisRenderer axis="{hAxis}" canDropLabels="true" color="0xF8F8F6" fontSize="8"/>
 </mx:horizontalAxisRenderers>
 <mx:fill>
 <mx:SolidColor color="0x231F20"/>
 </mx:fill>
 <mx:backgroundElements>
 <mx:GridLines cacheAsBitmap="true" cachePolicy="on" gridDirection="horizontal">
 <mx:horizontalStroke>
 <s:SolidColorStroke alpha="0.2" color="0xD4D4D3" weight="0"/>
 </mx:horizontalStroke>
 </mx:GridLines>
 </mx:backgroundElements>
 <mx:series>
 <mx:LineSeries id="recordGraph" cacheAsBitmap="true" cachePolicy="on"
 dataProvider="{chartData}" form="segment" lineStroke="{s3}"
 sortOnXField="false"/>
 </mx:series>
 </mx:CartesianChart>
</s:Application>

In next post I will move generating random values to a Java project and connect these 2 projects via BlazeDs.

If you’ve better solutions please comment.