Bar chart, Trend line, Tree view and Grouped columns in Flex AdvancedDataGrid

Download Code - 2 MB

Introduction

Altough I'm a ASP.Net developer, I recently had to use Adobe Flex Builder 3.0 in one of my projects. I think this is a really cool technology with very rich controls. And its integration with ASP.Net is so seamless which compeled me to like it instantly. I generated some really cool UI using data from .Net webservice and AdvancedDataGrid control of Flex. So I though I should publish this as an article so that newbies to Flex can explorer these cool features of Flex.

Description

Example I have taken is that of a Sales History of a categories of some products.Features of Flex used in this article are:

• Tree mode of AdvancedDataGrid using Hierarchical datasource
• BarChart within a column of the grid using Itemrenderer(using degrafa library)
• LineChart withing a column of the grid to show trend of sales in previous years(using degrafa library)
• Grouped columns for Sales History of last 5 years

Article consist of two parts. One is the .Net webservice which acts as the data access layer to fetch data. And other is the Flex application which consumes the webservice, fetches data and displays it in the AdvancedDataGrid control. In addition to just binding the data to columns of the grid, I have taken a example where I can use many features of the AdvancedDataGrid and Flex as a whole. Here the data returned by webservice is in XML format (as shown below) which is parsed by action script code and converted to a Hierarchical data object in order to display the data in a Tree struchture.


Check out demo link here.

The below action script parses the XML data returned by the webservice call and converts it into a Hierarchical data object of flex

var arrCollection:ArrayCollection = new ArrayCollection();
for each(var prop:XML in dataXML.children())
{
  var o:CatInfo = new CatInfo();
  if(prop.@Rank != null)
  o.Rank = prop.@Rank;
  if(prop.@Category != null)
  o.Category = prop.@Category;
  if(prop.@Amount != null)
  o.Amount = prop.@Amount;
  if(prop.@Percent != null)
  o.Percent = prop.@Percent;
  if(prop.@Year1 != null)
  o.Year1 = prop.@Year1;
  if(prop.@Year2 != null)
  o.Year2 = prop.@Year2;
  if(prop.@Year3 != null)
  o.Year3 = prop.@Year3;
  if(prop.@Year4 != null)
  o.Year4 = prop.@Year4;
  if(prop.@Year5 != null)
  o.Year5 = prop.@Year5;

  var objTrend:ArrayCollection = new ArrayCollection();
  objTrend.addItemAt(o.Year1,0);
  objTrend.addItemAt(o.Year2,1);
  objTrend.addItemAt(o.Year3,2);
  objTrend.addItemAt(o.Year4,3);
  objTrend.addItemAt(o.Year5,4);
  o.Trend = objTrend;
  ParseNodes(o,prop);
  arrCollection.addItem(o);
}

hdCollection = new HierarchicalData(arrCollection);
hdCollection.childrenField = "ChildNodes";
adg1.dataProvider = hdCollection;

I have used two controls from degrafa libraries for generating the runtime charts in the grid. One for the bar charts and other for the trend line chart. For references on using Degrafa libraries please check out the below links -

Degrafa + Datagrids = Visual Display of Data - InsideRIA
Degrafa + Data Part 2: The Sparkline

The Webservice is consumed using the service reference component as shown below

<mx:WebService
     id="service1"
     wsdl="http://localhost/FlexService/FlexService/TestService.asmx?WSDL">
     <mx:operation name="GetData" resultFormat="object"
      fault="mx.controls.Alert.show(event.fault.faultString)"
      result="remotingCFCHandler(event)"
      />
 </mx:WebService>     
    

Future scope

Further I would be adding a search on grid soon to this application. So look out for the same. Do let me know if you would like some other features to be added to this application.

s.a.w