Question

The data provider for the chart contains an array of facility objects. A facility object is made of several parts indicating the installation ID, facility number and facility name as shown below:

{
   installationID:1000,
   facilityNum:529,
   facilityName:"Building1"
}

I have a chart that depicts energy consumption per building. There may be buildings shown in the chart from several different regions. I want to:

1. Group all the buildings in the same region together.
2. Include a region label only when it starts a new group.
3. Align the label parts in a grid such that:
   • All region labels are left aligned with each other.
   • All Building IDs are right aligned with each other.
   • Building names are left aligned with each other.

An example of the desired output it shown in the image below.

Using a custom label function applied to the category axis I can concatenate the values into one string. By sorting the array region ID and I can even remove (not add) the region ID unless a new group is starting. The custom label function is shown here.

private var nextCategoryIndex:int = 1;

public function facilitiesLabelFunction(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String
{
   var nextInstallationID:String = "";
   var facilitiesColl:ArrayCollection = ArrayCollection(axis.dataProvider);

   // if this is not the last facility to be processed get the next installation ID
   if (nextCategoryIndex <= facilitiesColl.length - 1) {
      nextInstallationID = facilitiesColl[nextCategoryIndex].installationID;
   }

   var label:String = categoryItem.facilityNum + " - " + categoryItem.facilityName;

   // preppend the installation id when we start listing facilities from a different installation
   if (nextInstallationID != categoryItem.installationID) {
      label = categoryItem.installationID + " " + label;
   }

   nextCategoryIndex++;
   return label;
}

However, this generates a singular string that is right aligned (as expected). What I want to achieve is the left, right, left alignment of the three properties as described above.

I attempted to concatenate the property values in the label function with an ‘@’ as as delimiter. The thinking was that I could create custom label renderer that would split the string on this delimiter and perform the alignment as needed. However, I do not seem to be able to change the alignment of a label within a custom label renderer.

How can I align multi-part labels in a grid like fashion in a Flex Chart?

Answer 1

I don’t know of any multi-part label capabilities in Flex, but you can create item renderers that would contain and align any number of labels (or other components) in the manner you want. Something like this should work (not complete or tested, but should point you in the right direction):

<mx:BarChart>
    <mx:AxisRenderer>
        <mx:labelRenderer>
            <fx:Component>
                <s:Group width="300">
                    <s:Label left="0" text="{data.leftvalue}" />
                    <s:Label horizontalCenter="0" text="{data.centervalue}" />
                    <s:Label left="right" text="{data.rightvalue}" />
                </s:Group>
            </fx:Component>
        </mx:labelRenderer>
    </mx:AxisRenderer>
</mx:BarChart>