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>

score 0 · Accepted Answer · answered May 09 '12 at 08:26

0

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()">

answered May 09 '12 at 08:26

Dom

2,569
1
18
28

Thanks for the advice, Dom. I tried this without changing any other code and the line chart data line disappeared when I selected a name from the dropdown. Do I need to replace anything in this line?: getpool_ratings_yr1Result.token = pool_ratings_yr1Service.getpool_ratings_yr1('greenleaf'); – Will Maynard May 09 '12 at 12:20
getpool_ratings_yr1Result.token = pool_ratings_yr1Service.getpool_ratings_yr1('greenleaf'); is what your chart will start out with. If you dont want it to start with anything until a name is selected you can take that out all together. As for not getting data when you select a name, add "import mx.controls.Alert;" and inside of the comboBoxChange function add "Alert.show(dropDownList.selectedItem)". If the alert shows "object object" then change var selectedName:String = dropDownList.selectedItem; to be var selectedName:String = dropDownList.selectedItem.lname; and see what happens. – Dom May 09 '12 at 12:25
That last change var selectedName:String = dropDownList.selectedItem.lname; made a difference. I now get a changed data line, but with a popup box showing "[object Playername_returntype]" which is the name of return type of the dropdown lname. Once I click okay on this box all looks good. Is there a way to suppress this box? This is getting exciting. – Will Maynard May 09 '12 at 13:12
lol, glad you are excited. The popUp was only for testing purposes. You can now remove the "import mx.controls.Alert;" line and the "Alert.show(dropDownList.selectedItem)" line. – Dom May 09 '12 at 15:26
That worked! I could only take the "Alert.show(dropDownList.selectedItem)" line out since removing "import mx.controls.Alert;" caused errors elsewhere in the code that referenced "Alert....". I had to test several times (using the run button) and keep clearing cache before it finally worked. Any idea why it took several tests? Thanks so much for your help, Dom. – Will Maynard May 09 '12 at 19:08
If you were using IE, there is no telling, its stupid. If you arent using Alert for your actual production build you should take all of them out along with the import. Keeping unnecessary imports out of your code will help keep load times down. You are welcome for the the help. Feel free to mark my answer as correct :) – Dom May 09 '12 at 21:01
Dom, I am new to this site and am trying to find out how to mark the answer as correct. I will definitely mark it so as soon as I figure out how to. – Will Maynard May 10 '12 at 02:34

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

1 Answers1