Get the data from selected row and show it in the graphics

<?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" xmlns:summarybyallservice="services.summarybyallservice.*"
			   creationComplete="initApp()">
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			import mx.rpc.events.ResultEvent;
			import mx.utils.ArrayUtil;
			import mx.events.ListEvent;
			
			
			
			[Bindable] 
			private var mydata:ArrayCollection = new ArrayCollection();
			
			[Bindable]
			private var ac:ArrayCollection;
			
			/* Array for moving up and down */
			private var pos:Array = [1,2,3];
			
			/* Radius for the pie chart */       
			[Bindable]
			private var explRadius:Array = new Array();
			
			
			private function initApp():void
			{	
				summarybyallService.getAllSummary_by_all();
			}
			
			
			protected function summarybyallService_resultHandler(event:ResultEvent):void
			
			   {
				
				mydata = event.result as ArrayCollection;
			   }
			
			
			private function selectRow(e:ListEvent):void
			{    
				var j:int;
				
				try{	
					for(j;j< explRadius.length; j++)
					{
						explRadius[j]=0;
					}				
					explRadius[e.columnIndex -1]=.2;
					
					ac = new ArrayCollection([
						{Years:"Act FY10", Spend:e.itemRenderer.data.Actual_FY10, Values:e.itemRenderer.data.Actual_FY10 /2 },
						{Years:"Act FY11", Spend:e.itemRenderer.data.Actual_FY11 , Values:e.itemRenderer.data.Actual_FY11 /2},
						{Years:"Ann FY11", Spend:e.itemRenderer.data.Anualized_FY11, Values:e.itemRenderer.data.Anualized_FY11 /2 }
						
						
					]);
					
					
					theColumnChart.dataProvider =ac;
						
					
					/*thePieSeries.perWedgeExplodeRadius = explRadius; */
				}
				catch(er:*)
				{
					Alert.show(er.toString(),"Error");
				}
			}

			
		]]>
	</fx:Script>
	<fx:Declarations>
		
		<s:CallResponder id="getAllSummary_by_allResult"/>
		<summarybyallservice:SummarybyallService id="summarybyallService" 
												 fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" 
												 showBusyCursor="true"
												 result="summarybyallService_resultHandler(event)"/>
		
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<!-- Define chart effects -->
		
		<!--Column chart effect-->
		<mx:SeriesSlide id="slideIn" duration="1000" direction="up"/>
		<mx:SeriesSlide id="slideOut" duration="1000" direction="down" />
		<mx:SolidColor id="sc0" color="red" alpha=".3"/>
		<mx:Stroke id="stroke0" color="red" weight="1" alpha=".8"/>
	
	</fx:Declarations>
	
	<mx:DataGrid x="76" y="68" id="dGrid" dataProvider="{mydata}" width="427"
				 itemClick="selectRow(event)"
				 selectedIndex="0">
		<mx:columns>
			<mx:DataGridColumn headerText="Category" dataField="category"/>
			<mx:DataGridColumn headerText="Actual FY10" dataField="Actual_FY10"/>
			<mx:DataGridColumn headerText="Actual FY11" dataField="Actual_FY11"/>
			<mx:DataGridColumn headerText="Annualized FY11" dataField="Anualized_FY11"/>
		</mx:columns>
	</mx:DataGrid>
	
	
	
	
	<!--ColumnChart-->
	<mx:ColumnChart id="theColumnChart" 
					height="121" width="411"
					showDataTips="true" 
					selectionMode="single"
					type="clustered" y="238" x="76">
		<mx:horizontalAxis>
			<mx:CategoryAxis 
				dataProvider="{ac}" 
				categoryField="Years"/>
		</mx:horizontalAxis>
		
		<mx:verticalAxis>
			<mx:LinearAxis minimum="0" maximum="1500"/>
		</mx:verticalAxis>
		
		<mx:series>
			<mx:ColumnSeries 
				id="theColSeries"
				yField="Spend"
				xField="Years"
				stroke="{stroke0}"
				
				showDataEffect="slideIn"
				hideDataEffect="slideOut"/>
		</mx:series>
	</mx:ColumnChart>

</s:Application>

Select allOpen in new window