0 Replies Latest reply on Jan 11, 2011 11:17 PM by Tanu Jain

    Problem with seriesInterpolate effect on change of dataprovider

    Tanu Jain Level 2

      Hello,

       

      I have following code, where series interpolate effect is applied on the bubbleSeries. I see a small bubble on top-left corner of the application when

      1. app is loaded

      2. animation is played.. which is actually a timer which swaps the data provider of series on tick of a timer

       

       

      <?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