Multiple Data Series in Chart in Flex4


 

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.

Download this code

Ads