[flexcoders] Charts and DataProviders

[flexaustin]

So I am trying to get a lineChart (CODE BELOW) to show 5 different lines with 3 
data points each and all I am getting is one line with 3 data points.  I think 
my issue is that I am using XML instead of XMLList or ArrayCollection, but I 
can't figure that out either. 

Any help would be greatly appreciated.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="{init(event);}">

    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;
            import mx.events.CollectionEvent;
                        import mx.collections.ArrayCollection;
                        import mx.charts.series.items.LineSeriesItem;
            import mx.charts.HitData;


            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void 
{
                var idx:uint = ToggleButtonBar(evt.currentTarget).selectedIndex;
                legend.direction = arr[idx];
            }
            
            private function init(e:Event) : void
            {
                for each( var x:XML in _myXML[0].children() ){
                        trace(XML(_myXML[0]).children().length() );
                        trace(_myXML[0]);
                }
                trace('dp');
            }
            
             private var _myXML:XML = 
                    <reading>
                                <read date="8/27/2007">
                                <device name="device1" usage="2900" />
                                <device name="device2" usage="2500" />
                                <device name="device3" usage="2400" />
                                <device name="device4" usage="2100" />
                                <device name="device5" usage="2300" />
                        </read>
                        <read date="8/26/2007">
                                <device name="device1" usage="2900" />
                                <device name="device2" usage="2100" />
                                <device name="device3" usage="2100" />
                                <device name="device4" usage="2700" />
                                <device name="device5" usage="2500" />
                        </read>
                        <read date="8/25/2007">
                                <device name="device1" usage="2100" />
                                <device name="device2" usage="2200" />
                                <device name="device3" usage="2400" />
                                <device name="device4" usage="2700" />
                                <device name="device5" usage="2900" />
                        </read>
                            </reading>
            
                        
        ]]>
    </mx:Script>

   

    <mx:Array id="arr">
        <mx:String>horizontal</mx:String>
        <mx:String>vertical</mx:String>
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:ToggleButtonBar id="toggleButtonBar"
                dataProvider="{arr}"
                selectedIndex="0"
                itemClick="toggleButtonBar_itemClick(event);" />
    </mx:ApplicationControlBar>

    <mx:LineChart id="lineChart"
            showDataTips="true"
            dataProvider="{_myXML}"
            width="100%"
            height="100%"
          >

        <!-- series filters -->
        <mx:seriesFilters>
            <mx:Array />
        </mx:seriesFilters>

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false"
                    title="Price" />
        </mx:verticalAxis>

        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca"
                         dataProvider="{_myXML.read}"
                    categoryField="@date"
                    title="Date" />
        </mx:horizontalAxis>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}"
                    canDropLabels="true" />
        </mx:horizontalAxisRenderers>

        <!-- series -->
        <mx:series>
            <mx:LineSeries 
                         dataProvider="{_myXML.read.device}"
                        yField="@usage"
                    form="curve"
                    displayName="Usage" />
           
        </mx:series>
    </mx:LineChart>

    <mx:ControlBar>
        <mx:Legend id="legend"
                dataProvider="{lineChart}"
                direction="horizontal" />
    </mx:ControlBar>

</mx:Application>