Chart not rendering at the creationComplete of a Flex component

[PatriciaLam]

I am trying to create an application where I am dynamically removing and adding a fusion chart. Sometimes, the chart doesn't render even though the container that I am placing it in is rendered. Here is a sample application demonstrating what I am trying to accomplish.

 

 

 

<?xml version="1.0" encoding="utf-8"?>

 

 

 

 

 

 

 

 

 

 

 

</p><p>&nbsp;</p><p> import mx.events.FlexEvent;</p><p>&nbsp;</p><p> import mx.containers.Box;</p><p>&nbsp;</p><p> import com.fusioncharts.components.FCChartData;</p><p>&nbsp;</p><p> import com.fusioncharts.components.FusionCharts;</p><p>&nbsp;</p><p> import com.fusionwidgets.components.FusionWidgets;</p><p>&nbsp;</p><p> import mx.collections.ArrayCollection;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p> //Create an ArrayCollection object as a data source for chart </p><p>&nbsp;</p><p> [bindable]</p><p>&nbsp;</p><p> private var chartData:ArrayCollection = new ArrayCollection([</p><p>&nbsp;</p><p> {label:'NY'}, </p><p>&nbsp;</p><p> {label:'LA'},</p><p>&nbsp;</p><p> {label:'Boston'},</p><p>&nbsp;</p><p> {label:'San Francisco'},</p><p>&nbsp;</p><p> {label:'New Orleans'},</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p> {seriesName:'2009'},</p><p>&nbsp;</p><p> {value:'23400'},</p><p>&nbsp;</p><p> {value:'29000'},</p><p>&nbsp;</p><p> {value:'21800'},</p><p>&nbsp;</p><p> {value:'23000'},</p><p>&nbsp;</p><p> {value:'29000'},</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p> {seriesName:'2008'},</p><p>&nbsp;</p><p> {value:'21000'},</p><p>&nbsp;</p><p> {value:'22000'},</p><p>&nbsp;</p><p> {value:'18800'},</p><p>&nbsp;</p><p> {value:'199000'},</p><p>&nbsp;</p><p> {value:'26000'}</p><p>&nbsp;</p><p> ]);</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p> //Create an ArrayCollection object as a data source for chart parameters </p><p>&nbsp;</p><p> [bindable]</p><p>&nbsp;</p><p> private var chartParams:ArrayCollection = new ArrayCollection([</p><p>&nbsp;</p><p> {caption:'Population of the city in 2008 v 2009'},</p><p>&nbsp;</p><p> //{subcaption:'For the year 2009'},</p><p>&nbsp;</p><p> //{xAxisName:'City'},</p><p>&nbsp;</p><p> //{yAxisName:'Population'},</p><p>&nbsp;</p><p> {showLabels:"0"},</p><p>&nbsp;</p><p> {showYAxisValues:"0"},</p><p>&nbsp;</p><p> {chartLeftMargin:"0"},</p><p>&nbsp;</p><p> //{chartLeftMargin:"12"},</p><p>&nbsp;</p><p> {chartRightMargin:"0"},</p><p>&nbsp;</p><p> {chartTopMargin:"0"},</p><p>&nbsp;</p><p> {chartBottomMargin:"0"},</p><p>&nbsp;</p><p> //{bgSWFApha:.5},</p><p>&nbsp;</p><p> //{labelPadding:"0"}, </p><p>&nbsp;</p><p> {showBorder:"1"},</p><p>&nbsp;</p><p> {showLegend:"0"},</p><p>&nbsp;</p><p> {showValues:"0"}</p><p>&nbsp;</p><p> //{NumberPrefix:''}</p><p>&nbsp;</p><p> ]);</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p> private var chartBox:Box;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p> private function init(): void </p><p>&nbsp;</p><p> {</p><p>&nbsp;</p><p> addChart();</p><p>&nbsp;</p><p> }</p><p>&nbsp;</p><p> private function replaceChart(): void </p><p>&nbsp;</p><p> {</p><p>&nbsp;</p><p> this.mainVB.removeChildAt(this.mainVB.numChildren-1);</p><p>&nbsp;</p><p> addChart();</p><p>&nbsp;</p><p> }</p><p>&nbsp;</p><p> private function addChart(): void</p><p>&nbsp;</p><p> {</p><p>&nbsp;</p><p> this.chartBox = new Box();</p><p>&nbsp;</p><p> this.chartBox.setStyle("borderStyle","solid");</p><p>&nbsp;</p><p> this.chartBox.setStyle("borderColor", StyleManager.getColorName("#ff0000"));</p><p>&nbsp;</p><p> this.chartBox.setStyle("backgroundColor", StyleManager.getColorName("blue"));</p><p>&nbsp;</p><p> this.chartBox.width = 400;</p><p>&nbsp;</p><p> this.chartBox.height = 400;</p><p>&nbsp;</p><p> this.chartBox.addEventListener(FlexEvent.CREATION_COMPLETE, createFC);</p><p>&nbsp;</p><p> this.mainVB.addChild(this.chartBox);</p><p>&nbsp;</p><p> }</p><p>&nbsp;</p><p> private function createFC(e:FlexEvent):void </p><p>&nbsp;</p><p> { </p><p>&nbsp;</p><p> var fc:FusionCharts = new FusionCharts(); </p><p>&nbsp;</p><p> fc.percentHeight = 100;</p><p>&nbsp;</p><p> fc.percentWidth = 100; </p><p>&nbsp;</p><p> //fc.FCDebugMode = true; </p><p>&nbsp;</p><p> fc.FCChartType = "MSColumn3D";</p><p>&nbsp;</p><p> fc.FCData(chartData);</p><p>&nbsp;</p><p> fc.FCParams(chartParams);</p><p>&nbsp;</p><p> this.chartBox.addChild(fc);</p><p>&nbsp;</p><p> fc.FCRender(); </p><p>&nbsp;</p><p> }</p><p>&nbsp;</p><p>