Why is it different using ArrayCollection and XMLListCollection?

Question

As shown in the screenshot below. The first one has ArrayCollection as dataProvider. The second one has XMLListCollection as dataProvider.
I would like the result for XMLListCollection but now I only have ArrayCollection as input. How can I deal with it? Thanks!
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" >
          <mx:Script> 
                    <![CDATA[ 
                              import mx.collections.ArrayCollection; 
                              [Bindable] 
                              private var dp:ArrayCollection = new ArrayCollection([ 
                                        {name: "00:00:00", v1: "2"},
                                        {name: "00:15:00", v1: "3"},
                                        {name: "00:30:00", v1: "4"},
                                        {name: "00:45:00", v1: "3"},
                                        {name: "01:00:00", v1: "5"},
                                        {name: "01:15:00"},
                                        {name: "01:30:00"},
                                        {name: "01:45:00"},
                                        {name: "02:00:00"}
                    ]]>
          </mx:Script> 
          <mx:XMLListCollection id="dp2">
                    <mx:source>
                              <mx:XMLList>
                                        <hour name="00:00:00" v1="2"/>
                                        <hour name="00:15:00" v1="3"/>
                                        <hour name="00:30:00" v1="4"/>
                                        <hour name="00:45:00" v1="3"/>
                                        <hour name="01:00:00" v1="5"/>
                                        <hour name="01:15:00" />
                                        <hour name="01:30:00" />
                                        <hour name="01:45:00" />
                                        <hour name="02:00:00" />
                              </mx:XMLList>
                    </mx:source>
          </mx:XMLListCollection>
          <mx:LineChart id="lineChart" height="100%" width="100%" dataProvider="{dp}" showDataTips="true"> 
                    <mx:horizontalAxis> 
                              <mx:CategoryAxis categoryField="name"/> 
                    </mx:horizontalAxis> 
                    <mx:series> 
                              <mx:LineSeries yField="v1" form="curve" displayName="v1"/>
                    </mx:series> 
          </mx:LineChart> 
          <mx:Legend dataProvider="{lineChart}" direction="horizontal"/>
          <mx:LineChart id="lineChart2" height="100%" width="100%" dataProvider="{dp2}" showDataTips="true"> 
                    <mx:horizontalAxis> 
                              <mx:CategoryAxis categoryField="@name"/> 
                    </mx:horizontalAxis> 
                    <mx:series> 
                              <mx:LineSeries yField="@v1" form="curve" displayName="v1"/>
                    </mx:series> 
          </mx:LineChart> 
          <mx:Legend dataProvider="{lineChart2}" direction="horizontal"/>
</mx:Application>

Answer 1

Define a default value to v1 for each of your objects in the ArrayCollection, or even better, use a strongly typed model class. In XML this would resolve to null (or maybe an empty string?), but an object will throw a "property not found" error, which may have unexpected results (as seen above).