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:ColumnSeriesxField=" 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:LineSeriesxField=" 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.