How do I show Months Grouped By Years on the horizontal Axis for a Flex Line Chart?

Basically I have a Flex Line Chart and x-axis looks like this:

 ---|--------|--------|--------|--------|--------|--------|---
 November December January February   March    April     May

This is fine but I also want to show the year that the months belong to, like this:

 ---|--------|--------|--------|--------|--------|--------|---
 November December January February   March    April     May
       2010           |                2011

My dataprovider is an xml document that looks like this:

<Chart>
    <Month count="1"  month="November" year="2010" />
    <Month count="5"  month="December" year="2010" />
    <Month count="0"  month="January"  year="2011" />
    <Month count="10" month="February" year="2011" />
    <Month count="3"  month="March"    year="2011" />
    <Month count="9"  month="April"    year="2011" />
    <Month count="3"  month="May"      year="2011" />
</Chart>

And this is what I have for the LineChart control:

<mx:LineChart 
    height="100%" 
    width="100%" 
    dataProvider="{this._report.Month}">
    <mx:backgroundElements>
        <mx:GridLines>
            <mx:horizontalStroke>
                <mx:Stroke color="0x000000" weight="1" />
            </mx:horizontalStroke>
        </mx:GridLines>
    </mx:backgroundElements>
    <mx:horizontalAxisRenderers>
        <mx:AxisRenderer
            axis="{months}"
            axisStroke="{axis}"
            placement="bottom"
            tickLength="5"
            tickPlacement="outside"
            labelRotation="45">
            <mx:tickStroke>{ticks}</mx:tickStroke>
        </mx:AxisRenderer>
    </mx:horizontalAxisRenderers>
    <mx:verticalAxisRenderers>
        <mx:AxisRenderer
            axis="{countForMonths}"
            axisStroke="{axis}"
            placement="bottom"
            tickLength="5"
            tickPlacement="outside"
            minorTickPlace开发者_JAVA技巧ment="none">
            <mx:tickStroke>{ticks}</mx:tickStroke>
        </mx:AxisRenderer>
    </mx:verticalAxisRenderers>
    <mx:horizontalAxis>
        <mx:CategoryAxis id="months" categoryField="@month"/>
    </mx:horizontalAxis>
    <mx:verticalAxis>
        <mx:LinearAxis id="countForMonths" />
    </mx:verticalAxis>
    <mx:series>
        <mx:LineSeries
            yField="@count" 
            displayName="Report" 
            lineStroke="{myreportstroke}"/>
    </mx:series>
</mx:LineChart>

I have spent hours trying to find an example that does something similar with no luck. The Flex documentation has several examples that show multiple axes on the y-axis but none for the x-axis.

I have seen several other questions posted by other people that want to do something similar but most of them never got an answer or the answer was look at the documentation for multiple axes - which I've already done.

I found this on the IBM site for one of their Flex components. This seems to indicate that it is possible to format the axis in the way I want. I just need someone to steer me in the right direction.

---

Very interesting problem. Going to look into it. Starting point for me will be here: http://christianyates.com/blog/flex/displaying-multiple-axes-single-series-flex-charts