Dynamic Flex verticalaxisrenderers

Question

Hi,

I've created a linechart in flex using pure as3. I need now to convert it to a dynamic multi axis chart. What I mean by dynamic, is that I can programmatically add or remove axisrenderers from the verticalaxisrenderer array at runtime. It seems i can remove axisrenderers at runtime by simply doing this:

verticalAxisRenderers = verticalAxisRenderers.splice(index,1);

However, ADDING axisrenderers is not working. I am doing it by so:

verticalAxisRenderers.push(ar2); verticalAxisRenderers = verticalAxisRenderers;

Where am I going wrong? Please help!

Thanks, Tone

Answer 1

What is being returned by verticalAxisRenderers.push(ar2)? It should be the new length of the array. Check if this is being increased. If not, your axisRenderer is not being added to the array.

Answer 2

The misconception is that you use verticalAxisRenderers instead of using the series tag. The renderers arrays are separate arrays that store the actual rendering of the Axis if you want to change it. The actual axis objects are stored in the series you use to show the data.

Here is an example:

   <?xml version="1.0"?>
        <!-- charts/MultipleAxes.mxml -->
        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
          <mx:Script><![CDATA[
             import mx.collections.ArrayCollection;

             [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},
             ]);

          ]]></mx:Script>

          <mx:Panel title="Column Chart With Multiple Series">
             <mx:ColumnChart id="myChart"
                dataProvider="{SMITH}"
                showDataTips="true">

                <mx:horizontalAxis>
                   <mx:CategoryAxis 
                        dataProvider="{SMITH}" 
                        categoryField="date"/>
                </mx:horizontalAxis>

                <mx:verticalAxisRenderers>
                    <mx:AxisRenderer placement="left" axis="{v1}"/>
                    <mx:AxisRenderer placement="right" axis="{v2}"/>
                </mx:verticalAxisRenderers>

                <mx:series>
                   <mx:ColumnSeries id="cs1"
                        dataProvider="{SMITH}"
                        xField="date"
                        yField="close"
                        displayName="SMITH">
                        <mx:verticalAxis>
                           <mx:LinearAxis id="v1" minimum="40" maximum="50"/>
                        </mx:verticalAxis>
                    </mx:ColumnSeries>
                    <mx:LineSeries id="cs2"
                            dataProvider="{DECKER}"
                            xField="date"
                            yField="close"
                            displayName="DECKER">
                        <mx:verticalAxis>
                            <mx:LinearAxis id="v2" minimum="150" maximum="170"/>
                        </mx:verticalAxis>
                     </mx:LineSeries>
                </mx:series>
             </mx:ColumnChart>
          </mx:Panel>
        </mx:Application>

You can read more about this at http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_12.html. Warning: don't use secondAxisRenderer because this is deprecated.