Multiple Data Series in Chart in Flex4
In This example you can see how we can use multiple data series in a single chart. Every chart has a its own data series.
In This example you can see how we can use multiple data series in a single chart. Every chart has a its own data series.Multiple Data Series in Chart in Flex4:
In This example you can see how we can use multiple data
series in a single chart. Every chart has a its own data series. These are
following:
1. AreaSeries
2. BarSeries
3. BubbleSeries
4. CandlestickSeries
5. ColumnSeries
6. HLOCSeries
7. PieSeries
8. LineSeries
9. PlotSeries
In the following example we mix a LineSeries and ColumnSeries in a ColumnChart.
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: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 Series Example" width="659" height="543"> <s:layout> <s:VerticalLayout/> </s:layout> <mx:ColumnChart id="cchart" dataProvider="{student}" showDataTips="true" x="15" y="14" width="650" height="425"> <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{student}" categoryField="Stream" title="Stream"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries xField="Stream" yField="Girls" displayName="Girls"/> <mx:ColumnSeries xField="Stream" yField="TotalStudent" displayName="TotalStudent"/> <mx:LineSeries xField="Stream" yField="Boys" displayName="Boys"/> </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.
