FlashBuilder bar chart - data appears only outside chart range

Question

I'm relatively new to FlashBuilder development and I'm having some issues with a bar chart.  I'm try to create a chart to show the timeline of projects, each with a start and end date.
(1) The actual bars appear only on the left side of the y-axis. 
(2) If I hover the mouse over the blank chart area, it shows a tip for the bar that is not visible (see screenshot). 
(3) The dates on the x-axis are in descending order and should be in ascending order.
I would appreciate any help with any of these issues.  Thanks!
Code to display the chart:
    <s:NavigatorContent id="navProjectChart" label="Project Chart">
        <mx:BarChart id="bcProjectChart" dataProvider="{chartData}"  left="2" top="40" width="710" includeIn="List" paddingRight="5" paddingLeft="5" showDataTips="true" type="clustered" height="505">
        <mx:horizontalAxis>
            <mx:DateTimeAxis dataUnits="days" title="Timeline" parseFunction="parseDateStringToDate" />
        </mx:horizontalAxis>
        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="Name" />
        </mx:verticalAxis>
        <mx:series>
            <mx:BarSeries xField="EndDate" minField="StartDate" fill="{sc1}" stroke="{s1}" />
        </mx:series>
    </mx:BarChart>
    </s:NavigatorContent>
    protected function parseDateStringToDate(s:String):Date
        var newDate:Date = DateFormatter.parseDateString(s);
        trace("Input string: "+s+", Parsed Date: "+newDate);
        return newDate;

Answer 1

Hi,
Can you please send me a sample application at deeptika(at)adobe(dot)com?
I used the following app and it seems to be working fine
<?xml version="1.0"?>
<!-- Simple example to demonstrate the BubbleChart control. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[       
            import mx.collections.ArrayCollection;
            import mx.formatters.DateFormatter;
            [Bindable]
            private var chartData:ArrayCollection = new ArrayCollection([
                {Name: "A1", StartDate: new Date(2011,10,10), EndDate: new Date(2011, 11, 10)},
                {Name: "A2", StartDate: new Date(2011,7,9), EndDate: new Date(2011, 10, 10)}
            protected function parseDateStringToDate(s:String):Date
                var newDate:Date = DateFormatter.parseDateString(s);
                trace("Input string: "+s+", Parsed Date: "+newDate);
                return newDate;
        ]]>
    </fx:Script>
    <s:NavigatorContent id="navProjectChart" label="Project Chart">
        <mx:BarChart id="bcProjectChart" dataProvider="{chartData}"  left="2" top="40" width="710" 
                     paddingRight="5" paddingLeft="5" showDataTips="true" type="clustered" height="505">
            <mx:horizontalAxis>
                <mx:DateTimeAxis dataUnits="days" title="Timeline" />
            </mx:horizontalAxis>
            <mx:verticalAxis>
                <mx:CategoryAxis categoryField="Name" />
            </mx:verticalAxis>
            <mx:series>
                <mx:BarSeries xField="EndDate" minField="StartDate"  />
            </mx:series>
        </mx:BarChart>
    </s:NavigatorContent>
</s:Application>
Thanks,
Deeptika