Charting in Flex
Charting in flex is one of the important and owesome feature of flex.Here is a example in which you u can see the Chart representation of the values in a Datagrid.Hoping you all will enjoy it.The important featureof the flex is the that on changing the value in the datagrid there is the coresponding change in the Chart and for achieving this you don’t require to do any thing more.
Just copy and paste the code below in your Application mxml of Flex.
******************************************************************
<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” paddingTop=”50″
layout=”vertical” verticalScrollPolicy=”off”
>
<mx:Style>
Application {
backgroundColor: #333333;
}
Label{
color:#ff0000;
fontSize:11;
textAlign:justify;
font-family:Verdana;
}
Alert{
modalTransparencyBlur: 5;
modalTransparency: 0.6;
modalTransparencyColor: #DDDDDD;
modalTransparencyDuration: 1000;
color : #0f3177;
title-style-name : “.alertTitle”;
header-height:19;
border-thickness: 1;
drop-shadow-enabled: true;
drop-shadow-color :#d1ddf7;
background-color: #ffffff;
corner-radius :6;
border-style :solid;
header-colors : #90a4d1, #5970a0;
footer-colors : #9db6d9, #ffffff;
border-color : #5970a0;
}
.alertTitle{
font-family :Times New;
font-size :20;
font-weight :bold;
text-align :left;
color :#ffffff;
}
</mx:Style>
<mx:Script><![CDATA[
import mx.utils.ArrayUtil;
import mx.collections.ArrayCollection;
import mx.events.DataGridEvent;
import mx.events.ListEvent;
import mx.controls.Alert ;
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"January", Profit:2000000, Expenses:1500000,ENo:100},
{Month:"February", Profit:1000000, Expenses:200000,ENo:80},
{Month:"March", Profit:1500000, Expenses:500000,ENo:110},
{Month:"April", Profit:1500000, Expenses:500000,ENo:130}
]);
public function functionAddRecord(expenses:ArrayCollection):void
{
var strMonth:String=txtMonth.text;
var strProfit:String=txtProfit.text;
var strExpenses:String=txtExpenses.text;
var strENo:String=txtENo.text;
if(strMonth.length==0){Alert.show(“Enter the month First,it can not be Empty.”,”Blank field”)}
else if(strProfit.length==0){Alert.show(“Enter the Profit First,it can not be Empty.”,”Blank field”)}
else if(strExpenses.length==0){Alert.show(“Enter the Expenses First,it can not be Empty.”,”Blank field”)}
else if(strENo.length==0){Alert.show(“Enter the ENo First,it can not be Empty.”,”Blank field”)}
else
{
expenses.addItem({Month:strMonth,Profit:strProfit,Expenses:strExpenses,ENo:strENo});
expenses.refresh();
txtMonth.text=”";
txtProfit.text=”";
txtExpenses.text=”";
txtENo.text=”";
}
}
public function functionRemoveRecord(expenses:ArrayCollection):void
{
var _selectedindex:Number=dg1.selectedIndex;
var _expensesLength:Number=expenses.length;
if(_selectedindex!=-1)
{
var _selectedindex:Number=dg1.selectedIndex;
expenses.removeItemAt(_selectedindex);
expenses.refresh();
}
else if(_expensesLength==0)
{
Alert.show(“There is no Record to Delete”,”Error”);
}
}
public function functionCheckStatusOfRemove():void
{
if(dg1.selectedIndex >0)
{
btnRemove.enabled=true;
}
}
public function functionitemEditEnd(event:DataGridEvent):void
{
/* var _rowIndex:Number=event.rowIndex;
var _columnIndex:Number= event.columnIndex;
var cell:String=(String(event.currentTarget.itemEditorInstance));
if(event.currentTarget.itemEditorInstance.length==0)
{
Alert.show(“Not Possible”);
} */
}
public function functionItemClick(event:ListEvent)
{
/* var _rowIndex:Number=event.rowIndex;
var _columnIndex:Number=event.columnIndex;
{
if(_rowIndex==1)
{
//trace(expenses.getItemAt((event.rowIndex-1)).Month);
expenses.refresh();
}
} */
}
]]>
</mx:Script>
<mx:WipeLeft id=”myWipeLeft” duration=”2000″/>
<mx:WipeRight id=”myWipeRight” duration=”2000″/>
<mx:WipeUp id=”myWipeUp” duration=”1000″/>
<mx:HBox width=”100%” height=”50%” verticalScrollPolicy=”off”>
<mx:VBox width=”50%” height=”100%” creationCompleteEffect=”{myWipeRight}”>
<mx:Panel title=”Monthly Status of Company” id=”pChart” width=”100%” headerColors=”100%” height=”100%”>
<mx:ColumnChart id=”myChart” dataProvider=”{expenses}” addedEffect=”{myWipeLeft}”
mouseDownEffect=”{myWipeUp}” creationCompleteEffect=”{myWipeUp}”>
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider=”{expenses}” id=”ca” categoryField=”Month”/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField=”Month” yField=”Profit” displayName=”Profit” addedEffect=”{myWipeUp}”/>
<mx:ColumnSeries xField=”Month” yField=”Expenses” displayName=”Expenses” addedEffect=”{myWipeUp}”/>
<mx:ColumnSeries xField=”Month” yField=”ENo” displayName=”No Of Employees” addedEffect=”{myWipeUp}”/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider=”{myChart}”/>
</mx:Panel>
</mx:VBox>
<mx:VBox width=”50%” height=”100%” creationCompleteEffect=”{myWipeLeft}”>
<mx:HBox width=”100%” height=”50%”>
<mx:Panel width=”100%” height=”100%” title=”Add New/Remove Record”>
<mx:Spacer height=”5″ width=”100%”/>
<mx:HBox width=”100%” height=”20%”>
<mx:Label text=”Month” width=”100″/>
<mx:TextInput id=”txtMonth” width=”150″ height=”30″ restrict=”A-Z,a-z” toolTip=”Value should be non numeric.”/>
</mx:HBox>
<mx:HBox width=”100%” height=”20%”>
<mx:Label text=”Profit” width=”100″/>
<mx:TextInput id=”txtProfit” width=”150″ height=”30″ restrict=”0-9″ toolTip=”Value should be numeric.”/>
</mx:HBox>
<mx:HBox width=”100%” height=”20%”>
<mx:Label text=”Expenses” width=”100″/>
<mx:TextInput id=”txtExpenses” width=”150″ height=”30″ restrict=”0-9″ toolTip=”Value should be numeric.”/>
</mx:HBox>
<mx:HBox width=”100%” height=”20%”>
<mx:Label text=”No of Emp.” width=”100″/>
<mx:TextInput id=”txtENo” width=”150″ height=”30″ restrict=”0-9″ toolTip=”Value should be numeric.”/>
</mx:HBox>
<mx:HBox width=”100%” height=”20%”>
<mx:Spacer width=”70″/>
<mx:Button label=”Add New Record” click=”functionAddRecord(expenses)”/>
<mx:Button id=”btnRemove” enabled=”false” label=”Remove Selected Record” click=”functionRemoveRecord(expenses)” toolTip=”For Removing any item first select it from ‘Edit Records’.”/>
</mx:HBox>
</mx:Panel>
</mx:HBox>
<mx:HBox width=”100%” height=”50%”>
<mx:Panel id=”p1″ width=”100%” height=”100%” title=”Edit Records”>
<mx:DataGrid id=”dg1″ width=”100%” editable=”true” selectable=”true” dataProvider=”{expenses}”
itemClick=”functionItemClick(event)” itemEditEnd=”functionitemEditEnd(event)” enterFrame=”functionCheckStatusOfRemove()”>
<mx:columns>
<mx:DataGridColumn dataField=”Month” headerText=”Month” editable=”false”/>
<mx:DataGridColumn dataField=”Profit” headerText=”Profit” textAlign=”center”/>
<mx:DataGridColumn dataField=”Expenses” headerText=”Expenses” textAlign=”center”/>
<mx:DataGridColumn dataField=”ENo” headerText=”No Of Employee” textAlign=”center”/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:Application>
******************************************************************
******************************************************************
Enjoy Flexing.
Shardul Singh Bartwal
