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>