The CategoryAxis class maps discrete categorical data (such as states, product names, or department names) to an axis and spaces them evenly along it. This axis accepts any data type that can be represented by a String.
The dataProvider property of the CategoryAxis object defines the data provider that contains the text for the labels. In most cases, this can be the same data provider as the chart's data provider. A CategoryAxis object used in a chart inherits its dataProvider property from the containing chart, so you are not required to explicitly set the dataProvider property on a CategoryAxis object.
The dataProvider property of a CategoryAxis object can contain an Array of labels or an Array of objects. If the data provider contains objects, you use the categoryField property to point to the field in the data provider that contains the labels for the axis, as the following example shows:
<?xml version="1.0"?>
<!-- charts/BasicColumn.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500},
{Month:"Feb", Profit:1000, Expenses:200},
{Month:"Mar", Profit:1500, Expenses:500}
]);
]]></mx:Script>
<mx:Panel title="Column Chart">
<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="Month"
yField="Profit"
displayName="Profit"
/>
<mx:ColumnSeries
xField="Month"
yField="Expenses"
displayName="Expenses"
/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
If the data provider contains an Array of labels only, you do not specify the categoryField property.
You can customize the labels of the CategoryAxis object rather than use the axis labels in the data provider. You do this by providing a custom data provider. To provide a custom data provider, set the value of the CategoryAxis object's dataProvider property to a custom Array of labels, as the following example shows:
<?xml version="1.0"?>
<!-- charts/CategoryAxisLabels.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses: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}
]);
[Bindable]
public var months:Array = [
{Month:"January", monthAbbrev:"Jan"},
{Month:"February", monthAbbrev:"Feb"},
{Month:"March", monthAbbrev:"Mar"}
];
]]></mx:Script>
<mx:Panel title="Line Chart">
<mx:AreaChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{months}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="Profit"
/>
<mx:AreaSeries
yField="Expenses"
displayName="Expenses"
/>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
For more information about chart data providers, see Defining chart data.
You can also customize the labels using the labelFunction property of the CategoryAxis and NumericAxis classes. This property points to a callback function that refines the labels based on the existing data provider. For more information, see Defining axis labels.