Event Handling to Toggle Between Graphs

Question

I am trying to create a user interface in which a container at the top of the screen contains a drop down menu that will list a few graphs. I want the user to be able to select a graph from this list and then have the selected graph displayed in a separate container from the one in which the drop down menu exists.
I am having a hard time understanding how to implement this because I don't understand how the actionscript code and the MXML code will need to interact to achieve this result. I have created the drop down list, the container in which I want the graphs to display, and the graphs themsevles and I need guidance on how to link them all together?
In Flash/Actionscript, how do I create an event listener that will select different graphs based on the user selecting different options from the drop down menu? In Flash/Actionscript, how do I display a different graph in the container based on the selection made in the drop down menu?
This would be very easy for me to do in Java and for some reason it seems incredibly difficult with Flash/Actionscript, since I don't know the functionality of the programs. Can anyone please explain how to do this or point me towards tutorials that explain how?
Thank you.

Answer 1

Ok, I'm not sure if this is the best way to go about this situation but I have instantiated an instance of both graphs in the middle container that I wish to use to display whichever graph is selected by the user. I have also created two states so that only one graph appears at a time.
Graph 1 is excluded from State 2.
Graph 2 is excluded from State 1.
I am trying to get this working with the following code:
     <fx:Script>
          <![CDATA{
                    import spark.events.IndexChangeEvent;
                    protected function graphSelectionHandler(event:IndexChangeEvent):void
                              //I don't know what needs to go here
          ]]>
     </fx:Script>
     <fx:Declarartions>
          <s:XMLListCollection id="graphTypes"
               <s:list>
                    <s:ArrayList>
                         <fx:Object name="graph1"
                                         state="state1"/>
                         <fx:Object name="graph2"
                                         state="state2"/>
                    </s:ArrayList>
               </s:list>
          </s:XMLListCollection>
     </fx:Declarations>
    <!--Top Container -->
      <s:SkinnableContainer/>
      <s:DropDownList id="displayList"
                               dataProvider="{graphTypes}"
                               labelField="name"
                               change="graphSelectionHandler(event)"/>
     </s:SkinnableContainer>
     <!--Middle Container -->
      <s:SkinnableContainer/>
           <s:components:graph1 excludeFrom="state2"
 />           <s:components:graph2 excludeFrom="state1"/>
      </s:SkinnableContainer>
I don't know how to change the state based on the current selection from the drop down menu. I have tried:
currentState=event.currentTarget.selectedItem.state;
but I was given an error. Can anyone explain how I can fix this?