Flex DateTimeAxis Duplicate Axis Label Values

Question

This simple code results in November 7th in 2 places on the horizontal dateTimeAxis:

<mx:Application 
        xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.charts.series.LineSeries;
            import mx.collections.ArrayCollection;

            [Bindable]
            public var ac:ArrayCollection = new ArrayCollection(
                [
                    {completions: "11636", date: new Date(2010, 10, 7)}, 
                    {completions: "33060", date: new Date(2010, 10, 8)}, 
                ]);
        ]]>
    </mx:Script>

    <mx:Panel title="Bar Chart">
        <mx:BarChart id="myChart" 
                      dataProvider="{ac}">
            <mx:horizontalAxis>
                <mx:DateTimeAxis dataUnits="days" 
                                 displayLocalTime="true"/>
            </mx:horizontalAxis>
            <mx:series>
                <mx:LineSeries xField="date" yField="completions"/>
            </mx:series>
        </mx:BarChart>
    </mx:Panel>
</mx:Application>

Change the dates to November 8th and 9th and all is good....

Anyone have any ideas how to fix this?

Answer 1

It looks like it has something to do with UTC time as this fixes it:

<mx:DateTimeAxis dataUnits="days" displayLocalTime="true" labelFunction="formatDate"/>

public function formatDate(value:Date, prev:Date, axis:IAxis):String
{
    return dateFormatter.format(new Date(value.fullYear, value.month, value.dateUTC));
}

But, I'd rather not do this...

Answer 2

Firstly, good man for putting in the entire app code (handy for running).

Copied it and ran it in Flex Builder 3, and it gave me the two dates, 11/7/10 and 11/8/10. Which is what you were looking for (given that month is zero based). Must be a locale thing.

Here is a debug view of the first date, maybe check details against yours (note the time offset)

Answer 3

brian bishop mentioned timezone offset, so that got me thinking. here's a simpler app:

<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" minWidth="955" minHeight="600"
               creationComplete="application1_creationCompleteHandler(event)">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                var d1:Date = new Date(2010, 10, 7);
                var d2:Date = new Date(2010, 10, 8);
                // put breakpoint here...
            }
        ]]>
    </fx:Script>    

</s:Application>

and here's what the properties look like on my machine (in Denver) (note the timezoneOffset property. the difference i suspect is because 11/7 was daylight savings day):

for some reason, datetimeaxis with displayLocalTime=true, converts d2.date to 7 instead of 8.

Answer 4

I used the below function for Date comparison in my application instead of having new Date(obj) and it worked for me.You can also give it a try! Note:'value' param was a String "02/07/2011" in my case.

private function isoToDate(value:String):Date
        {
            var dateStr:String=value;
            dateStr=dateStr.replace(/\-/g, "/");
            dateStr=dateStr.replace("T", " ");
            dateStr=dateStr.replace("Z", " GMT-0000");
            dateStr=dateStr.substr(0, dateStr.lastIndexOf("/"));
            return new Date(Date.parse(dateStr));
        }