Using multiple axes and animations in a flex chart

Question

I have to show a line chart with two series, each with "date-value" since the dates can be very far apart in each serie they have their own horizontal axis.
The problem is when i add an animation to the series, the animations start looping and never stop.
My question is: Am i doing something wrong? or is this a bug in flex chart? does anyone know how to solve this problem?
Here is a sample code: `

<mx:Script>
 <![CDATA[
  import mx.controls.Alert;
  import mx.collections.ArrayCollection;

  [Bindable]
  private var arr1:ArrayCollection = new ArrayCollection([
   {date_1:"01/2008", value_1:2, date_2:"01/2007", value_2:4},
   {date_1:"02/2008", value_1:5, date_2:"02/2007", value_2:7},
   {date_1:"03/2008", value_1:4, date_2:"03/2007", value_2:3},
   {date_1:"04/2008", value_1:7, date_2:"04/2007", value_2:5}]);

  [Bindable]
  private var arr2:ArrayCollection = new ArrayCollection([
   {date_1:"01/2008", value_1:4, date_2:"01/2007", value_2:7},
   {date_1:"02/2008", value_1:3, date_2:"02/2007", value_2:5},
   {date_1:"03/2008", value_1:5, date_2:"03/2007", value_2:2},
   {date_1:"04/2008", value_1:4, date_2:"04/2007", value_2:5}]);

  private var temp:Boolean = false;

  private function switchGraf():void{
   if( temp){
    series_1.dataProvider = arr1;
    series_2.dataProvider = arr1;

   } else {
    series_1.dataProvider = arr2;
    series_2.dataProvider = arr2;
   }
   temp = !temp;
  }
 ]]>
</mx:Script>

<mx:SeriesSlide direction="right" duration="1000" id="aniShow"/>
<mx:SeriesSlide direction="left" duration="1000" id="aniHide"/>

<mx:ComboBox change="switchGraf()">
 <mx:String>one</mx:String>
 <mx:String>two</mx:String>
</mx:ComboBox>

<mx:LineChart>
 <mx:series>
  <mx:LineSeries id="series_1" yField="value_1" dataProvider="{arr1}" showDataEffect="aniShow" hideDataEffect="aniHide">
   <mx:horizontalAxis>
    <mx:CategoryAxis id="axis_1" categoryField="date_1"/>
   </mx:horizontalAxis>
  </mx:LineSeries>
  <mx:LineSeries id="series_2" yField="value_2" dataProvider="{arr1}">
   <mx:horizontalAxis>
    <mx:CategoryAxis id="axis_2" categoryField="date_2"/>
   </mx:horizontalAxis>
  </mx:LineSeries>
 </mx:series>
 <mx:verticalAxis>
  <mx:LinearAxis minimum="0" maximum="10"/>
 </mx:verticalAxis>
 <mx:horizontalAxisRenderers>
  <mx:AxisRenderer placement="bottom" axis="{axis_1}"/>
  <mx:AxisRenderer placement="top" axis="{axis_2}"/>
 </mx:horizontalAxisRenderers>
</mx:LineChart>

`

Any ideas?

Answer 1

Well, i don't have an answer, i don't know why this is happening. But i found a solution to the problem:
You have to remove the effect from the series when they end and then you need to add them back when you change the data provider of the series, like so:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">

<mx:Script>
 <![CDATA[
  import mx.controls.Alert;
  import mx.collections.ArrayCollection;

  [Bindable]
  private var arr1:ArrayCollection = new ArrayCollection([
   {date_1:"01/2008", value_1:2, date_2:"01/2008", value_2:4},
   {date_1:"02/2008", value_1:5, date_2:"02/2008", value_2:3},
   {date_1:"03/2008", value_1:4, date_2:"03/2008", value_2:5},
   {date_1:"04/2008", value_1:7, date_2:"04/2008", value_2:4}]);

  [Bindable]
  private var arr2:ArrayCollection = new ArrayCollection([
   {date_1:"01/2007", value_1:4, date_2:"01/2007", value_2:7},
   {date_1:"02/2007", value_1:7, date_2:"02/2007", value_2:5},
   {date_1:"03/2007", value_1:3, date_2:"03/2007", value_2:2},
   {date_1:"04/2007", value_1:5, date_2:"04/2007", value_2:5}]);


  private var temp:Boolean = false;


  private function addAnimacion():void{
   serie_1.setStyle("showDataEffect", "aniShow");
   serie_2.setStyle("showDataEffect", "aniShow");
  }

  private function removeAnimacion():void{
   serie_1.setStyle("showDataEffect", "");
   serie_2.setStyle("showDataEffect", "");
  }

  private function switchGraf():void{

   addAnimacion();

   if( temp){
    serie_1.dataProvider = arr1;
    serie_2.dataProvider = arr1;

   } else {
    serie_1.dataProvider = arr2;
    serie_2.dataProvider = arr2;
   }

   temp = !temp;
  }
 ]]>
</mx:Script>

<mx:WipeRight duration="1000" id="aniShow" showTarget="true" effectEnd="removeAnimacion();"/>

<mx:ComboBox change="switchGraf()">
 <mx:String>one</mx:String>
 <mx:String>two</mx:String>
</mx:ComboBox>

<mx:LineChart>
 <mx:series>
  <mx:LineSeries id="serie_1" yField="value_1" dataProvider="{arr1}">
   <mx:horizontalAxis>
    <mx:CategoryAxis id="ejeAct" categoryField="date_1"/>
   </mx:horizontalAxis>
  </mx:LineSeries>
  <mx:LineSeries id="serie_2" yField="value_2" dataProvider="{arr1}">
   <mx:horizontalAxis>
    <mx:CategoryAxis id="ejeAnt" categoryField="date_2"/>
   </mx:horizontalAxis>
  </mx:LineSeries>
 </mx:series>
 <mx:verticalAxis>
  <mx:LinearAxis minimum="0" maximum="10"/>
 </mx:verticalAxis>
 <mx:horizontalAxisRenderers>
  <mx:AxisRenderer placement="bottom" axis="{ejeAct}"/>
  <mx:AxisRenderer placement="top" axis="{ejeAnt}"/>
 </mx:horizontalAxisRenderers>
</mx:LineChart>

Hope this help someone!