3 Replies Latest reply on Oct 1, 2010 12:36 AM by Huss58654

    Binding pie chart clickitem to a combo box

    Huss58654

      Hi flex gurus

       

      I would like to update a combo box when a pie wedge is clicked.

       

      The combo box offeres a range of agricultural industries to choose from; the pie chart shows the breakdown of these industries.

       

      There are two useful posts that closely relate to this. They are:

      - creating interactive charts

      - binding values to a comboBox

       

      So far I have done the following:

      - included the itemClick option in my pie chart

      - included an item click event handler in the AS block - pretty sure this is where I'm getting it wrong.

      - using the custom combo box component from the article above.

      (code below)

       

      My questions for now are, what am I doing wrong? How can I get it working? And,  how can I set a default value for the combo box, for when no pie wedge has been clicked?

       

      Your advice would be greatly appreciated.

       

       

              <mx:PieChart id="productChart2"
                   dataProvider="{productValues}" showDataTips="true" dataTipFunction="dtFunc" top="5" left="5" bottom="5" right="5"
                   itemClick="pieSelect_itemClickHandler(event)">

      <mx:series>
                      <mx:PieSeries field="Total" nameField="Product"
                           labelField="Product" labelPosition="inside">
                              <mx:showDataEffect>

       

       

                  import mx.charts.events.ChartItemEvent;
                   public function pieSelect_itemClickHandler(event:ChartItemEvent):void {
                       pieSelect = event.hd.item.Product;
                   }
                   currentTarget.selectedItem.@label
                   [Bindable]
                   public var pieSelect:String="";

       

       

              <mx:Label text="Industry:"  x="437" y="13"/>
               <local:VBComboBox id="productSelect" fillColors="[#767676, #c6c6c6, #ffffff, #c6c6c6]"
                   highlightAlphas="[0.3, 0.2]" fillAlphas="[1, 1, 1, 1]" themeColor="#767676"
                   creationComplete="onChangeProductSelect(event)" change="onChangeProductSelect(event)"
                   dataProvider="{productSets.descendants('productset')}" selectedValue="{pieSelect}"
                   labelField="@label" x="500" y="10" width="170"/>

        • 1. Re: Binding pie chart clickitem to a combo box
          Huss58654 Level 1

          Apologies for just dumping the code in there. Should I use the plain sytax hylighting in the future? 'code' in square brackets didn't work

          • 2. Re: Binding pie chart clickitem to a combo box
            Huss58654 Level 1

            A quick update:

             

            The item click handler works well. If I set up a text output reading off the pieSelect variable I get the output I thought I needed.

             

            Using the standard mx combobox component with the selectedIndex property, the words in the combo box changed with a click on the pie chart. The problem is that that's all it does, it doesn't activate the change.

             

            Any ideas, advice?

             

            P.S. The line 'currentTarget.selectedItem.@label' after the click handler shouldn't be there.

            • 3. Re: Binding pie chart clickitem to a combo box
              Huss58654 Level 1

              Ok it's not the best solution but it works.

               

              My solution was to:

               

              - add a variable in the array that the pie chart reads from, that relates to  the combobox index

              - Have the click handler for the pie chart pass the info to a number variable

              - have the click handler open the combo box

              - Have the combo box selectIndex property refer to the number variable with the pie chart info.

              - Use the 'open' property of the combo box and set it to the function you want to run.

               

              Here are a few snippets of code:

               

              //array that the pie chart reads off. This is in an action script block
                                  productValues = new ArrayCollection([
                                  {Product:"Grain", idName:"0", Total:Number(currSelected.itemData.@Grain)},
                                {Product:"Meat", idName:"1", Total:Number(currSelected.itemData.@Meat)},
                                {Product:"Dairy", idName:"2", Total:Number(currSelected.itemData.@Dairy)},
                                {Product:"Horticulture", idName:"3", Total:Number(currSelected.itemData.@Horticulture)},
                                {Product:"Prepared Food", idName:"4", Total:Number(currSelected.itemData.@Prepared)},
                                {Product:"Wine", idName:"5", Total:Number(currSelected.itemData.@Wine)},
                                {Product:"Seafood", idName:"6", Total:Number(currSelected.itemData.@Seafood)},
                                {Product:"Animal Fibre", idName:"7", Total:Number(currSelected.itemData.@Fibre)},
                                {Product:"Skins and Hides", idName:"8", Total:Number(currSelected.itemData.@Skins)},
              
              // Another relevant section of the AS block - combo box data source
                             [Bindable]
                             public var productSets:XML = new XML(
                                       
                                  <productsets>
                                       <productset label="Grain" id="Grain"/>
                                       <productset label="Meat" id="Meat"/>
                                       <productset label="Dairy" id="Dairy"/>
                                       <productset label="Horticulture" id="Horticulture"/>
                                       <productset label="Prepared_Foods" id="Prepared"/>
                                       <productset label="Wine" id="Wine"/>
                                       <productset label="Seafood" id="Seafood"/>
                                       <productset label="Animal_Fibre" id="Fibre"/>
                                       <productset label="Skins_and_Hides" id="Skins"/>
                                       </productsets>
                                                 ); 
              
              // Another relevant section of the AS block - item click handler
              
                             import mx.charts.events.ChartItemEvent;
                             public function pieSelect_itemClickHandler(event:ChartItemEvent):void { 
                                  productSelect.open();
                                  pieSelect = event.hitData.item.idName;
                                  
                             }
                             
                             [Bindable]
                             public var pieSelect:Number = 0;
              
              // Setting up the pie chart
              
              <mx:PieChart id="productChart2" 
                           dataProvider="{productValues}" showDataTips="true" dataTipFunction="dtFunc" top="5" left="5" bottom="5" right="5" 
                             itemClick="pieSelect_itemClickHandler(event)">
              
              
              // The combo box
              
                        <mx:ComboBox id="productSelect" fillColors="[#767676, #c6c6c6, #ffffff, #c6c6c6]" 
                             highlightAlphas="[0.3, 0.2]" fillAlphas="[1, 1, 1, 1]" themeColor="#767676"
                             creationComplete="onChangeProductSelect(event)" change="onChangeProductSelect(event)" open="onChangeProductSelect(event)"
                             dataProvider="{productSets.descendants('productset')}" selectedIndex="{pieSelect}"
                             labelField="@label" x="500" y="10" width="170"/>