Chart Axis Class in Flex4


 

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.

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>

0

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

</fx:Object>

<fx:Object>

1

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

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

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

2

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

</fx:Object>

<fx:Object>

3

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

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

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

4

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

</fx:Object>

<fx:Object>

5

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

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

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

6

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

</fx:Object>

</fx:Array>

7

</fx:Declarations>

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

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

8

<!-- use of Axis -->

<mx:verticalAxis>

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

9

</mx:verticalAxis>

<mx:series>

<mx:LineSeries

0

xField="Profit"

yField="Month"

displayName="Profit"/>

1

<mx:LineSeries

xField="Expenses"

yField="Month"

2

displayName="Expenses"/>

</mx:series>

</mx:ColumnChart>

3

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

</s:Panel>

</s:Application>

4

Output:

Running Application:

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

Download this code

Ads