MultipleAxes in Chart in Flex4


 

MultipleAxes in Chart in Flex4

When we use different(Unmatched) data in single chart so it will not be possible to represent multiple series in a single chart.

When we use different(Unmatched) data in single chart so it will not be possible to represent multiple series in a single chart.

Multiple Axes in Chart in Flex4:

When we use different(Unmatched) data in single chart so it will not be possible to represent multiple series in a single chart. For solving this problem we use multiple axes in a single chart. In this example you can see how we can use a multiple axes in single chart.

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>

<mx:SolidColorStroke id="v1Stroke"

color="#220088"

weight="8"

caps="square"

alpha=".7"/>

<mx:SolidColorStroke id="v2Stroke"

color="#880022"

weight="8"

caps="square"

alpha=".7"/>

<mx:SolidColorStroke id="v3Stroke"

color="green"

weight="8"

caps="square"

alpha=".7"/>

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

public var student:ArrayCollection = new ArrayCollection([

{Stream: "Management", Girls:1000, Boys:1400, TotalStudent:2400},

{Stream: "Computer Science", Girls:800, Boys:1200, TotalStudent:2000},

{Stream: "Mechanical", Girls:200, Boys:1500, TotalStudent:1700},

{Stream: "Electical", Girls:800, Boys:850, TotalStudent:1650},

{Stream: "Electronics", Girls:500, Boys:1000, TotalStudent:1500},

{Stream: "Civil", Girls:300, Boys:900, TotalStudent:1200}

]);

]]>

</fx:Script>

<s:Panel title="Multiple Chart Axes Example" width="686" height="524">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<mx:ColumnChart id="cchart"

dataProvider="{student}"

showDataTips="true"

x="15" y="14"

width="683" height="425">

<mx:horizontalAxis>

<mx:CategoryAxis id="h1"

dataProvider="{student}"

categoryField="Stream"

title="Stream"/>

</mx:horizontalAxis>

<mx:horizontalAxisRenderers>

<mx:AxisRenderer placement="bottom" axis="{h1}">

<mx:axisStroke>{v3Stroke}</mx:axisStroke>

</mx:AxisRenderer>

</mx:horizontalAxisRenderers>

<mx:verticalAxisRenderers>

<mx:AxisRenderer placement="left" axis="{v1}">

<mx:axisStroke>{v1Stroke}</mx:axisStroke>

</mx:AxisRenderer>

<mx:AxisRenderer placement="right" axis="{v2}">

<mx:axisStroke>{v2Stroke}</mx:axisStroke>

</mx:AxisRenderer>

</mx:verticalAxisRenderers>

<mx:series>

<mx:ColumnSeries

xField="Stream"

yField="Girls"

displayName="Girls"

dataProvider="{student}">

<mx:verticalAxis>

<mx:LinearAxis id="v1"

minimum="100"

maximum="1200"

title="Number of Girls"/>

</mx:verticalAxis>

<mx:fill>

<mx:SolidColor color="#220088" alpha=".7"/>

</mx:fill>

</mx:ColumnSeries>

<mx:LineSeries

xField="Stream"

yField="Boys"

displayName="Boys"

dataProvider="{student}" form="curve">

<mx:verticalAxis>

<mx:LinearAxis id="v2"

minimum="800"

maximum="1500"

title="Number of Boys"/>

</mx:verticalAxis>

<mx:lineStroke>

<s:SolidColorStroke color="#880022" weight="15" alpha=".7"/>

</mx:lineStroke>

</mx:LineSeries>

</mx:series>

</mx:ColumnChart>

<mx:Legend dataProvider="{cchart}"/>

</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

Ads