BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Flex Charting with Editable Datagrid

Posted by Shardul Singh Bartwal on November 20, 2007

Charting in Flex

charting.png

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

Advertisements

4 Responses to “Flex Charting with Editable Datagrid”

  1. Doug said

    This is very useful. Thank you for making your code available.

  2. Shishir said

    this is highly use full thanks, thank you very much ….

  3. How much time did it acquire u to compose “Flex Charting with Editable Datagrid BTA Flexing”?

    It possesses quite a bit of high-quality knowledge. Thanks a lot -Brigitte

  4. “Flex Charting with Editable Datagrid BTA Flexing” certainly got myself
    hooked with ur site! I personallywill probably wind up being back again far more normally.

    Thanks a lot ,Rod

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: