CODEWITHSUNDEEP
apache-flexactionscriptdynamicaxischarts
tefozi
tefozi

Reputation: 5480

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.

enter image description here

<?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(columnSeries);

                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>

Upvotes: 2

Views: 3258

Answers (4)

Arpit Agarwal
Arpit Agarwal

Reputation: 4023

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];
}

Upvotes: 0

Nedim
Nedim

Reputation: 31

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!

Upvotes: 3

noelnoegdip
noelnoegdip

Reputation: 531

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.

Upvotes: 0

J_A_X
J_A_X

Reputation: 12847

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.

Upvotes: 0

Related Questions