1 Reply Latest reply on Jan 25, 2007 9:57 AM by ur_dtrain

    Charting effects issue

    Proeliata
      Hi everyone,

      I'm writing some software that makes use of Flex charting. I really like the look that the Flex SeriesZoom class provides, but I am having a problem--this works fine when I change the dataProvider, but I am having trouble in cases where I try and change the series itself. For example:

      quote:

      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" >

      <mx:Script>
      <![CDATA[
      import mx.charts.series.LineSeries;

      import mx.collections.ArrayCollection;
      import mx.events.FlexEvent;
      import mx.charts.chartClasses.Series;

      [Bindable]
      private var expensesAC:ArrayCollection = new ArrayCollection( [
      { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450, Net: 4206},
      { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600, Net: 4523},
      { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300, Net: 2936 },
      { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900, Net: 5892 },
      { Month: "May", Profit: 2400, Expenses: 575, Amount: 500, Net: 3478 } ]);

      private function changeData():void{
      var ser:Array = [];
      var ls:LineSeries = new LineSeries();
      ls.yField = "Net";
      ls.displayName = "Net";
      ls.setStyle("removedEffect", eff);
      ls.setStyle("showDataEffect", eff);
      ls.setStyle("hideDataEffect", eff);
      ls.setStyle("addedEffect", eff);
      ser[0] = ls;
      linechart.series = ser;
      }
      ]]>
      </mx:Script>

      <mx:SeriesZoom id="eff" relativeTo="chart" elementOffset="20" minimumElementDuration="200" duration="1000"/>
      <mx:Panel title="LineChart and AreaChart Controls Example"
      height="100%" width="100%" layout="horizontal" click="changeData()">

      <mx:LineChart id="linechart" height="100%" width="45%"
      paddingLeft="5" paddingRight="5"
      showDataTips="true" dataProvider="{expensesAC}">

      <mx:series>
      <mx:LineSeries yField="Profit" displayName="Profit" showDataEffect="{eff}" hideDataEffect="{eff}" removedEffect="{eff}"/>
      <mx:LineSeries yField="Expenses" displayName="Expenses" showDataEffect="{eff}" hideDataEffect="{eff}" removedEffect="{eff}"/>
      <mx:LineSeries yField="Amount" displayName="Amount" showDataEffect="{eff}" hideDataEffect="{eff}" removedEffect="{eff}"/>
      </mx:series>
      </mx:LineChart>

      <mx:Legend dataProvider="{linechart}"/>

      </mx:Panel>
      </mx:Application>


      In the above case, the swf throws an exception upon clicking on the chart which looks as follows:
      quote:

      RangeError: Error #2006: The supplied index is out of bounds.
      at flash.display::DisplayObjectContainer/addChildAt()
      at mx.core::UIComponent/ http://www.adobe.com/2006/flex/mx/internal::$addChildAt()
      at mx.core::UIComponent/addChildAt()
      at mx.effects::EffectManager$/::removedEffectHandler()
      at Function/ http://adobe.com/AS3/2006/builtin::apply()
      at mx.core::UIComponent/::callLaterDispatcher2()
      at mx.core::UIComponent/::callLaterDispatcher()
      at flash.utils::Timer/flash.utils:Timer::_timerDispatch()
      at flash.utils::Timer/flash.utils:Timer::tick()


      I assume that this is because I originally have 3 LineSeries items and then I change it to only 1. I had thought that I should be able to switch the series without problems by simply setting my chart's series property, but apparently that does not work. What would be the proper way of doing this?

      To continue, I decided to try out creating three new LineSeries to replace the old ones so that I could test the removeEffect of the old ones. I no longer got the exception above, but instead of zooming out, the series zoomed in and then disappeared off the chart. I attempted using the dispatchEvent(new Event("hideData")) for each series before removing it in hopes of getting them to zoom out instead, but no dice. How could I get my series to zoom out upon being removed from the graph?

      Any help would be more than welcome. Thank you!
        • 1. Re: Charting effects issue
          ur_dtrain Level 1
          In the first case you might try emptying the array first:
          linechart.series = new Array();

          Or possibly adding the new line series as a child without touching the series array directly:
          linechart.addChild(ls);

          As the second problem, I was hoping there would be a dataChange event you could key into, but it doesn't look like it.