Home Tutorial Flex Flex4 Components Chart Axis Class in Flex4

 
 

Share on Google+Share on Google+
Chart Axis Class in Flex4
Posted on: June 3, 2010 at 12:00 AM
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

Advertisement

Related Tags for Chart Axis Class in Flex4:


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.

Posted on: June 3, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com