Custom Axis

While at work, I ran across a scenario where none of the pre-built Flex charting components would suffice. We’re still in stealth, so I can’t talk too much about it–but basically we needed a non-LinearAxis. Much of the LinearAxis code is designed to space the axis labels perfectly in the proper unit of measure. I needed to have an axis label for the third Friday of every month in my data set…which isn’t a linear value. My original solution was a hack suitable for getting the job done at the time, but it wasn’t exactly reusable. We’re between dev cycles right now, so I’ve been tinkering around and decided to actually write the component so that it would be usable outside our code base.Presenting the CustomSpacedAxis. It’s certainly not perfect, but hopefully someone might find it useful. I got the idea from other parts of Flex–the labelFunction works magically, and ArrayList already supports a filterFunction (but I didn’t actually want to filter the array list…just the presentation of it). Instead, I extended LinearAxis and added a few new variables: dataProvider, which is an ArrayCollection; xField, which is the field in the AC used to draw the axis labels (just as in a Series); labelFilter, which is a function used to determine whether or not the given data point should generate a label.

In the example below, the first two buttons are doable with a linear axis. All they do is change the dataProvider from one ArrayList to another and change the labelFunction from one function to another. The third button changes the labelFilter from one function to another. The starting filter displays an axis label at any data point where the value is 5. The second filter displays an axis label at any data point which represents a local min/max (by looking at the data points on either side of it). It seems like there are lots of other potential uses for this, so I thought I’d share.

Source (as text files): CustomSpaceAxis.as, test.mxml

del.icio.us:Custom Axis digg:Custom Axis newsvine:Custom Axis fark:Custom Axis Y!:Custom Axis

Leave a Reply