How do I use selectedItem from dropdown to populate linechart in FlashBuilder 4.6

Question

I am using FlashBuilder 4.6, coldfusion 9 and Sql Server 2005 to populate a line chart with one individual's data by year. This works fine if I use a fixed string in the data provider, but I want to select the individual by using a dropdown list of all available individuals. The individual name used for the linechart is the same format as the individuals in the dropdown. The flashbuilder data/service shows the fields as strings where the MS Sql Server tables show them as varchar(50).

Attached code shows getpool_ratings_yr1Result.token = pool_ratings_yr1Service.getpool_ratings_yr1('greenleaf') selecting individual 'greenleaf'. I want to replace this with the selectedItem from the dropdown to make the charts dynamic. I have tried replacing ('greenleaf') with ({dropdownList.selectedItem}) which didn't work, but maybe I need to trigger an event to make it work.

I am new to FlashBuilder and Flex, but have done lots of reading and have not found anything conclusive.

Any help would be very much appreciated. Thanks, Will

<?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"
               xmlns:pool_ratings_yr1service="services.pool_ratings_yr1service.*"
               xmlns:pool_playerservice="services.pool_playerservice.*"
               minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.FlexEvent;

            protected function linechart1_creationCompleteHandler(event:FlexEvent):void
            {
                getpool_ratings_yr1Result.token = pool_ratings_yr1Service.getpool_ratings_yr1('greenleaf');
            }


            protected function dropDownList_creationCompleteHandler(event:FlexEvent):void
            {
                getAllpool_playerResult.token = pool_playerService.getAllpool_player();
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:CallResponder id="getpool_ratings_yr1Result"/>
        <pool_ratings_yr1service:Pool_ratings_yr1Service id="pool_ratings_yr1Service"
                                                         fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                         showBusyCursor="true"/>
        <s:CallResponder id="getAllpool_ratings_yr1Result"/>
        <s:CallResponder id="getAllpool_playerResult"/>
        <pool_playerservice:Pool_playerService id="pool_playerService"
                                               fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                               showBusyCursor="true"/>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <mx:LineChart id="linechart1" x="234" y="97"
                  creationComplete="linechart1_creationCompleteHandler(event)"
                  dataProvider="{getpool_ratings_yr1Result.lastResult}" showDataTips="true">
        <mx:series>
            <mx:LineSeries id="lineSeries" displayName="Series 1" yField="avg_rating"/>
        </mx:series>
        <mx:horizontalAxis>
            <mx:CategoryAxis id="categoryAxis" categoryField="yr"/>
        </mx:horizontalAxis>
    </mx:LineChart>
    <mx:Legend dataProvider="{linechart1}"/>
    <s:DropDownList id="dropDownList" x="73" y="133"
                    creationComplete="dropDownList_creationCompleteHandler(event)"
                    labelField="lname">
        <s:AsyncListView list="{getAllpool_playerResult.lastResult}"/>
    </s:DropDownList>
</s:Application>

Answer 1

Try adding the function:

private function comboBoxChange():void
{
    var selectedName:String = dropDownList.selectedItem;
    getpool_ratings_yr1Result.token = pool_ratings_yr1Service.getpool_ratings_yr1(selectedName);

}

Then on your dropDownList add a change eventListener:

<s:DropDownList id="dropDownList" x="73" y="133"
                creationComplete="dropDownList_creationCompleteHandler(event)"
                labelField="lname"
                change="comboBoxChange()">