Search code examples
actionscript-3apache-flexflex4.5parsleyflex-charts

Flex columnset not displayed properly

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 without using columnsets and binding series directly in <mx:columnchart> definition - as you can see the quarters are dropped here. in both the charts data source is same 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.

Solution

  • 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>