0 Replies Latest reply on Mar 25, 2010 11:52 AM by yantzgh

    Axis labels with clusters of stacked columns

    yantzgh

      I've created a ColumnChart that contains clusters of stacked columns.  Each of the 6 clusters contains 3 stacked columns.

       

      The ColumnChart creates the chart nicely (thanks to the dataFunction property), but the xAxis only displays the cluster label (so, "Cluster 1", or "Cluster 2", etc.).  That means the only way to tell which data set you're looking at, you have to mouse over the data to get the datatip to show up.

       

      Using the labelFunction of the Category axis lets me output each of the dataset names along with the cluster set name, but I'm unable to center the dataset names below their respective datasets because the labelFunction just returns a single string for the cluster (as oppose to a string for each of the stacked columns within the cluster).

       

      Is there a way to get an xAxis label for each of the stacked bars?  I've included the sample code below.  The labelFunction has been removed from this sample code because it wasn't working as I had hoped.

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
           <mx:Script>
                <![CDATA[
                     import mx.charts.HitData;
                     import mx.charts.series.ColumnSeries;
                     import mx.charts.ChartItem;
                     import mx.charts.chartClasses.Series;
                     import mx.messaging.AbstractConsumer;
                     import mx.collections.ArrayCollection;
                     [Bindable] private var _dataProvider:ArrayCollection = new ArrayCollection(
                          [
                               {
                                    label: 'Skill 1',
                                    fpr: {
                                         label: 'Fall progress report',
                                         E: 30,
                                         G: 40,
                                         S: 20,
                                         N: 10
                                    },
                                    term1: {
                                         label: 'Term 1',
                                         E: 25,
                                         G: 35,
                                         S: 25,
                                         N: 15
                                    },
                                    term2: {
                                         label: 'Term 2',
                                         E: 20,
                                         G: 45,
                                         S: 30,
                                         N: 5
                                    }
                               },
                               {
                                    label: 'Skill 2',
                                    fpr: {
                                         label: 'Fall progress report',
                                         E: 30,
                                         G: 40,
                                         S: 20,
                                         N: 10
                                    },
                                    term1: {
                                         label: 'Term 1',
                                         E: 25,
                                         G: 35,
                                         S: 25,
                                         N: 15
                                    },
                                    term2: {
                                         label: 'Term 2',
                                         E: 20,
                                         G: 45,
                                         S: 30,
                                         N: 5
                                    }
                               }
                          ]
                     );
                     private function onDataTipFunction(hitData:HitData):String
                     {
                          var columnSeries:ColumnSeries = hitData.element as ColumnSeries;
                          if(columnSeries)
                          {
                               var dataTip:Array = new Array();
                               dataTip.push('<b>'+ hitData.item.label +'</b><br />');
                               dataTip.push('<b>'+ hitData.item[columnSeries.xField].label +'</b><br />');
                               dataTip.push(hitData.item[columnSeries.xField][columnSeries.yField] +'%');
                               return(dataTip.join(''));
                          }
                          return('');
                     }
                     private function onDataFunction(series:Series, item:Object, fieldName:String):Object
                     {
                          var columnSeries:ColumnSeries = series as ColumnSeries;
                          if(fieldName == 'xValue')
                          {
                               return(item.label);
                          }else if(fieldName == 'yValue')
                          {
                               return(item[columnSeries.xField][columnSeries.yField]);
                          }
                          return(null);
                     }
                ]]>
           </mx:Script>
           
           <mx:SolidColor id="fill1" color="0xF8B64F" />
           <mx:SolidColor id="fill2" color="0x4B9EF8" />
           <mx:SolidColor id="fill3" color="0x9ACC33" />
           <mx:SolidColor id="fill4" color="0xAD77D2" />
           <mx:Stroke id="stroke" color="0xFFFFFF" />
           
           <mx:ColumnChart id="columnChart" dataProvider="{_dataProvider}" dataTipFunction="onDataTipFunction" showDataTips="true">
                <mx:series>
                     <mx:ColumnSet type="clustered">
                          <mx:series>
                               <mx:ColumnSet type="100%" displayName="Fall progress report">
                                    <mx:series>
                                         <mx:ColumnSeries xField="fpr" yField="E" displayName="Excellent" 
                                              dataFunction="onDataFunction"
                                              fill="{fill1}" stroke="{stroke}" />
                                         <mx:ColumnSeries xField="fpr" yField="G" displayName="Good"
                                              dataFunction="onDataFunction"
                                              fill="{fill2}" stroke="{stroke}" />
                                         <mx:ColumnSeries xField="fpr" yField="S" displayName="Satisfactory"
                                              dataFunction="onDataFunction"
                                              fill="{fill3}" stroke="{stroke}" />
                                         <mx:ColumnSeries xField="fpr" yField="N" displayName="Needs improvement"
                                              dataFunction="onDataFunction"
                                              fill="{fill4}" stroke="{stroke}" />
                                    </mx:series>
                               </mx:ColumnSet>
                               <mx:ColumnSet type="100%" displayName="Term 1">
                                    <mx:ColumnSeries xField="term1" yField="E" displayName="Excellent" 
                                         dataFunction="onDataFunction"
                                         fill="{fill1}" stroke="{stroke}" />
                                    <mx:ColumnSeries xField="term1" yField="G" displayName="Good"
                                         dataFunction="onDataFunction"
                                         fill="{fill2}" stroke="{stroke}" />
                                    <mx:ColumnSeries xField="term1" yField="S" displayName="Satisfactory"
                                         dataFunction="onDataFunction"
                                         fill="{fill3}" stroke="{stroke}" />
                                    <mx:ColumnSeries xField="term1" yField="N" displayName="Needs improvement"
                                         dataFunction="onDataFunction"
                                         fill="{fill4}" stroke="{stroke}" />
                               </mx:ColumnSet>
                               <mx:ColumnSet type="100%" displayName="Term 2">
                                    <mx:ColumnSeries xField="term2" yField="E" displayName="Excellent" 
                                         dataFunction="onDataFunction"
                                         fill="{fill1}" stroke="{stroke}" />
                                    <mx:ColumnSeries xField="term2" yField="G" displayName="Good"
                                         dataFunction="onDataFunction"
                                         fill="{fill2}" stroke="{stroke}" />
                                    <mx:ColumnSeries xField="term2" yField="S" displayName="Satisfactory"
                                         dataFunction="onDataFunction"
                                         fill="{fill3}" stroke="{stroke}" />
                                    <mx:ColumnSeries xField="term2" yField="N" displayName="Needs improvement"
                                         dataFunction="onDataFunction"
                                         fill="{fill4}" stroke="{stroke}" />
                               </mx:ColumnSet>
                          </mx:series>
                     </mx:ColumnSet>
                </mx:series>
                
                <mx:horizontalAxis>
                     <mx:CategoryAxis categoryField="label" />
                </mx:horizontalAxis>
           </mx:ColumnChart>
           
           <mx:HBox width="100%" horizontalAlign="center">
                <mx:Legend dataProvider="{columnChart}" direction="horizontal" width="500" height="30" />
           </mx:HBox>
      </mx:Application>