title: Why does percent width and percent height on a Cartesian Chart ruin the showDataEffect style?
body: <p>Been kicking myself on this all day and narrowed it down (after removing everything but the bare necessities) to: when percentWidth and percentHeight are specified for my CartesianChart component, the data effect I apply to my series does not complete. My desired effect is for the data effects on my series to continue while the container is being resized. Any help would be greatly appreciated.</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;!-- charts/ApplyEffectsAsStyles.mxml --&gt;
  &lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                  creationComplete="init()"&gt;
      &lt;mx:Script&gt;
      &lt;![CDATA[
          import mx.charts.chartClasses.CartesianChart;
          import mx.charts.chartClasses.Series;
          import mx.charts.effects.SeriesInterpolate;
          import mx.charts.series.ColumnSeries;
          import mx.charts.series.LineSeries;
          import mx.collections.ArrayCollection;
          import mx.effects.Move;
          import mx.effects.Parallel;
          import mx.effects.Resize;
          import mx.effects.easing.Exponential;
  
          [Bindable]
          public var lineItems:ArrayCollection = new ArrayCollection([
              {item: 2400},
              {item: 2256},
              {item: 3200},
              {item: 2453},
              {item: 3350}
          ]);
  
          [Bindable]
          public var columnItems:ArrayCollection = new ArrayCollection([
              {item: 2111},
              {item: 3300},
              {item: 3000},
              {item: 2100},
              {item: 3200}
          ]);
  
          private var parallel:Parallel;
          private var myChart:CartesianChart;
  
          public function init():void {
              instantiateChart();
              addSeriesToChart();
              addDataEffectsToChartSeries();
              addChartToParent();
              resize(750, 750);
              callLater(setDataProviders);
          }
  
  
          public function instantiateChart():void
          {
              myChart = new CartesianChart();
              // PROBLEM LINES: this kills the data effect
              //myChart.percentHeight = 100;
              //myChart.percentWidth = 100;
          }
  
          public function addChartToParent():void
          {
              if(myChart != null)
              {
                  myContainer.removeAllChildren();
                  myContainer.addChild(myChart);
              }
          }
  
          public function addDataEffectsToChartSeries():void
          {
              for each(var series:Series in myChart.series)
              {
                  trace("added a data effect");
                  series.setStyle("showDataEffect", interpolateIn);
              }
          }
  
          public function addSeriesToChart():void
          {
              var lineSeries:LineSeries = new LineSeries();
              lineSeries.yField = "item";
  
              var columnSeries:ColumnSeries = new ColumnSeries();
              columnSeries.yField = "item";
  
              myChart.series = [columnSeries, lineSeries];
          }
  
          private function setDataProviders():void
          {
              myChart.series[0].dataProvider = columnItems;
              myChart.series[1].dataProvider = lineItems;
          }
  
          public function resize(w:Number, h:Number):void
          {
              trace("resizing");
              if(parallel != null &amp;&amp; parallel.isPlaying)
                  parallel.pause();
  
              parallel = new Parallel();
              addResizeAndMoveToParallel(parallel, w, h, 100, 10);
              parallel.play();
          }
  
          private function addResizeAndMoveToParallel(parallel:Parallel, widthTo:Number, heightTo:Number, xTo:Number, yTo:Number):void
          {
              myContainer.x = 0;
              myContainer.y = 0;
  
              var move:Move = new Move(myContainer);
              move.xTo = xTo;
              move.yTo = yTo;
              move.startDelay = 500;
              move.easingFunction = Exponential.easeOut;
              move.duration = 2000;
  
              var resize:Resize = new Resize(myContainer);            
  
              resize.widthTo = widthTo;
              resize.heightTo = heightTo;
              resize.startDelay = 500;
              resize.easingFunction = Exponential.easeOut;
              resize.duration = 2000;
  
              parallel.addChild(move);
              parallel.addChild(resize);
          }       
      ]]&gt;
      &lt;/mx:Script&gt;
  
      &lt;mx:SeriesInterpolate id="interpolateIn" duration="0" minimumElementDuration="2000" elementOffset="100" /&gt;
      &lt;mx:Canvas width="100%" height="100%"&gt;
          &lt;mx:Panel id="myContainer" title="Column Chart with Series Interpolate Effect" /&gt;
      &lt;/mx:Canvas&gt;
  &lt;/mx:Application&gt;
  </code></pre>