ArrayCollection

 from http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=charts_intro_108_12.html

 

 

Using an XML file as a data provider

You can define data provider data in a structured file. The following example shows the contents of the data.xml file:

<data>
    <result month="Jan-04">
        <apple>81768</apple>
        <orange>60310</orange>
        <banana>43357</banana>
    </result>
    <result month="Feb-04">
        <apple>81156</apple>
        <orange>58883</orange>
        <banana>49280</banana>
    </result>
</data>

You can load the file directly as a source of a Model, as the following example shows:

<?xml version="1.0"?>
<!-- charts/XMLFileDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Model id="results" source="../assets/data.xml"/>
  <mx:Panel title="Line Chart">
     <mx:LineChart id="chart" dataProvider="{results.result}">
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries yField="banana" displayName="Banana"/>
           <mx:LineSeries yField="apple" displayName="Apple"/>
           <mx:LineSeries yField="orange" displayName="Orange"/>
        </mx:series>
     </mx:LineChart>
  </mx:Panel>
</mx:Application>

To use an ArrayCollection as the chart's data provider, you convert the Model to one, as the following example shows:

<?xml version="1.0"?>
<!-- charts/XMLFileToArrayCollectionDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%">
  <mx:Script>
     import mx.utils.ArrayUtil;
  </mx:Script>
  <mx:Model id="results" source="../assets/data.xml"/>
  <mx:ArrayCollection id="myAC" 
        source="{ArrayUtil.toArray(results.result)}"
  />
  <mx:Panel title="Line Chart">
     <mx:LineChart id="chart" dataProvider="{myAC}">
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries yField="banana" displayName="Banana"/>
           <mx:LineSeries yField="apple" displayName="Apple"/>
           <mx:LineSeries yField="orange" displayName="Orange"/>
        </mx:series>
     </mx:LineChart>
  </mx:Panel>
</mx:Application>

You can also define the XML file as a URL for an HTTPService component, and then bind the HTTPService result directly to the chart's data provider, as the following example shows:

<?xml version="1.0"?>
<!-- charts/HTTPServiceDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%" creationComplete="srv.send()">
  <mx:HTTPService id="srv" url="../assets/data.xml"/>
  <mx:Panel title="Line Chart">
     <mx:LineChart id="chart" 
        dataProvider="{srv.lastResult.data.result}"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries yField="apple" name="Apple"/>
           <mx:LineSeries yField="orange" name="Orange"/>
           <mx:LineSeries yField="banana" name="Banana"/>
        </mx:series>
     </mx:LineChart>
  </mx:Panel>   
</mx:Application>

To use an ArrayCollection, you convert the HTTPService result to an ArrayCollection, as the following example shows:

<?xml version="1.0"?>
<!-- charts/HTTPServiceToArrayCollectionDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="srv.send()">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var myData:ArrayCollection;
  ]]></mx:Script>
  <mx:HTTPService 
     id="srv" 
     url="../assets/data.xml" 
     useProxy="false" 
     result="myData=ArrayCollection(srv.lastResult.data.result)"
  />
  <mx:Panel title="Line Chart">
     <mx:LineChart id="chart" dataProvider="{myData}">
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries yField="apple" name="Apple"/>
           <mx:LineSeries yField="orange" name="Orange"/>
           <mx:LineSeries yField="banana" name="Banana"/>
        </mx:series>
     </mx:LineChart>
  </mx:Panel>
</mx:Application>

You can also set the result format of the HTTPService to E4X, and then use it as a source for an XMLListCollection object, as the following example shows:

<?xml version="1.0"?>
<!-- charts/HTTPServiceToXMLListCollection.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="srv.send()">
  <mx:Script><![CDATA[
     import mx.utils.ArrayUtil;
  ]]></mx:Script>
  <mx:HTTPService id="srv"
    url="../assets/data.xml"
    resultFormat="e4x"
  />
  <mx:XMLListCollection id="myAC" 
    source="{srv.lastResult.result}"
  />
  <mx:Panel title="Line Chart">
     <mx:LineChart id="chart" dataProvider="{myAC}">
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries yField="apple" name="Apple"/>
           <mx:LineSeries yField="orange" name="Orange"/>
           <mx:LineSeries yField="banana" name="Banana"/>
        </mx:series>
     </mx:LineChart>
  </mx:Panel>
</mx:Application>