3 Replies Latest reply on Jan 16, 2011 10:28 PM by hidarikani

    Join two dataProviders

    hidarikani Level 2

      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?

        • 1. Re: Join two dataProviders
          Gregory Lafrance Level 6

          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

          • 2. Re: Join two dataProviders
            Flex harUI Adobe Employee

            Not sure what you want, but there are a few posts on ArrayList and

            ArrayCollection tricks on my blog

             

            --

            Alex Harui

            Flex SDK Team

            Adobe System, Inc.

            http://blogs.adobe.com/aharui

            • 3. Re: Join two dataProviders
              hidarikani Level 2

              I missed the fact that each series can have a different data provider.