Monday 26 November 2007

Flex Chart Creation

Being a person that loves technology and challenges, I decided to implement a flex chart capability into the software that we are currently working on. I installed Adobe Flex builder 2, got myself the professional Flex 2 book(Tretola, et al) and set myself a deadline of 5 hours to come up with the needed chart.

What started as a little challenge, turned out to be tedious, stressful and at some point I almost gave up, but my job and integrity was on the line.

Before venturing into Flex development, I had the impression that I could connect directly to the application underlying database, but men was I 100% wrong. Reading the book and the manual, I came to realise that I would have to make calls to the database to fetch the needed data, using HTTPService, webservice, etc. Flex mostly use XML as a data format.

Ok, I recovered from the dilema of connecting to the database and learnt how to use the HTTPService to get the needed data for the chart. The data was then used to plot the chart after defining the datasource within the column chart tag.

I went on to learn how to make the data value appear on the column using the showDataTips function, I also se the column maximum column width(maxColumnWidth), for accessibility I used the toolTip to provide additional information to the user.
By default the axis label are not included, digging into the help file, I soon came to realsise that I can set the X axis label using the category Axis tag of the horizonatalAxis and vice versa.

The chart to be produced in question was suppose to give the user the ability to see yearly incident, when a year is clicked the chart drills down to show the month incident.

Surely this should be easy, at first it was not, but now it is. I started my search on Google with 'drill down chart', some of the result where helpful, but soon realised that my XML format was different from that being used to explain the drill down data.
Well, after additional break, party, sleeping, easting, etc I found a solution to help me. The key to my problem of not been able to come back up after drilling down was because I can access the needed data.
To resolve this, I brought in the XML data as an Array collection(by using result part of the HTTPService) and then made the array collection to be 'public'

What more can I say, I am happy that I cracked it, I can still my job and my integrity is as clean as clean.

Can I point out that I have never made the effort to read flex prior to creating the chart application, but I realise that one can bring skills learnt from other systems and apply it on current application development/implementation.