LineChart Control in Flex4


 

LineChart Control in Flex4

The LineChart Control is a MX Component. There is no Spark component.

The LineChart Control is a MX Component. There is no Spark component.

LineChart control in Flex4:

The LineChart Control is a MX Component. There is no Spark component. The LineChart Control represents data in a series of line.  It connects two data points by a line. You can provide the data to the chart control by using data provider property.
You will use <mx:horizontalAxis> or <mx:verticalAxis> and <mx:Series> in it. You will use xField, yField, interpolateValues and Form property for series. You can use more than one series in it. There are six types of Form for display a chart: segment, step, reverseStep, vertical, horizontal and curve. You can set the color by using <mx:Fill> and <mx:Stroke>. The tag of LineChart Control is <mx:LineChart>.

Example:/strong>

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

<s:RadioButtonGroup id="form" itemClick="eventhandler(event);"/>

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.events.ItemClickEvent;

[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}

]);

public function eventhandler(event:ItemClickEvent):void{

if(event.currentTarget.selectedValue == "segment"){

cs1.setStyle("form" , "segment");

cs2.setStyle("form" , "segment");

cs3.setStyle("form" , "segment");

}else if(event.currentTarget.selectedValue == "step"){

cs1.setStyle("form" , "step");

cs2.setStyle("form" , "step");

cs3.setStyle("form" , "step");

}else if(event.currentTarget.selectedValue == "vertical"){

cs1.setStyle("form" , "vertical");

cs2.setStyle("form" , "vertical");

cs3.setStyle("form" , "vertical");

}else if(event.currentTarget.selectedValue == "horizontal"){

cs1.setStyle("form" , "horizontal");

cs2.setStyle("form" , "horizontal");

cs3.setStyle("form" , "horizontal");

}else if(event.currentTarget.selectedValue == "reverse"){

cs1.setStyle("form" , "reverseStep");

cs2.setStyle("form" , "reverseStep");

cs3.setStyle("form" , "reverseStep");

}else if(event.currentTarget.selectedValue == "curve"){

cs1.setStyle("form" , "curve");

cs2.setStyle("form" , "curve");

cs3.setStyle("form" , "curve");

}

}

]]>

</fx:Script>

<s:Panel title="LineChart Control Example" width="724" height="454">

<s:layout>

<s:HorizontalLayout/>

</s:layout>

<mx:LineChart id="linechart1"

paddingBottom="10"

paddingLeft="10"

paddingRight="10"

paddingTop="10"

dataProvider="{student}"

showDataTips="true" width="574"

fontFamily="verdana">

<mx:verticalAxis>

<mx:LinearAxis baseAtZero="true" title="Number of Students" />

</mx:verticalAxis>

<mx:horizontalAxis>

<mx:CategoryAxis categoryField="Stream" dataProvider="{student}" title="B.Tech. Stream"/>

</mx:horizontalAxis>

<mx:series>

<mx:LineSeries id="cs1"

yField="Girls"

xField="Stream"

displayName="Girls">

<mx:lineStroke>

<mx:Stroke color="red" weight="4" alpha="0.6" />

</mx:lineStroke>

</mx:LineSeries>

<mx:LineSeries id="cs2"

yField="Boys"

xField="Stream"

displayName="Boys">

<mx:lineStroke>

<mx:Stroke color="green" weight="4" alpha="0.6" />

</mx:lineStroke>

</mx:LineSeries>

<mx:LineSeries id="cs3"

yField="TotalStudent"

xField="Stream"

displayName="TotalStudent">

<mx:lineStroke>

<mx:Stroke color="blue" weight="4" alpha="0.6" />

</mx:lineStroke>

</mx:LineSeries>

</mx:series>

</mx:LineChart>

<s:VGroup width="141">

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

<s:Label text="Choose Form type" fontFamily="verdana" fontWeight="bold" width="137"/>

<s:RadioButton id="rd1"

groupName="form"

value="segment"

label="Segment"

selected="true"

fontFamily="verdana"/>

<s:RadioButton id="rd2"

groupName="form"

value="step"

label="Step"

fontFamily="verdana"/>

<s:RadioButton id="rd3"

groupName="form"

value="vertical"

label="Vertical"

fontFamily="verdana"/>

<s:RadioButton id="rd4"

groupName="form"

value="horizontal"

label="Horizontal"

fontFamily="verdana"/>

<s:RadioButton id="rd5"

groupName="form"

value="reverse"

label="Reverse Step"

fontFamily="verdana"/>

<s:RadioButton id="rd6"

groupName="form"

value="curve"

label="Curve"

fontFamily="verdana"/>

</s:VGroup>

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