Tuesday, August 24, 2010

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.

No comments:

Post a Comment