rss
twitter

Wednesday, February 25, 2009

Editing Vertical/horizontal Axis labels of Flex Charts Using labelrenderer

There are many charting components are provided by Adobe with Flex Builder professional to develop rich Dashboard like applications.
There are many provisions are given with those components to format/change the way of displaying the data in charts.
There are also many direct properties are given with the charting components to made changes to the developers wish.
When looking with the Axis labels the developers can change the angle in which the labels to be display by using the property

labelrotation="angle"

If also the same developer want to change the font-size,font-face,apply style then that can be achieved by creating simple labelrenderer which extends label.
here is the example in this im displaying one coloumn chart and i want to display the horizontal axis in Red in color and in font-size 13 pixels.





for this i have created one Renderer in Actionscript named InnerLabelRenderer which extends label
in that class by setting styles like
this.setStyle("color","red");
this.setStyle("fontSize",13);


We can change the style of Axis labels


Download the source


Actionscript Code:

public class InnerlabelRenderer extends Label
{
private var _data:AxisLabel;

override public function get data():Object
{
return _data;
}

override public function set data(value:Object):void
{
if(value != null)
{
this.text ="";
this._data = value as AxisLabel;
this.setStyle("color","red");
this.setStyle("fontSize",15);

}
}

}


MXML Code:

< id="column" dataprovider="{...}">
<>
< categoryfield="...">
< /mx:horizontalAxis>
<>
< labelrenderer="InnerLabelRenderer">
< /mx:horizontalAxisRenderer>
<>
...
< /mx:series>
< /mx:ColumnChart>

Bookmark and Share

2 comments:

Neil August 15, 2009 at 10:55 AM  

hey Nice article.
I downloaded your source and It worked
But when I am implementing the same render er in my apps it shows error

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at InnerlabelRenderer/set data()[C:\Documents and Settings\Administrator\My Documents\Flex Builder 3\dailychart\InnerlabelRenderer.as:19]
at mx.charts::AxisRenderer/processAxisLabels()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\AxisRenderer.as:3337]
at mx.charts::AxisRenderer/measureLabels()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\AxisRenderer.as:1747]
at mx.charts::AxisRenderer/calcRotationAndSpacing()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\AxisRenderer.as:1459]
at mx.charts::AxisRenderer/adjustGutters()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\AxisRenderer.as:1326]
at mx.charts.chartClasses::CartesianChart/updateAxisLayout()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\chartClasses\CartesianChart.as:1888]
at mx.charts.chartClasses::CartesianChart/updateDisplayList()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\chartClasses\CartesianChart.as:1355]
at mx.core::UIComponent/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:6214]
at mx.managers::LayoutManager/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:602]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:675]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8460]
at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8403]

Anonymous,  October 8, 2009 at 1:18 PM  

In your post above, the line:
this.text = "";

should actually be:
this.text = value.text.toString()

Post a Comment

  © Blogger templates by Ourblogtemplates.com updated with zenplate.com tips

Back to TOP