Ben Hughes

After a lot of messing around thanks to some vauge/incomplete guidance in a text book, I’ve finally got a dynamic multi-series Flex graph working. And unsurprisingly, it’s almost trivially simple.

Here’s the bulk of the initApp() method:

seriesCol = SeriesFactory.create(_config.series);

for each (var s:Series in seriesCol){

var localSeries:LineSeries = new LineSeries();
localSeries.dataProvider = s.getData();
localSeries.xField = "xAxis";
localSeries.yField = "yAxis";
localSeries.displayName = s.getLabel();

var currentSeries:Array = lineChart.series;
currentSereies.push(localSeries);

lineChart.series = currentSeries;

}

var hAxis:CategoryAxis = new CategoryAxis();
hAxis.dataProvider = seriesCol[0].getData();
hAxis.categoryField = "xAxis";

lineChart.horizontalAxis = hAxis;

seriesCol is an ArrayCollection of Series objects - a custom class which fetches and extracts the appropriate XMLList from converted Excel file, and transforms it into a 2D array.

The annoying thing is, this is how I originally approached the problem. I was just playing about though, so when I got stuck I pulled out the text book, which, rather than adding mulitple LineSeries objects, suggested expanding the ArrayCollection used as the dataProvider, eg

ac.addItem({x1:xAxis1[i], x2:xAxis2[i] y:yAxis[i]})

While I’m sure that works just fine, it’s an absolute pain to try and create from multiple XMLLists, especially when there are a different number of data points in each series.

One of the beaut things about multiple LineSeries way is that, so long as the x-axis categories are in the same format, Flex takes care of matching the data points. So I have been able to add a quarterly series and a monthly series to the same graph with no effort:

Lessons learnt:

1. Trust your instincts
2. if its difficult in Flex, you’re probably doing it the wrong way

From here I’ll be looking at some different graph templates, in particular stacked bar graphs. I also need to create some sort of UI/wizard for clients to specify the metadata, and work out how to deploy everything via to our main website.

It was very nice to have a win, as I’d been wandering down the garden path for a few days.

One of my clients had a great idea today - in order to make it look like we’re producing a heap of data visualisation widgets, we (ie I) should come up with a few generic graphing templates that we can populate with different data sources.

After having a breif fiddle with it tonight, I’ve got something working. The hardest part was actually working out how to create a 2D ArrayCollection from an XML feed. I’m not sure if there’s an easier way, but I’m doing it by iterating through 2 ‘parallel’ arrays and populating the ArrayCollection like this:

ac.addItem({x:xAxis[i], y:yAxis[i]})

It was more the syntax than anything else that was getting me into trouble.

To start with I’ve created a simple line chart, which sources its data from an Excel spreadsheet that’s been converted to XML via my servlet. There’s an XML config doc that allows the specification of:

• the URI of the XML document (URL of the servlet, passing the URL of the source Excel file)
• the sheet to get data from
• which columns to use for the X and Y axis
• the row to start from
• the title of the graph

It seems to work a treat, and should allow any 2 columns of data from a converted Excel doc to be displayed, provided of course that the y axis data column is graphable (ie numeric).

Next up I’ll create some multi-source graphs. Pulling the data from 2 separate Excel files and ‘mashing’ it up in a data visualisation is something that’s nigh-on impossible with the current website, so it should get people excited.

One of the things that I’m really liking about Flex is that I can, to a large degree, forget about the UI. Which is a strange thing to say about a UI development tool I am much more interested in the business logic side of development rather than making pretty things, and out of the box Flex produces quite passable UIs. Of course I can then hand the app off to the UI experts, who can quite easily tweak it without having to get into the code.