Flex: stacked bar chart with date as x-axis and names as y-axis

Question

I'm making a chart where the x-axis needs to have dates and y-axis names. The lenght of the bar is longer when the date is later. But I want to stack multiple bars on eachother. for example

This is the code I have so far

<fx:Script>
    <![CDATA[

        import mx.collections.ArrayCollection;

        [Bindable]
        private var medicines:ArrayCollection = new ArrayCollection([
            {name:"pil1", date:"05/01/2008"},
            {name:"pil2", date:"06/01/2008"},
            {name:"pil3", date:"07/01/2008"},
        ]);
    ]]>
</fx:Script>



<mx:BarChart id="myChart" width="758" height="448" dataProvider="{medicines}" showDataTips="true">

    <mx:verticalAxis>
        <mx:CategoryAxis categoryField="name"/>
    </mx:verticalAxis>

    <mx:horizontalAxis>
        <mx:CategoryAxis categoryField="date" dataProvider="{medicines}"/>
    </mx:horizontalAxis>

    <mx:series>

        <mx:BarSet type="stacked">
            <mx:BarSeries  xField="date"/>
            <mx:BarSeries  xField="date"/>
        </mx:BarSet>
    </mx:series>

</mx:BarChart>

What I get with this code is the right axes but a bar is not being drawn.

I want to get a graph like on this figure but on the X-axis there should be standing dates.

FYI it is a mobile application.

Answer 1

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

            [Bindable]
            private var medicines:ArrayCollection = new ArrayCollection([
                {name:"pil1", date:new Date(2008, 5, 1).time},
                {name:"pil2", date:new Date(2008, 6, 1).time},
                {name:"pil3", date:new Date(2008, 7, 1).time},
            ]);

            protected function application3_creationCompleteHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
            }

            private function getLabel(catValue:*, prevCatValue:*, axis:*, catItem:*):String
            {

                return "Your date String";
            }

        ]]>
    </fx:Script>



    <mx:BarChart id="myChart" width="758" height="448" dataProvider="{medicines}" showDataTips="true">

        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="name"/>
        </mx:verticalAxis>

        <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="date" dataProvider="{medicines}" labelFunction="{getLabel}"/>
        </mx:horizontalAxis>

        <mx:series>

            <mx:BarSet type="stacked">
                <mx:BarSeries  xField="date"/>
                <mx:BarSeries  xField="date"/>
            </mx:BarSet>
        </mx:series>

    </mx:BarChart>



</s:Application>

In the label function you can give the label what you want to show in the axis, hope this will help