3 Replies Latest reply on Jan 11, 2011 11:09 PM by Tanu Jain

    Problem with Filter function in bubbleSeries

    Tanu Jain Level 2

      Hi,

       

      I have a bubbleSeries. Its dataprovider has item values having both blank('') and negative values. I don't want to show such values, hence I have used a filter function in which a check is made and adds those items which are valid.
      I have data for various years so I have used interpolation effect.

       

      While playing the animation or viewing data for different time series, a small bubble is displayed on top-left corner of the chart which is not part of the valid data.

       

      If I dont use a filter function, I dont get this small bubble on top-left corner. But as per my requirements, I need to have a filter function.

       

      Please help me in guiding through the reason of such behavior of filter function.

       

      Thanks,
      Tanu

        • 1. Re: Problem with Filter function in bubbleSeries
          Gregory Lafrance Level 6

          Its often good to boil your code down to a minimal yet complete application that still exhibits the issue.

           

          While boiling down the code, you may discover the issue yourself, but at least you will have a minimal yet complete code sample to post here, and then a solution will come very soon in most cases.

          • 2. Re: Problem with Filter function in bubbleSeries
            Tanu Jain Level 2

            I have used following filter function:


            public function myFilterFunction(cache:Array):Array
                        {
                            var filteredCache:Array=[];
                            var n:int = cache.length; 
                            for(var i:int = 0; i < n; i++)
                            {
                                var isValid:Boolean = true;
                                var bubbleSeriesItem:BubbleSeriesItem = BubbleSeriesItem(cache[i]);
                                var bubbleData:BubbleData = bubbleSeriesItem.item as BubbleData;                   
                           
                                 if(bubbleData.x == ""  || bubbleData.y == "" ||bubbleData.z == ""  )                
                                    isValid = false;
                               
                                if(isValid)
                                    filteredCache.push(bubbleSeriesItem);                     
                                   
                            }
                        }

             

            I have put following series interpolate effect on the bubbleSeries.

                <mx:SeriesInterpolate id="interpolateEffect" duration="1000" easingFunction="Linear.easeOut" elementOffset="0"/>   

             

            --

            Tanu

            • 3. Re: Problem with Filter function in bubbleSeries
              Tanu Jain Level 2

              Hi Gregory,

               

              Please find below the sample code which shows a small bubble on top-left corner when animation is played. We need to click on "play" button to start the animation and "stop" button to stop the same.

               

              <?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"
                             minWidth="955" minHeight="600"
                             creationComplete="init()" >
                  <fx:Declarations>
                     <mx:SeriesInterpolate id="seriesEffect" duration="1000"  easingFunction="Linear.easeIn"/>
                  </fx:Declarations>
                
                  <fx:Script>
                      <![CDATA[
                          import mx.charts.series.items.BubbleSeriesItem;
                          import mx.collections.ArrayCollection;
                          import mx.effects.easing.*;
                          import mx.events.FlexEvent;
                        
                          private var oTimer:Timer =  new Timer(1000);
                          private var currentDp:int = 1;
                        
                          [Bindable]
                          public var expenses1:ArrayCollection = new ArrayCollection([          
                            
                              { Profit:10, Expenses:10, Amount:''},
                              { Profit:'', Expenses:50, Amount:''},
                              { Profit:'', Expenses:41.6, Amount:''},              
                              { Profit:'', Expenses:43.6, Amount:''},
                              { Profit:'', Expenses:86, Amount:''},
                              { Profit:'', Expenses:11.4, Amount:''},              
                              { Profit:'', Expenses:99.2, Amount:''},
                              { Profit:'', Expenses:12.8, Amount:''},
                              { Profit:'', Expenses:'', Amount:10}
                            
                          ]);
                        
                          [Bindable]
                          public var expenses2:ArrayCollection = new ArrayCollection([
                              { Profit:30, Expenses:'', Amount:10},
                            
                              { Profit:95, Expenses:-90, Amount:50},
                              { Profit:20, Expenses:60, Amount:23},
                              { Profit:67, Expenses:'', Amount:56},
                              { Profit:-23, Expenses:56, Amount:34},
                              { Profit:30, Expenses:'', Amount:10},      
                              { Profit:95, Expenses:-90, Amount:50},
                              { Profit:70, Expenses:30, Amount:93},
                              { Profit:22, Expenses:'', Amount:10}      
                          ]);
                        
                          private function init():void
                          {
                              oTimer.addEventListener(TimerEvent.TIMER,onTick);
                              bubbleSeries.dataProvider = expenses1;
                          }
                        
                         public function onTick(event:TimerEvent):void
                          {
                              if(currentDp == 1)
                              {
                                  bubbleSeries.dataProvider = expenses2;
                                  currentDp = 2;
                              }
                              else
                              {
                                  bubbleSeries.dataProvider = expenses1;
                                  currentDp = 1;
                              }      
                          }
                        
                          private function clickHandler():void
                          {
                              oTimer.start();
                          }
                        
                         public function myFilterFunction(cache:Array):Array
                          {
                              var filteredCache:Array=[];
                              var n:int = cache.length;
                              for(var i:int = 0; i < n; i++)
                              {
                                  var isValid:Boolean = true;
                                  var bubbleSeriesItem:BubbleSeriesItem = BubbleSeriesItem(cache[i]);
                                
                                  if( bubbleSeriesItem.item.Profit == "" || bubbleSeriesItem.item.Expenses == "" || bubbleSeriesItem.item.Amount == "")
                                      isValid= false;
                                                    
                                  if(isValid)              
                                      filteredCache.push(bubbleSeriesItem);                   
                              }
                              return filteredCache;
                          }
                      ]]>
                  </fx:Script>
                  <mx:Button x="10" label="Play" click="clickHandler()"/>
                  <mx:Button x="250" label="stop" click="{oTimer.stop()}"/>      
                
                  <mx:VBox x="10" y="100" width="80%" height="70%" label="Bubble" >      
                      <mx:BubbleChart id="bubbleChart" width="100%" height="100%" showDataTips="true"
                                      minRadius="5" maxRadius="15">
                          <mx:series>
                              <mx:BubbleSeries  id="bubbleSeries"
                                                showDataEffect="{seriesEffect}"
                                                xField="Profit" yField="Expenses" radiusField="Amount"
                                                filterFunction="myFilterFunction"
                                                />
                          </mx:series>
                        
                          <mx:horizontalAxis>
                              <mx:LinearAxis id="horLinAxis"  minimum="-100" maximum="100" />      
                          </mx:horizontalAxis>
                        
                          <mx:verticalAxis>
                              <mx:LinearAxis id="verLinAxis" minimum="-100" maximum="100" />
                          </mx:verticalAxis>
                      </mx:BubbleChart>
                  </mx:VBox>
              </s:Application>

               


              Please help.

               


              Thanks,

               

              Tanu