Dynamically create axis via ActionScript in Adobe flex charting library; Adobe Bug?

Multiple axis creation via MXML works fine: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_12.html

But when I'm trying dynamically create horizontal and vertical axis then I'm getting extra axes. I believe this is Adobe bug. How I can fix this behavior? Thanks.

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    minHeight="600"
    minWidth="955"
    creationComplete="application1_creationCompleteHandler(event)"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.charts.AxisRenderer;
            import mx.charts.LinearAxis;
            import mx.charts.series.ColumnSeries;
            import mx.charts.series.LineSeries;
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable] public var SMITH:ArrayCollection = new ArrayCollection([{date:"22-Aug-05", close:41.87},
                                                                               {date:"23-Aug-05", close:45.74},
                                                                               {date:"24-Aug-05", close:42.77},
                                                                               {date:"25-Aug-05", close:48.06},]);

            [Bindable] public var DECKER:ArrayCollection = new ArrayCollection([{date:"22-Aug-05", close:157.59},
                                                                                {date:"23-Aug-05", close:160.3},
                                                                                {date:"24-Aug-05", close:150.71},
                                                                                {date:"25-Aug-05", close:156.88},]);

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                // VERTICAL AXIS
                var verticalAxis1:LinearAxis = new LinearAxis();
                var verticalAxis2:LinearAxis = new LinearAxis();

                var verticalAxisRenderer1:AxisRenderer = new AxisRenderer();
                var verticalAxisRenderer2:AxisRenderer = new AxisRenderer();

                verticalAxisRenderer1.axis = verticalAxis1;
                verticalAxisRenderer2.axis = verticalAxis2;

                // HORIZONTAL AXIS

                var horizontalAxis:LinearAxis = new LinearAxis();
                var horizontalAxisRenderer:AxisRenderer = new AxisRenderer();
                horizontalAxisRenderer.axis = horizontalAxis;
                horizontalAxisRenderer.placement = "bottom";

                // SERIES

                var newSeries:Array = new Array();

                var columnSeries:ColumnSeries = new ColumnSeries();
                columnSeries.dataProvider = SMITH;
                columnSeries.yField = "close";
                columnSeries.verticalAxis = verticalAxis1;
                columnSeries.displayName = "SMITH";
                newSeries.push(co开发者_如何学编程lumnSeries);

                var lineSeries:LineSeries = new LineSeries();
                lineSeries.dataProvider = DECKER;
                lineSeries.yField = "close";
                lineSeries.verticalAxis = verticalAxis2;
                lineSeries.displayName = "DECKER";
                newSeries.push(lineSeries);

                // CHART

                myChart.verticalAxisRenderers = [verticalAxisRenderer1, verticalAxisRenderer2];
                myChart.horizontalAxisRenderers = [horizontalAxisRenderer];
                myChart.series = newSeries;
            }
        ]]>
    </fx:Script>

    <mx:Panel title="Column Chart With Multiple Axes">
        <mx:ColumnChart id="myChart"
            showDataTips="true"/>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</s:Application>

---

Ok, here is the trick. Do not create the chart in MXML. Create it in AS code as You did with renderers. The chart adds an default AxisRenderer in its commitProperties() method. So, if you create the chart in mxml it will do the commit (and so add an axis renderer) before you add yours axis renderer in AS code. Just move the chart creation into the AS code and out of MXML:

var columnChart:ColumnChart = new ColumnChart(); addElement(columnChart)

Good luck!

---

If you looked at your code a bit closer, you'll notice that you're adding your axis renderers twice. Once on the data series and another on the chart itself.

---

horizontalAxisRenderer.axis = horizontalAxis;

myChart.horizontalAxisRenderers = [horizontalAxisRenderer];

As Jax says you are adding the renderer twice. Try removing one and also the verticalaxisrenderers will need placement.

---

My 2 cents here....

I tried to solve this by nulling the verticalAxisRenderer and setting axisrenderers in verticalAxisRenderers. That caused an issue as verticalAxisRenderer setter doesn't check for value being null before acccessing axis obejct from it. I settled down to below code. Not elegant but works..

if(myChart.verticalAxisRenderer)
{
    myChart.verticalAxisRenderer  = verticalAxisRenderer2
    myChart.verticalAxisRenderers = [verticalAxisRenderer1];
}
else
{
    myChart.verticalAxisRenderers = [verticalAxisRenderer2,verticalAxisRenderer1];
}