Charting effects issue

Question

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!

Answer 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.