Multi-series Flex graphs

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;

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.

comments powered by Disqus