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.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.
<?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> |
To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.