yui 3 chart: how to format dates in chart axis (YUI 3.3.0 Preview Release 3)

Question

I'm trying to use the YUI 3.3.0 preview release 3 charting solution as it does not use Flash anymore but the browser canvas. So far I gobbled together this peace of code (as I’m new to YUI this is the mainly the result of copy and paste work from several examples found in the YUI 3 charting examples).

YUI().use('charts', function (Y) 
{ 
    var myDataValues = [ 
        {category:"5/1/2010", values:2000}, 
        {category:"5/2/2010", values:50}, 
        {category:"5/3/2010", values:400}, 
        {category:"5/4/2010", values:200}, 
        {category:"5/5/2010", values:5000}
    ];

    var myAxes = {
        dateRange:{
            keys:["date"],
            position:"bottom",
            type:"category",
            styles:{
              majorTicks:{
                display: "none"
              },
              label: {
                rotation:-45,
                margin:{top:5}
              }
            }
        }
    };

    var mychart = new Y.Chart({
        dataProvider:myDataValues,
        render:"#mychart",
        categoryKey:"date",
        categoryType:"time",
        axes:myAxes
    });
});

But I just can't find the examples or documentation on how to format the dates for this new YUI charting pre-release version. My question is:

How can I change the date format of the x-axis?

Answer 1

I got my answer on the YUI forum, I just had to add the type:"time" and labelFormat: "%e %b %Y" attributes to my dateRange of x-axes.

YUI().use('charts', function (Y) 
{ 
    var myDataValues = [ 
        {category:"5/1/2010", values:2000}, 
        {category:"5/2/2010", values:50}, 
        {category:"5/3/2010", values:400}, 
        {category:"5/4/2010", values:200}, 
        {category:"5/5/2010", values:5000}
    ];

    var myAxes = {
        dateRange:{
            keys:["date"],
            position:"bottom",
            type:"time",
            labelFormat: "%e %b %Y",
            styles:{
              majorTicks:{
                display: "none"
              },
              label: {
                rotation:-45,
                margin:{top:5}
              }
            }
        }
    };

    var mychart = new Y.Chart({
        dataProvider:myDataValues,
        render:"#mychart",
        categoryKey:"date",
        categoryType:"time",
        axes:myAxes
    });
});

For TimeAxis instances the labelFormat is an STRFTime string. For more information on STRFTime formatting see the following: http://pubs.opengroup.org/onlinepubs/007908799/xsh/strftime.html