Chart Axis Class in Flex4

Home Tutorial Flex Flex4 Components Chart Axis Class in Flex4

Chart Axis Class in Flex4
Posted on: June 3, 2010 at 12:00 AM

The Axis class is used for set of values such as state name, stock ticker symbols, hours and days etc.

Chart Axis Class in Flex4:

The Axis class is used for set of values such as state name, stock ticker symbols, hours and days etc.
Flex4 uses the following types of axes.
1. CategoryAxis: Category axis is used for a set of values state name, month name etc to the axis. The tag of Category Axis is <mx:CategoryAxis>. You can use this axis as a child tag of the <mx:horizontalAxis> or <mx:verticalAxis>.
2. LinearAxis: LinearAxis is used for a numeric data to the axis. You can set the increment between the axis label. The tag of Linear Axis is <mx:LinearAxis>. You can use this axis as a child tag of the <mx:horizontalAxis> or <mx:verticalAxis>.
3. LogAxis: LogAxis is used for a numeric data to the axis logarithmically. The tag of LogAxis is <mx:LogAxis>. You can use this axis as a child tag of the <mx:horizontalAxis> or <mx:verticalAxis>.
4. DtaeTimeAxis: DateTimeAxis is used for set time-based values such as days, hours, weeks and years to the axis. The tag of DateTimeAxis is <mx:DateTimeAxis>. You can use this axis as a child tag of the <mx:horizontalAxis> or <mx:verticalAxis>.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<fx:Declarations>

<fx:Array id="data">

<fx:Object>

<fx:Month>January</fx:Month>

<fx:Profit>1800</fx:Profit>

<fx:Expenses>1400</fx:Expenses>

<fx:Amount>400</fx:Amount>

</fx:Object>

<fx:Object>

<fx:Month>February</fx:Month>

<fx:Profit>900</fx:Profit>

<fx:Expenses>200</fx:Expenses>

<fx:Amount>500</fx:Amount>

</fx:Object>

<fx:Object>

<fx:Month>March</fx:Month>

<fx:Profit>1600</fx:Profit>

<fx:Expenses>500</fx:Expenses>

<fx:Amount>400</fx:Amount>

</fx:Object>

<fx:Object>

<fx:Month>April</fx:Month>

<fx:Profit>500</fx:Profit>

<fx:Expenses>300</fx:Expenses>

<fx:Amount>300</fx:Amount>

</fx:Object>

<fx:Object>

<fx:Month>May</fx:Month>

<fx:Profit>1000</fx:Profit>

<fx:Expenses>450</fx:Expenses>

<fx:Amount>250</fx:Amount>

</fx:Object>

<fx:Object>

<fx:Month>June</fx:Month>

<fx:Profit>2000</fx:Profit>

<fx:Expenses>500</fx:Expenses>

<fx:Amount>700</fx:Amount>

</fx:Object>

<fx:Object>

<fx:Month>July</fx:Month>

<fx:Profit>1200</fx:Profit>

<fx:Expenses>300</fx:Expenses>

<fx:Amount>500</fx:Amount>

</fx:Object>

</fx:Array>

</fx:Declarations>

<s:Panel title="Axis Class Example" width="431" height="526">

<mx:ColumnChart id="cchart" dataProvider="{data}" showDataTips="true" x="15" y="14">

<mx:verticalAxis>

<mx:CategoryAxis dataProvider="{data}" categoryField="Month"/>

</mx:verticalAxis>

<mx:series>

<mx:LineSeries

xField="Profit"

yField="Month"

displayName="Profit"/>

<mx:LineSeries

xField="Expenses"

yField="Month"

displayName="Expenses"/>

</mx:series>

</mx:ColumnChart>

<mx:Legend dataProvider="{cchart}" x="0" y="423"/>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Related Tags for Chart Axis Class in Flex4:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics