Adobe Flex multi stacked bar chart

We had a requirement in our project to show multi stacked bar chart and I found that it is not a out of box component that we can achieve using Flex charting components.
After a little bit of research and learning, I found that this can be done using the following code:

<mx:ColumnChart id="revBySetChart1" showDataTips="true" width="100%" 
 dataProvider="{dataCollection}"
 dataTipFunction="formattingMethod"
 height="380" paddingLeft="0">

 <mx:verticalAxis>
 <mx:LinearAxis title="verticalAxisTitle" labelFunction="defineVerticalLabel" />
 </mx:verticalAxis>            

 <mx:horizontalAxis>
 <mx:CategoryAxis id="horizontalCategoryId" categoryField="categoryFieldName" />
 </mx:horizontalAxis>    

 <mx:series>
 <chart:ColumnSet type="clustered">
     <chart:ColumnSet type="stacked" displayName="displayName1">
  <mx:ColumnSeries yField="yfield11" displayName="columndisplayname1" styleName="mySeries1"/> 
  <mx:ColumnSeries yField="yfield12" displayName="columndisplayname2" styleName="mySeries2"/> 
     </chart:ColumnSet>     
     <chart:ColumnSet type="stacked" displayName="displayName2" >
  <mx:ColumnSeries yField="yfield21" displayName="columndisplayname1" styleName="mySeries1"/> 
  <mx:ColumnSeries yField="yfield22" displayName="columndisplayname2"  styleName="mySeries2" tabIndex="1"/> 
    </chart:ColumnSet>
 </chart:ColumnSet>
 </mx:series>
</mx:ColumnChart> 

 
Here, displayName1 and displayName2 are stacked bars.
These are in turn placed inside a clustered series to achieve the multi stacked bar graph.

In Adobe Flex, a most discussed limitation is that the Datagrid or AdvancedDataGrid components do not support a footer row for showing some aggregate functions.

A popular and simple solution for this is to create a secondary datagrid whose dataProvider is a aggregate collection of the master datagrid data.

But we need to handle certain properties for footer datagrid to achieve this. some of them are :

1) on stretch of the master datagrid columns, we need to change the column width of the footer datagrid also.

eg: we can write a columnStretchHandler and assign this method to the "columnStretch" property of the master datagrid as follows:

private function columnStretchHandler(event:AdvancedDataGridEvent):void {

  var dg:AdvancedDataGrid = event.target as AdvancedDataGrid;

  <footer_datagrid_id>.columns[event.columnIndex].width = 
   
        dg.columns[event.columnIndex].width; 

}

2) Other properties that may have to be set are :
rowCount="1"
showHeaders="false"
maxHeight="30"
sortExpertMode="true"
sortableColumns="false"

Javascript - boolean logic

In javascript, to find out if certain number of conditions of a set of conditions are true. Say, there are four conditions, c1, c2, c3 and c4, and we need to carry out some logic if, at least "two" of these conditions are true. We can do this in the following way:

eg:

<script>
  function isConditionTrue(c1,c2,c3,c4) {
   if ((c1 + c2 + c3 + c4) > 1) {
     return true;
   } 
   return false;
 }
 
 alert(isConditionTrue(true,false,false,true));
</script>

This method will return true as two of the conditions are true.
Note: the boolean values are treated as numbers(false - 0, true - 1) when used inside algebraic expression.