Using Legend Colors to Populate DataGrid Backgrounds

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="onCreationComplete()"
	>
  <mx:Script><![CDATA[
  	import mx.graphics.SolidColor;
  	import mx.controls.Alert;
  	import mx.charts.LegendItem;
     import mx.collections.ArrayCollection;
     
     private var _myColor:SolidColor;
     
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Expense:"Taxes", Amount:2000},
        {Expense:"Rent", Amount:1000},
        {Expense:"Bills", Amount:100}
     ]);
     
     private function onCreationComplete():void {
		for (var i:int = 0; i<3; i++) {
		
			var legendItem:LegendItem = myLegend.getChildAt(i) as LegendItem;
			var color:SolidColor = legendItem.getStyle("fill") as SolidColor;
			switch (i) {
				case 0: lbl1.setStyle("color", color.color); break;
				case 1: lbl2.setStyle("color", color.color); break;
				case 2: lbl3.setStyle("color", color.color); break;
				default: break; 
			}
		}
     }
     
  ]]></mx:Script>
  
  <mx:Panel title="Pie Chart">
     <mx:PieChart id="myChart" 
        dataProvider="{expenses}" 
        showDataTips="true">
        <mx:series>
           <mx:PieSeries 
                field="Amount" 
                nameField="Expense" 
                labelPosition="callout"
           />
        </mx:series>
     </mx:PieChart>
     <mx:Legend id="myLegend" dataProvider="{myChart}"/>
     <mx:Label id="lbl1" text="Color of the first legenditem" />
     <mx:Label id="lbl2" text="Color of the second legenditem" />
     <mx:Label id="lbl3" text="Color of the third legenditem" />
  </mx:Panel>
</mx:Application>
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:

<mx:Script>
	<![CDATA[
 
        	public var LegendColorData:Array = new Array();
		[Bindable] public var pieChartA:Array;
		[Bindable] public var pieChartAC:ArrayCollection;
		public var pieDataTimer:Timer = new Timer(300, 1);
 
        	private function retrieveText(event:ResultEvent):void {
 
				if (String(event.result).length > 10000) {
					returnText.text = String(event.result).substring(0, 10000);
				} else {
					returnText.text = String(event.result);
				}
				jsonPosData = JSON.decode(String(event.result));
				var totalHoldingsRows:Number = Number(jsonPosData[0].totalRows);
				
				pieChartA = new Array();
 
				for (var i:Number=1; i<=totalHoldingsRows; i++) {
					var myPieObj:Object = new Object();
					myPieObj.Name = jsonPosData[i].SecurityDescrip;
					myPieObj.Ticker = jsonPosData[i].Ticker;
					myPieObj.Cusip = jsonPosData[i].Cusip;
					myPieObj.MarketValue = Number(jsonPosData[i].MarketValue);
					
					pieChartA.push(myPieObj);
				}
				
				
				pieChartAC = null;
				pieChartAC = new ArrayCollection(pieChartA);
				
				pieDataTimer.addEventListener(TimerEvent.TIMER_COMPLETE, getColorData);
				pieDataTimer.start();
				
        	}
 
        	public function getColorData(evt:TimerEvent = null):void {
				
				LegendColorData = new Array();
				
				for (var j:int=0; j<pielegend.numChildren; j++) {
					var thisItem:LegendItem = pielegend.getChildAt(j) as LegendItem;
					var thisColor:SolidColor = thisItem.getStyle("fill") as SolidColor;
					var thisCusip:String = pieChartA[j].Cusip;
					
					LegendColorData[thisCusip] = thisColor.color;
				}
				
				posDataGrid.invalidateList();
				
        	}
 
	]]>
</mx:Script>
 
		<mx:AdvancedDataGrid id="posDataGrid" designViewDataType="flat" width="100%" height="320" paddingBottom="0"
			defaultLeafIcon="{null}" folderClosedIcon="{null}" folderOpenIcon="{null}" itemDoubleClick="selectGrid(event, posDataGrid)"
			doubleClickEnabled="true" allowMultipleSelection="true" selectionMode="multipleRows" paddingTop="1">
			<mx:dataProvider>
				<mx:HierarchicalData id="gridProvider" source="{holdingsArrayCollection}" childrenField="TaxLots"/>
			</mx:dataProvider>
			<mx:columns>
				<mx:AdvancedDataGridColumn headerText="Acct" dataField="MWNumber" width="60"/>
				<mx:AdvancedDataGridColumn headerText="Legend" id="legendcol" width="70" visible="false" itemRenderer="components.LegendRenderer"/>
				<mx:AdvancedDataGridColumn headerText="Security Name" dataField="SecurityDescrip" width="200"/>
				<mx:AdvancedDataGridColumn headerText="Cusip" dataField="Cusip" width="80"/>
				<mx:AdvancedDataGridColumn headerText="Shares" dataField="Shares" id="sharescolumn" width="80" formatter="{Application.application.numberFormatter}"/>
				<mx:AdvancedDataGridColumn headerText="%" dataField="PercentPort" width="40"/>
				<mx:AdvancedDataGridColumn headerText="Price" dataField="Price" width="70"/>
				<mx:AdvancedDataGridColumn headerText="Market Value" dataField="MarketValue" width="150"/>
				<mx:AdvancedDataGridColumn headerText="Cost Basis" dataField="CostBasis" width="150"/>
				<mx:AdvancedDataGridColumn headerText="Unr. G/L" dataField="UnrealizedGL" width="150"/>
			</mx:columns>
		</mx:AdvancedDataGrid>
 
 
<!-------------Following is LegendRenderer.mxml---------------->
 
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2" 
	updateComplete="backgroundColor()">
	
	<mx:Script>
		<![CDATA[
			import mx.core.Application;
			import modules.MainPositionsModule;
			
			public var posModule:MainPositionsModule = MainPositionsModule(Application.application.posloader.child);
 
			public function backgroundColor():void {
 
				colorcanvas.setStyle("backgroundColor", posModule.LegendColorData[data.Cusip]);
			}
			
		]]>
	</mx:Script>
	
	
	<mx:Canvas width="100%" height="100%" id="colorcanvas" cornerRadius="6" borderStyle="solid" borderThickness="0">
	</mx:Canvas>
</mx:VBox>
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104: