Monthly Archives: April 2012

Axiis Data Visualization

Axiis library

Axiis is a data visualization library based on the basic Degrafa framework. It improves data charting presentation on Flex dashboarding, which visual graphs are still poor and under the level of the flex design.

The given samples are always based on CSV or XML transformation which may not be the case if you are receiving live data or plotting real time informations.

Before you start, as usual, RTFM :p Then you need to understand some primary concepts: Geometry, layouts, scaling and grouping. You need also to understand how dataProviders are wrapped before binding them to DataCanvas.

Here‘s the sample structure given on the official website from LineAreaAxis project :

Axiis LineAreaSeries sample

Base code

The dataProvider is a bindable global attribute containing data to plot on the chart. This data source is used twice on the LineSeriesGroup attribute of DataCanvas and on the LinearScale‘s (vertical scale) dataProvider .

Let’s have an example to get things illustrated. I want to display my server used bandwidth on real-time: So the X-Axis will contain time, Y-Axis the used bandwidth. So every drawn dot is a couple of (time,bandwidth).  So the first thing to do is to create an array of those dots alongside with another array containing the X-Axis labels.

//points to draw
private var dots:ArrayCollection;
//X-Axis Labels
[Bindable]private var xLabels:Array;
private var dataCollection:ArrayCollection = null;
private var wrapper:Object = new Object();
private var finalData:Object = new Object();

public function start():void
{
      dots = new ArrayCollection();
      dots.addItem({time:'00:00:00',bandwidth:'10'});
      xLabels.push('00:00:00');
      dots.addItem({time:'00:00:10',bandwidth:'17'});
      xLabels.push('00:00:10');
     //add all other points ...
}

Then, we need to wrap data and assign it to the dataProvider:

wrapper = new Object();
wrapper.columns = dots;
wrapper.pivotName = bandwidth;

dataCollection = new ArrayCollection();
dataCollection.addItem(wrapper);

dataProvider = dataCollection;

and finally we need to assign the X-Axis headers/labels dataProvider and throw redraw event by invalidating components:


hscale.dataProvider = XLabels;
hAxis.invalidateDataProvider();
dc.invalidateDisplayList();

On the MXML side,  we need to change those three properties from the standard given sample:


plotCollection="columns"
 dataField="bandwidth"
 labelField="pivotName"
 plotLabelField="bandwidth"

To create real time charting we need to pull data from any source periodically using technologies like JSP( see example of using JSP on Flex). That’s all for today… hope that you’ve got it like…

Advertisements