Flex columnset not displayed properly

Question

I am developing a chart in which i need to have multiple column sets but flex is giving me strange results for it. I am using parsley framework.

Here is my mxml code

  <mx:ColumnChart id="columnChart" 
            width="100%" height="100%"
            dataProvider="{myPM.myData}" 
            showDataTips="true"                         
            click="handleChartClick(event)"
            backgroundElements="{backgroundGrids}"                                  
            dataTipFunction="{myPM.formatColumnChartToolTipData}"   
            type="clustered"                            
            >

                <mx:horizontalAxis>
                    <mx:CategoryAxis id="hAxis" 
                             categoryField="{myPM.xFieldLabel}"
                             title="{myPM.xAxisDisplayLabel}"/>
                </mx:horizontalAxis>                                

                <mx:verticalAxis>
                    <mx:LinearAxis id="vAxis" 
                               title="{myPM.yAxisDisplayLabel}"/>
                </mx:verticalAxis>

                <mx:series> 
**works perfecly fine if i change type="clustered"**                
                    <mx:ColumnSet series="{myPM.columnSeries}"                                
                              type="stacked"
                              verticalAxis="{vAxis}"
                                      >
                    </mx:ColumnSet>
                    <mx:ColumnSet>
                        <mx:ColumnSeries xField="{myPM.xFieldLabel}" 
                                 yField="{myPM.yFieldLabel}"
                                 displayName="year"/>
                    </mx:ColumnSet>                                              
                </mx:series>

    </mx:ColumnChart>

In my presentation model i am returning column series which is presented in the following code

public class MyPM
{

public var columnSeries:Array;

public void init()
{
        columnSeries=getColumnSeries();
}
public function getColumnSeries():Array
{
    var series:Array = new Array();
    var columnSeries:ColumnSeries;


    columnSeries=new ColumnSeries();
    //columnSeries.xField=xFieldLabel;
    columnSeries.yField="quarter1_profit_count";
    columnSeries.displayName="quarter1_title";                  
    series.push(columnSeries);

    columnSeries=new ColumnSeries();
    //columnSeries.xField=xFieldLabel;
    columnSeries.yField="quarter2_profit_count";
    columnSeries.displayName="quarter2_title";
    series.push(columnSeries);

    columnSeries=new ColumnSeries();
    //columnSeries.xField=xFieldLabel;
    columnSeries.yField="quarter3_profit_count";
    columnSeries.displayName="quarter3_title";
    series.push(columnSeries);

    columnSeries=new ColumnSeries();
    //columnSeries.xField=xFieldLabel;
    columnSeries.yField="quarter4_profit_count";
    columnSeries.displayName="quarter4_title";
    series.push(columnSeries);

    return series;  

}   
}

The problem i am getting here is "In first column there should be 4 stacked column series but flex drops 1 out of 4 stacked column series ( i am able to see only 3 or 2 columns it drops remaining one). I have debugged my code and the data is coming perfectly fine. If i remove all the column sets and write like then it gives me correct result for the first stacked column. But as i want the second column also which will have summation of all data at one place. for e.g. 1st stacked column will be showing quarterwise profit amounts and the second column i want to have to display total profit throughout the year."

You can see the charts here

- without using columnsets and binding series directly in definition - as you can see the quarters are dropped here. in both the charts data source is same

I am not knowing what i am doing wrong here. Any kind of help will be appreciated. Thanks in advance.

Answer 1

After a lot of effort i come to the solution. Here is the code for that.

public function getColumnSeries():Array
{
    var series:Array = new Array();

    var set1:ColumnSet =new ColumnSet();
    set1.type="stacked";

    var set2:ColumnSet=new ColumnSet();
    set2.type="stacked";

    var columnSeries:ColumnSeries;


    columnSeries=new ColumnSeries();
    //columnSeries.xField=xFieldLabel;
    columnSeries.yField="quarter1_profit_count";
    columnSeries.displayName="quarter1_title";                  
    series.push(columnSeries);

    columnSeries=new ColumnSeries();
    //columnSeries.xField=xFieldLabel;
    columnSeries.yField="quarter2_profit_count";
    columnSeries.displayName="quarter2_title";
    series.push(columnSeries);

    columnSeries=new ColumnSeries();
    //columnSeries.xField=xFieldLabel;
    columnSeries.yField="quarter3_profit_count";
    columnSeries.displayName="quarter3_title";
    series.push(columnSeries);

    columnSeries=new ColumnSeries();
    //columnSeries.xField=xFieldLabel;
    columnSeries.yField="quarter4_profit_count";
    columnSeries.displayName="quarter4_title";
    series.push(columnSeries);

    set1.series=series;

    //similarly for set2

    series=new Array();

    //add columnseries to series 

    set2.series=series;

    var temp:Array=new Array();
    temp.push(set1);
    temp.push(set2);

    return temp;  
}   

Also along with this make sure that you calculate max and min values for the y axis otherwise it will not render propery. This was also one of the reason why my chart was not getting displayed in the way i wanted.

Here is the updated markup

 <mx:ColumnChart id="columnChart" 
            width="100%" height="100%"
            dataProvider="{myPM.myData}" 
            showDataTips="true"                         
            click="handleChartClick(event)"
            backgroundElements="{backgroundGrids}"                                  
            dataTipFunction="{myPM.formatColumnChartToolTipData}"   
            type="clustered"                            
            series={myPM.series}
            >

                <mx:horizontalAxis>
                    <mx:CategoryAxis id="hAxis" 
                             categoryField="{myPM.xFieldLabel}"
                             title="{myPM.xAxisDisplayLabel}"/>
                </mx:horizontalAxis>                                

                <mx:verticalAxis>
                    <mx:LinearAxis id="vAxis" 
                               title="{myPM.yAxisDisplayLabel}"/>
                </mx:verticalAxis>

    </mx:ColumnChart>