Hi all,

I want to make a population pyramid like this one: http://geheugenvannederland.nl/?/zoo...26size%3Dlarge

So instead of horizontal bars (1 bar for an age group from for example 0-5 years, the next for 5-10 years, etc) I want to work with a row of icons like in the above picture. I work from real data. The data is divided in year groups which I explained just now. The first row may look something like this: 501735, 492671, 461431, etc.

I have managed to visualise 1 year of data with horizontal bars which looks something like this: http://en.wikipedia.org/wiki/Population_pyramid

In the main application I use this code to pass data on to a custom itemRenderer:
PHP Code:
    <s:Form x="136" y="59">
        <s:DataGroup id="menRenderer"  
                     dataProvider="{myProxy.populationMen}"  
                     itemRenderer="components.DataItemRenderer">
            <s:layout>
                <s:VerticalLayout/>
            </s:layout>
        </s:DataGroup>
        <s:DataGroup id="womanRenderer"  
                     dataProvider="{myProxy.populationWomen}"  
                     itemRenderer="components.DataItemRenderer">
            <s:layout>
                <s:VerticalLayout/>
            </s:layout>
        </s:DataGroup>
    </s:Form> 
The itemRender itself looks like this:
PHP Code:
    <s:Graphic>
        <s:Rect id="menRect" width="{data.data96/10000}" height="5" x="0" y="0">
            <s:fill>
                <s:SolidColor color="0x99CCFF"/>
            </s:fill>            
        </s:Rect>
    </s:Graphic> 
As you can see I use this line width="{data.data96/10000}" to convert the really big numbers into a line of reasonable width. So now I have a bar graph. But what I want to do is further render this into a row of for example 50 icons when the population is 500000. So I have two questions:
1. How do I manipulate the data that comes into the renderer? If I try to work with the data like this:
PHP Code:
<fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable] private var popMen96:ArrayCollection = data.data96;
            [Bindable] private var men:ArrayCollection = new ArrayCollection();
            [Bindable] private var grain:int = 10000;
            
             for each(var value:Object in data.data96){
                men.addItem(value/grain);
            } 
            
        ]]>
</fx:Script> 
I get a lot of error messages including that data.data96 is read-only. So how can I further manipulate this data?

2. Can I use a renderer inside a renderer or is that not the way to go about it? My idea is to render the icons inside this renderer passing on the amount after I've calculated it. But maybe this is silly?

I hope someone can set me on the right track. Thanks very much in advance for your help.