Join two dataProviders

Question

I have a chart with a secondary axis and two ArrayCollections because I want the series on the left axis to update independently from the series on the right axis. Flex charts support only one dataProvider.
How do I join two ArrayCollections to make one data provider?

Answer 1

This code uses two data providers, or perhaps I'm not understanding the issue (perhaps post code):
<?xml version="1.0"?>
<!-- charts/StyledMultipleAxes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <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},
    [Bindable]
    public var deckerColor:Number = 0x224488;
    [Bindable]
    public var smithColor:Number = 0x884422;
  ]]></mx:Script>
  <mx:Stroke id="h1Stroke"
        color="{smithColor}"
        weight="8"
        alpha=".75"
        caps="square"
  />
  <mx:Stroke id="h2Stroke"
        color="{deckerColor}"
        weight="8"
        alpha=".75"
        caps="square"
  />
  <mx:Panel title="Column Chart With Multiple Axes">
     <mx:ColumnChart id="myChart" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis id="h1" categoryField="date"/>
        </mx:horizontalAxis>
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer placement="bottom" axis="{h1}"/>
        </mx:horizontalAxisRenderers>
        <mx:verticalAxisRenderers>
            <mx:AxisRenderer placement="left" axis="{v1}">
                <mx:axisStroke>{h1Stroke}</mx:axisStroke>
            </mx:AxisRenderer>
            <mx:AxisRenderer placement="left" axis="{v2}">
                <mx:axisStroke>{h2Stroke}</mx:axisStroke>
            </mx:AxisRenderer>
        </mx:verticalAxisRenderers>
        <mx:series>
           <mx:ColumnSeries id="cs1"
                horizontalAxis="{h1}"
                dataProvider="{SMITH}"
                yField="close"
                displayName="SMITH"
            >
                <mx:fill>
                    <mx:SolidColor color="{smithColor}"/>
                </mx:fill>
                <mx:verticalAxis>
                   <mx:LinearAxis id="v1" minimum="40" maximum="50"/>
                </mx:verticalAxis>          
           </mx:ColumnSeries>          
           <mx:LineSeries id="cs2"
                horizontalAxis="{h1}"
                dataProvider="{DECKER}"
                yField="close"
                displayName="DECKER"
            >
                <mx:verticalAxis>
                    <mx:LinearAxis id="v2" minimum="150" maximum="170"/>          
                </mx:verticalAxis>
                <mx:lineStroke>
                    <mx:Stroke
                        color="{deckerColor}"
                        weight="4"
                        alpha="1"
                    />
                </mx:lineStroke>
           </mx:LineSeries>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
If this post answers your question or helps, please mark it as such. Thanks!
http://www.stardustsystems.com
Adobe Flex Development and Support Services