rss
twitter

Saturday, February 28, 2009

Trim or Limit the Axis label length of Flex-Charts using Actionscript

One common problem that all the developers facing when creating flex applications with Flex Charting components is with displaying axis labels,when the axis labels exceed some limit then the label of next one one automatically wrap to next line.Some times if all the label text's length is large take 15 to 20 characters then that time the labels will overlap with each other and total chart will not look nice.



One way to handle this situation is just limit the label to some length and display it with ellipses.

We can get this by just modify the code for my previous post "Editing Vertical/horizontal Axis labels of Flex Charts Using labelrenderer"

Editing Vertical/horizontal Axis labels of Flex Charts Using labelrenderer post is discussing about changing the styles of Axis labels.That is achieved by the labelfunction. For limit/trim the label text we are going to use that labelfunction only.

Download the source of my previous post and  make the following change in set data(value:Object) function

override public function set data(value:Object):void
{
if(value != null)
{
this.text ="";
this.toolTip= String(value.text); //Display original label in Tooltip
var length:int = value.text.toString().length;
if (length > 8) {
this.text = value.text.toString().substr(0, 8) + "..";
} else {
this.text = String(value.text);
}

}
}



this.toolTip= String(value.text); will display the original label content in tooltip


Note : The datas used with the samples to demonstrate concept are only test data 

Bookmark and Share

1 comments:

rc May 20, 2010 at 8:54 AM  

Thanks for the post; I'am trying to use your code to produce the same result using action script and i'm not getting the same result
please advice if something wrong in the below code
catAxis= new CategoryAxis();
//catAxis.labelFunction=axisLabel;
catAxis.dataProvider=ac;
catAxis.categoryField=properties.@categoryField;
var myAxisRenderer:AxisRenderer= new AxisRenderer();
myAxisRenderer.axis=catAxis;
myAxisRenderer.labelRenderer= new ClassFactory(InnerlabelRenderer);

Post a Comment

Tech World

Label Cloud

Must Buy

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

Back to TOP