FlashBuilder bar chart - data appears only outside chart range

[benn0034]

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;

    }

[Deeptika Gottipati]

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