Flex: How to refresh/repaint a chart?
- by Rob
I have a chart for which the data is provided asynchronously via a CallResponder (used with a RemoteObject). However, it does not seem possible to update the chart with the data after it has been initially drawn.
Here are the relevant snippets of (simplified) code:
// code below is in the application MXML
<mx:CallResponder id="result"
result="resultHandler(event)" />
private function resultHandler(event:ResultEvent):void
{
// panel is an instance of ChartPanel
this.panel.init(event.result);
}
// invoked when user clicks a button
private function displayChart():void
{
this.currentState = "ShowChart";
result.token = remoteObject.getUrlStatistics();
}
// code below is in ChartPanel
<mx:BarChart id="chart" />
public function init(value:Object):void
{
var xml:XMLList = XMLList(value);
var data:ArrayCollection = new ArrayCollection();
for each (var element:XML in xml.children())
{
// not shown: extract value out of XML, put in ArrayList
data.addItem(...);
}
this.chart.dataProvider = data;
}
The result is that it draws an empty chart. the resultHandler function or init function in ChartPanel needs to trigger a repaint or something similar. I have tried:
Firing a collection modified event after assigning it to chart.dataProvider
calling invalidateDisplayList (tried with all components)
binding the chart data provider to a variable, and doing the above.
changing the view state on the last line of resultHandler.
None of them worked. When I fetch the data and cache it locally, then use it to call init synchronously, the chart displays correctly.
What am I missing here?
