Flex chart effects with dynamically added series

I had a requirement for dynamic add, hide and reveal line series from a chart, in addition to change the entire data, and wanted to apply chart effects which will visualize the change.
I searched the web to find a demo but didn't find one. It took me a while to get this all going, so hopefully my work will save you the time in case you run into a similar requirement.
Here's the code:
 

 

 

<![CDATA[ import mx.states.SetProperty; import mx.charts.series.LineSeries; import mx.collections.ArrayCollection; [Bindable] private var dp:ArrayCollection = new ArrayCollection ([{"date":"1.1.08", "First":Math.random() * 100},{"date":"1.2.08", "First":Math.random() * 100},{"date":"1.3.08", "First":Math.random() * 100},{"date":"1.4.08", "First":Math.random() * 100},{"date":"1.5.08", "First":Math.random() * 100},{"date":"1.6.08", "First":Math.random() * 100},{"date":"1.7.08", "First":Math.random() * 100},{"date":"1.8.08", "First":Math.random() * 100}]); private var dp2:ArrayCollection = new ArrayCollection ([{"date":"1.1.08", "First":Math.random() * 100, "Second":Math.random() * 100},{"date":"1.2.08", "First":Math.random() * 100, "Second":Math.random() * 100},{"date":"1.3.08", "First":Math.random() * 100, "Second":Math.random() * 100},{"date":"1.4.08", "First":Math.random() * 100, "Second":Math.random() * 100},{"date":"1.5.08", "First":Math.random() * 100, "Second":Math.random() * 100},{"date":"1.6.08", "First":Math.random() * 100, "Second":Math.random() * 100},{"date":"1.7.08", "First":Math.random() * 100, "Second":Math.random() * 100},{"date":"1.8.08", "First":Math.random() * 100, "Second":Math.random() * 100}]); private var removedFlag:Boolean = false; private var currentData:ArrayCollection = dp; private var slideEffect:Boolean = false; private function addSeries():void { applyInterpolateEffect(); var lineSeries:LineSeries = new LineSeries(); lineSeries.yField = "Second"; lineSeries.displayName = "Second"; lineSeries.setStyle("showDataEffect",rearange); for each (var obj:Object in currentData) { obj.Second = Math.random() * 100; } currentData.refresh(); var series:Array = chart.series; series.push(lineSeries); chart.series = series; } private function showSeries():void { applyInterpolateEffect(); for each (var obj:Object in currentData) { obj.Second = Math.random() * 100; } currentData.refresh(); var series:Array = chart.series; for (var i:int=0;i<series.length;i++) { if (series[i].yField == "Second") { LineSeries(series[i]).alpha = 1; break; } } } private function removeSeries():void { applyInterpolateEffect(); for each (var obj:Object in currentData) { obj.Second = 0; } currentData.refresh(); //if (slideEffect) removedFlag = true } private function interpolateEndHandler():void { if (!removedFlag) return; var series:Array = chart.series; for (var i:int=0;i<series.length;i++) { if (series[i].yField == "Second") { LineSeries(series[i]).alpha = 0; break; } } removedFlag = false; } private function changeDataHandler():void { var series:Array = chart.series; for each(var lineSeries:LineSeries in series) { lineSeries.setStyle("hideDataEffect",slide) lineSeries.setStyle("showDataEffect",slide) } chart.dataProvider = dp2; currentData = dp2; slideEffect =true; } private function applyInterpolateEffect():void { var series:Array = chart.series; for each(var lineSeries:LineSeries in series) { lineSeries.setStyle("showDataEffect",rearange); lineSeries.setStyle("hideDataEffect",null); slideEffect = false; } } ]]>

Thank you for your interest!

We will contact you as soon as possible.

Send us a message

Oops, something went wrong
Please try again or contact us by email at info@tikalk.com