Share on Google+Share on Google+

Chart Axis Class in Flex4

Advertisement
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">

<!-- use of Axis -->

<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

Advertisements

Posted on: June 3, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.