Iwo Banaś – Flex Blog

Title of this post is a little bit misleading because it is not possible to use ChartScroller directly with CategoryAxis. This is because ChartScroller relays on axis minimum/maximum properties which are not present in CategoryAxis. Luckily it is possible to simulate CategoryAxis behavior with LinearAxis which is supported by ChartScroller. I will describe how to do it in this post.

Simple scenario

The simplest and quite common scenario is having one data provider containing objects with single property determining category and further properties determining values of the series. Such data provider may look something like this (code copied from Flex API examples):

[Bindable]
public var dp:ArrayCollection = new ArrayCollection( [
    { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
    { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
    { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
    { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
    { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);

In such case we have to do three things to simulate CategoryAxis behavior with LinearAxis:

• Declare only yField property of series (not xField).
• Create label function converting data provider index to category name.
• Declare LinearAxis using created label function with interval property set to 1.

Label function may look like this (If xField of series is not specified Flex passes item index as labelValue so all we have to do is find correct item and return category value):

public function categoryLabelFunction(labelValue:Object,
                        previousValue:Object, axis:IAxis):String
{
    var index:int = int(labelValue);

    if (index >= 0 && index < dp.length)
        return dp[index].Month;
    return "";
}

As you can see chart MXML code is only slightly modified compared to code using standard CategoryAxis:

<mx:ColumnChart id="columnChart" width="100%" height="100%"
    gutterLeft="50" gutterRight="40" dataProvider="{dp}">
    <mx:series>
        <!-- Note that xField is not specified -->
        <mx:ColumnSeries yField="Profit" />
        <mx:ColumnSeries yField="Expenses" />
        <mx:ColumnSeries yField="Amount" />
    </mx:series>
    <mx:horizontalAxis>
        <!-- LinearAxis simulating CategoryAxis -->
        <mx:LinearAxis interval="1"
            labelFunction="categoryLabelFunction" />
    </mx:horizontalAxis>
</mx:ColumnChart>

View source is enabled, you can download zipped sources from here.

More complex scenario

In some cases you may need to use xField series properties. For example you may be using separate data providers of different length for different series. In such case additional parse function have to be created to convert category name to numeric value which can be placed along LinearAxis. You can find full example of such scenario here.

View source is enabled, you can download zipped sources from here.