Create Chart using Action script in Flex4

In this section you will see how we can create a chart using action script. we have to need some classes in action script For create a chart.

In this section you will see how we can create a chart using action script. we have to need some classes in action script For create a chart.

Create Chart using Action script in Flex4:

In this section you will see how we can create a chart using action script.
we have to need some classes in action script For create a chart.
They are following:

import mx.collections.*;
import mx.charts.*;
import mx.charts.series.*;
import mx.charts.renderers.*;
import mx.charts.events.*;

You can also destroy and manipulate chart using action script.
You will use the new keyword for create a chart.

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"

creationComplete="init()">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.charts.ColumnChart;

import mx.charts.series.LineSeries;

import mx.charts.CategoryAxis;

import mx.charts.Legend;

[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:200, TotalStudent:700},

{Stream:"Civil", Girls:100, Boys:900, TotalStudent:1000}

]);

public var Chart:ColumnChart;

public var series1:LineSeries;

public var series2:LineSeries;

public var series3:LineSeries;

public var legend1:Legend;

public function init():void {

// Create Chart

Chart = new ColumnChart();

Chart.showDataTips = true;

Chart.dataProvider = student;

Chart.width=550;

// Create Category Axis

var horAxis:CategoryAxis = new CategoryAxis();

horAxis.categoryField = "Stream" ;

horAxis.dataProvider = student;

Chart.horizontalAxis = horAxis;

// Create Series Class

var Series:Array=new Array();

series1 = new LineSeries();

series1.xField="Stream";

series1.yField="Boys";

series1.displayName = "Boys";

Series.push(series1);

series2 = new LineSeries();

series2.xField="Stream";

series2.yField="Girls";

series2.displayName = "Girls";

Series.push(series2);

Chart.series = Series;

series3 = new LineSeries();

series3.xField="Stream";

series3.yField="TotalStudent";

series3.displayName = "TotalStudent";

Series.push(series3);

Chart.series = Series;

// Create Lagend

legend1 = new Legend();

legend1.dataProvider = Chart;

p1.addElement(Chart);

p1.addElement(legend1);

}

]]>

</fx:Script>

<s:Panel id="p1"

title="Chart Created in ActionScript"

width="568" height="528">

<s:layout>

<s:VerticalLayout/>

</s:layout>

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