Updating charts and datagrids based on selection

[PegLeg7]

I am trying to find some documentation and samples explaining how I can pick something in a combobox and have it populate a series of datagrids and charts.

OUTLINE:

A.  Using an XML table of all municipalities in our region populate a combobox.  Then have the user select the municipality they are interested in.

B.Take a census table that is in XML format and by using HTTPServices read it into Flex and then based on what municipality the user selected populate a datagrid and variety of charts with data pertaining to the muni.

I know it is done because I see it all the time and took a class last week where it was shown.  Unfortunately it was the last day of the class and time was running out so we just got a brief overview of this.

I would greatly appriciate anyone who can point me to samples and documentation whether it be online or in books.  And I should mention that terminology is still an issue.  Am I attempting to do a custom event or what?

The code below all works.  What I mean I am successfully populating the combobox and the datagrid with the appropriate data.  I am just not able to get the two communicating with each other.  In other words the datagrid is showing the entire table and ignoring the combobox.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="initApp()">

<mx:Script>
  <![CDATA[
   import mx.rpc.events.*;
   import mx.controls.*;
   import mx.charts.*;
   import mx.collections.*;
  
   [Bindable]
   private var acMuni:ArrayCollection = new ArrayCollection;
   [Bindable]
   private var acCity:ArrayCollection = new ArrayCollection;
  
   private function initApp():void {
    muniHS.send();
    cityHS.send();
   }
  
   private function eHandler(e:ResultEvent):void {
    acMuni = e.result.GetAllMUNIS.MUNIS;
   }
  
   private function fHandler(e:FaultEvent):void {
    var faultInfo:String="fault code: "+ e.fault.faultCode +"\n\n";
    faultInfo+="fault string: "+e.fault.faultString+"\n\n";
    mx.controls.Alert.show(faultInfo,"Fault Information");
   
    var eventInfo:String="event target: "+e.target+"\n\n";
    eventInfo+="event type: "+e.type+"\n\n";
    mx.controls.Alert.show(eventInfo,"Event Information");
   }

   private function eCityHandler(e:ResultEvent):void {
    this.acCity = e.result.GetCITIES.CITIES;
   }
  ]]>
</mx:Script>

<mx:HTTPService id="muniHS"
  url="data/GetAllMunis.xml"
  result="eHandler(event)"
  fault="fHandler(event)"
  showBusyCursor="true"/>
 
<mx:HTTPService id="cityHS"
  url="data/CityNames.xml"
  resultFormat="object"
  result="eCityHandler(event)"
  fault="fHandler(event)"
  showBusyCursor="true"/>
 
<mx:Panel width="100%" height="50%"
  paddingBottom="10"
  paddingLeft="10"
  paddingRight="10"
  paddingTop="10" title="DataGrid">
 
<mx:ComboBox id="muniCB"
  dataProvider="{acCity}"
  prompt="Select a Municipality"
  labelField="city"/>
 
  <mx:DataGrid id="dg"
   width="100%"
   height="100%"
   dataProvider="{acMuni}">
   <mx:columns>
    <mx:DataGridColumn headerText="municipality" dataField="city"/>
    <mx:DataGridColumn dataField="year"/>
    <mx:DataGridColumn headerText="month" dataField="month_no"/>
    <mx:DataGridColumn headerText="labor force" dataField="laborforce"/>
    <mx:DataGridColumn dataField="employed"/>
    <mx:DataGridColumn dataField="unemployed"/>
    <mx:DataGridColumn headerText="unemployment rate" dataField="unemp_rate"/>
    <mx:DataGridColumn headerText="tract" dataField="geogkey"/>
    <mx:DataGridColumn headerText="extended tract" dataField="geogkeyx"/>
   </mx:columns>
  </mx:DataGrid>
</mx:Panel>
</mx:Application>

Thanks for any help you can provide

Richard Krell

[Former Community Member · Accepted solution]

If this post answers your querstion or helps, please mark it as such.

First, use XMLListCollection for the data for the ConboBox and for the Muni result handler xlcMuni (instead of acMuni).

Here is a simplified version of your app with the answer. It uses e4x syntax for filtering.

http://livedocs.adobe.com/flex/3/html/help.html?content=13_Working_with_XML_03.html

--------------- CityNames.xml ----------------

<?xml version="1.0" encoding="utf-8"?>
<CITIES>
  <city>Chicago</city>
  <city>New York</city>
  <city>Boston</city>
</CITIES>

---------- GetAllMunis.xml ------------

<?xml version="1.0" encoding="utf-8"?>
<MUNIS>
  <muni>
    <city>Chicago</city>
    <year>1866</year>
  </muni>
  <muni>
    <city>New York</city>
    <year>1872</year>
  </muni>
  <muni>
    <city>Boston</city>
    <year>1756</year>
  </muni>
</MUNIS>

------------- MainApp.mxml -------------------

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  creationComplete="muniHS.send();cityHS.send();">
  <mx:Script>
    <![CDATA[
      import mx.events.ListEvent;
      import mx.rpc.events.*;
      import mx.controls.*;
      import mx.charts.*;
      import mx.collections.*;
 
      [Bindable] private var xlcMuni:XMLListCollection = new XMLListCollection;
      [Bindable] private var xlcCity:XMLListCollection = new XMLListCollection;
      [Bindable] private var xlcDG:XMLListCollection = new XMLListCollection;
 
      private function eHandler(e:ResultEvent):void {
        this.xlcMuni = new XMLListCollection(e.result..muni);
      }
 
      private function eCityHandler(e:ResultEvent):void {
        this.xlcCity = new XMLListCollection(e.result.city);
      }
     
      private function populateDG(evt:ListEvent):void{
        var temp:XMLList = xlcMuni.copy();
        xlcDG = new XMLListCollection(temp.(city == ComboBox(evt.currentTarget).selectedItem));
      }
    ]]>
  </mx:Script>
  <mx:HTTPService id="muniHS" resultFormat="e4x"
    url="data/GetAllMunis.xml" useProxy="false"
    result="eHandler(event)"/>
  <mx:HTTPService id="cityHS" url="data/CityNames.xml"
    resultFormat="e4x" result="eCityHandler(event)"/>
  <mx:Panel width="100%" height="50%" title="DataGrid">
    <mx:ComboBox id="muniCB" dataProvider="{xlcCity}"
      prompt="Select a Municipality" labelField="city"
      change="populateDG(event)"/>
    <mx:DataGrid id="dg" width="100%" height="100%"
      dataProvider="{xlcDG}">
      <mx:columns>
        <mx:DataGridColumn headerText="municipality" dataField="city"/>
        <mx:DataGridColumn dataField="year"/>
      </mx:columns>
    </mx:DataGrid>
  </mx:Panel>
</mx:Application>

[PegLeg7]

Greg,

that worked great so I wanted to thank you for the assistance.  That was a little strange.  I had just finished up 1 1/2 weeks of training in a Adobe training center and they never mentioned XMLListCollection.  All we worked with was the ArrayCollection.

But this is something nice to know.  Again thanks for that answer and the e4x tip.