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.

Advertisements

2 thoughts on “Real Time Flex Line Chart

  1. […] my previous post I’ve explained how to create a line chart populated with real time […]

  2. Kamatchi Gunasekaran says:

    Hi,
    I am using spring-Carringram-BlazeDS combination,but issue is timeout in BlazeDS, also i have configured interval.Is that possible to resolve time out issue in flex.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s