Flex chart with multiple series and multiple axes giving weird results - apache-flex

Question

There is a serious issue I am facing with flash builder charts.
When I load the chart the first time I get this -
But if I refresh the page immediately in the same browser, I get this -
The second one is the expected one. This issue just repeats if I close the browser window and open it in a new browser window.
For explaining properly, I am attaching the source code here -
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:defaultstatistics="services.defaultstatistics.*"
xmlns:mx="library://ns.adobe.com/flex/mx" width="800" height="800"
xmlns:Examples="Examples.*"
creationComplete="start();" >
<!--<fx:Style source="styles/Golibaje.css"/>-->
<fx:Script>
<![CDATA[
import CustomEvents.ChartLoadedEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.utils.object_proxy;
import org.axiis.core.AxiisSprite;
import org.axiis.data.DataSet;
private var ds:DataSet = new DataSet();
public var loaded:Boolean = false;
//Set this variable to the appropriate time period used by the data.
[Bindable]
public var timeIncrement:String = "month";
[Bindable]
private var performanceData:ArrayCollection = new ArrayCollection([
{month:"January", correct:100, correctOutsideBase:50,
incorrect:50, skipped:25},
{month:"February", correct:110, correctOutsideBase:40,
incorrect:50, skipped:30},
{month:"March", correct:120, correctOutsideBase:40,
incorrect:25, skipped:30},
{month:"April",correct:110, correctOutsideBase:45,
incorrect:20, skipped:20},
{month:"May", correct:135, correctOutsideBase:25,
incorrect:25, skipped:15},
{month:"June", correct:150, correctOutsideBase:15,
incorrect:15, skipped:5},
{month:"July", correct:155, correctOutsideBase:10,
incorrect:10},
{month:"August", correct:160, correctOutsideBase:5,
incorrect:15},
{month:"September",correct:170, correctOutsideBase:5,
incorrect:10}
]);
[Bindable]
private var pointsData:ArrayCollection = new ArrayCollection([
{month:"January", points:1000},
{month:"February", points:1200},
{month:"March", points:1400},
{month:"April",points:1500},
{month:"May", points:1600},
{month:"June", points:1650},
{month:"July", points: 1800},
{month:"August", points: 2000},
{month:"September", points: 2500}
]);
public function start():void
{
var t:Timer = new Timer(2000, 1);
t.addEventListener(TimerEvent.TIMER_COMPLETE, fireChartLoaded);
t.start();
}
private function fireChartLoaded(event){
loaded = true;
dispatchEvent(new Event("chartLoaded"));
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<mx:CartesianChart id="PerformanceTimeChart" dataProvider="{performanceData}"
showDataTips="true" width="800" height="700"
verticalCenter="0" horizontalCenter="0">
<mx:verticalAxisRenderers>
<mx:AxisRenderer placement="left" axis="{columnAxis}"/>
<mx:AxisRenderer placement="right" axis="{pointsAxis}"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="{timeIncrement}"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSet type="stacked">
<mx:verticalAxis>
<mx:LinearAxis id="columnAxis" title="Result"/>
</mx:verticalAxis>
<mx:ColumnSeries
yField="correct"
displayName="Correct"
verticalAxis="{columnAxis}"/>
<mx:ColumnSeries
yField="correctOutsideBase"
displayName="Outside Base"
verticalAxis="{columnAxis}"/>
<mx:ColumnSeries
yField="incorrect"
displayName="Wrong Answer"
verticalAxis="{columnAxis}"/>
<mx:ColumnSeries
yField="skipped"
displayName="Skipped Question"
verticalAxis="{columnAxis}"/>
</mx:ColumnSet>
<mx:LineSeries
dataProvider="{pointsData}"
yField="points"
displayName="Points">
<mx:verticalAxis>
<mx:LinearAxis id="pointsAxis" title="Points"/>
</mx:verticalAxis>
</mx:LineSeries>
</mx:series>
</mx:CartesianChart>
<mx:Legend dataProvider="{PerformanceTimeChart}" direction="horizontal"/>
</s:Group>
Anyone has any ideas why this might be happening?

Answer 1

When ColumnSet are used within CartesianChart, there is a bug in Flex Charting SDK regarding setting elements to dataTranform object of ColumnSeries embraced by ColumnSet.
As a workaround for this issue, I set elements by myself to dataTransform object in extended ColumnSeries class:
public class GroupedColumnSeries extends ColumnSeries
{
override protected function commitProperties():void
{
super.commitProperties();
if (this.parent is ColumnSet)
{
dataTransform.elements=[ColumnSet(this.parent)];
}
}
}