Graphing templates in Flex

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.

comments powered by Disqus