Ely: How do you wordwrap a label on a bar chart?

View: New views
17 Messages — Rating Filter:   Alert me  

Ely: How do you wordwrap a label on a bar chart?

by Patrick Lemiuex :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

A Vertical Axis why Field, my labels are being cut off, my width
dimension is fixed to 280 pixels, so the column needs to wrap down?

Thanks,
Patrick



RE: Ely: How do you wordwrap a label on a bar chart?

by Ely Greenfield :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

 
 
Hi Patrick.  THe only way would be to use a labelFunction on your axis
and manually insert a line break yourself.
 
Ely.
 

________________________________

From: flexcoders@... [mailto:flexcoders@...] On
Behalf Of dj
Sent: Friday, November 17, 2006 2:34 PM
To: flexcoders@...
Subject: [flexcoders] Ely: How do you wordwrap a label on a bar chart?



A Vertical Axis why Field, my labels are being cut off, my width
dimension is fixed to 280 pixels, so the column needs to wrap down?

Thanks,
Patrick



 

Re: Ely: How do you wordwrap a label on a bar chart?

by turbo_vb :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


Hi Ely,

I got this far with wordwrapping the label text, but my question is
more complicated.  I want to have two verticalAxisRenderers, side-by-
side, on the same side of a ColumnChart.  Or, create a single
LabelRenderer to simulate this.  One of the labels needs a shaded
background with text, while the other is just text.  While digging
into it, the docs say to use IFactory for a chart LabelRenderer.  Is
this similar to an ItemRenderer for a DataGrid?  Understandably,
there aren't any examples yet that show how to do this.

If you have the time, thanks,
-TH

--- In flexcoders@..., "Ely Greenfield" <egreenfi@...>
wrote:

>
>
>
> Hi Patrick. THe only way would be to use a labelFunction on your axis
> and manually insert a line break yourself.
>
> Ely.
>
>
> ________________________________
>
> From: flexcoders@... [mailto:flexcoders@...]
On

> Behalf Of dj
> Sent: Friday, November 17, 2006 2:34 PM
> To: flexcoders@...
> Subject: [flexcoders] Ely: How do you wordwrap a label on a bar chart?
>
>
>
> A Vertical Axis why Field, my labels are being cut off, my width
> dimension is fixed to 280 pixels, so the column needs to wrap down?
>
> Thanks,
> Patrick
>



RE: Re: Ely: How do you wordwrap a label on a bar chart?

by Ely Greenfield :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

 
 
 
Hi Tim.  yes, the AxisRenderer supports a property called
'labelRenderer' which is very much like an item renderer.  Pass the
AxisRenderer a reference to a class (wrapped in a classFactory, just as
with itemRenderers) that extends UIComponent, ProgrammaticSkin, or one
of the existing Flex components, and implements the IDataRenderer
interface.  The AxisRenderer will instantiate one of these for each
label it needs to show, and assign the label to the labelRenderer's
'data' property.
 
I don't think there are any examples out there of how to do this today.
 
Ely.
 
 
p.s. You could also consider writing a custom axisRenderer...there's a
pretty exhaustive example of how to do that in the Interactive Bubble
Chart on my blog, http://www.quietlyscheming.com/.  You could
theoretically create two axis renderers that stack on the left hand side
that way, although that's a pretty big undertaking.
 
 
 
 
________________________________

From: flexcoders@... [mailto:flexcoders@...] On
Behalf Of Tim Hoff
Sent: Friday, November 17, 2006 3:37 PM
To: flexcoders@...
Subject: [flexcoders] Re: Ely: How do you wordwrap a label on a bar
chart?



Hi Ely,

I got this far with wordwrapping the label text, but my question is
more complicated.  I want to have two verticalAxisRenderers, side-by-
side, on the same side of a ColumnChart.  Or, create a single
LabelRenderer to simulate this.  One of the labels needs a shaded
background with text, while the other is just text.  While digging
into it, the docs say to use IFactory for a chart LabelRenderer.  Is
this similar to an ItemRenderer for a DataGrid?  Understandably,
there aren't any examples yet that show how to do this.

If you have the time, thanks,
-TH

--- In flexcoders@..., "Ely Greenfield" <egreenfi@...>
wrote:

>
>
>
> Hi Patrick. THe only way would be to use a labelFunction on your axis
> and manually insert a line break yourself.
>
> Ely.
>
>
> ________________________________
>
> From: flexcoders@... [mailto:flexcoders@...]
On

> Behalf Of dj
> Sent: Friday, November 17, 2006 2:34 PM
> To: flexcoders@...
> Subject: [flexcoders] Ely: How do you wordwrap a label on a bar chart?
>
>
>
> A Vertical Axis why Field, my labels are being cut off, my width
> dimension is fixed to 280 pixels, so the column needs to wrap down?
>
> Thanks,
> Patrick
>


 

Re: Ely: How do you wordwrap a label on a bar chart?

by turbo_vb :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


Let me restate this.  I'm in chart purgatory right now, and I got the
chart type mixed up.  It's a bar chart that has a CatagoryField="name"
and a second CategoryField="rank".  The two fields line-up vertically on
both sides of the chart.  I want the name (non-shaded) and rank (shaded)
on the same side.  Sorry for the confusion.

-TH

--- In flexcoders@..., "Tim Hoff" <TimHoff@...> wrote:

>
>
> Hi Ely,
>
> I got this far with wordwrapping the label text, but my question is
> more complicated. I want to have two verticalAxisRenderers, side-by-
> side, on the same side of a ColumnChart. Or, create a single
> LabelRenderer to simulate this. One of the labels needs a shaded
> background with text, while the other is just text. While digging
> into it, the docs say to use IFactory for a chart LabelRenderer. Is
> this similar to an ItemRenderer for a DataGrid? Understandably,
> there aren't any examples yet that show how to do this.
>
> If you have the time, thanks,
> -TH
>
> --- In flexcoders@..., "Ely Greenfield" egreenfi@
> wrote:
> >
> >
> >
> > Hi Patrick. THe only way would be to use a labelFunction on your
axis

> > and manually insert a line break yourself.
> >
> > Ely.
> >
> >
> > ________________________________
> >
> > From: flexcoders@... [mailto:flexcoders@...]
> On
> > Behalf Of dj
> > Sent: Friday, November 17, 2006 2:34 PM
> > To: flexcoders@...
> > Subject: [flexcoders] Ely: How do you wordwrap a label on a bar
chart?

> >
> >
> >
> > A Vertical Axis why Field, my labels are being cut off, my width
> > dimension is fixed to 280 pixels, so the column needs to wrap down?
> >
> > Thanks,
> > Patrick
> >
>





Re: Ely: How do you wordwrap a label on a bar chart?

by turbo_vb :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


Thanks Ely, that makes sense now.  I'll give it a try.  Luckily, both
series are using the same dataProvider, so I'll have access to the data
property and probably be able to eliminate the second axis completely.
Thanks for the tips and the source to your interactive calendar
component
<http://www.quietlyscheming.com/blog/components/interactive-calendar/> .
Great Stuff!

-TH

--- In flexcoders@..., "Ely Greenfield" <egreenfi@...>
wrote:
>
>
>
>
> Hi Tim. yes, the AxisRenderer supports a property called
> 'labelRenderer' which is very much like an item renderer. Pass the
> AxisRenderer a reference to a class (wrapped in a classFactory, just
as
> with itemRenderers) that extends UIComponent, ProgrammaticSkin, or one
> of the existing Flex components, and implements the IDataRenderer
> interface. The AxisRenderer will instantiate one of these for each
> label it needs to show, and assign the label to the labelRenderer's
> 'data' property.
>
> I don't think there are any examples out there of how to do this
today.
>
> Ely.
>
>
> p.s. You could also consider writing a custom axisRenderer...there's a
> pretty exhaustive example of how to do that in the Interactive Bubble
> Chart on my blog, http://www.quietlyscheming.com/. You could
> theoretically create two axis renderers that stack on the left hand
side
> that way, although that's a pretty big undertaking.
>
>
>
>
> ________________________________
>
> From: flexcoders@... [mailto:flexcoders@...]
On

> Behalf Of Tim Hoff
> Sent: Friday, November 17, 2006 3:37 PM
> To: flexcoders@...
> Subject: [flexcoders] Re: Ely: How do you wordwrap a label on a bar
> chart?
>
>
>
> Hi Ely,
>
> I got this far with wordwrapping the label text, but my question is
> more complicated. I want to have two verticalAxisRenderers, side-by-
> side, on the same side of a ColumnChart. Or, create a single
> LabelRenderer to simulate this. One of the labels needs a shaded
> background with text, while the other is just text. While digging
> into it, the docs say to use IFactory for a chart LabelRenderer. Is
> this similar to an ItemRenderer for a DataGrid? Understandably,
> there aren't any examples yet that show how to do this.
>
> If you have the time, thanks,
> -TH
>
> --- In flexcoders@..., "Ely Greenfield" egreenfi@
> wrote:
> >
> >
> >
> > Hi Patrick. THe only way would be to use a labelFunction on your
axis

> > and manually insert a line break yourself.
> >
> > Ely.
> >
> >
> > ________________________________
> >
> > From: flexcoders@... [mailto:flexcoders@...]
> On
> > Behalf Of dj
> > Sent: Friday, November 17, 2006 2:34 PM
> > To: flexcoders@...
> > Subject: [flexcoders] Ely: How do you wordwrap a label on a bar
chart?

> >
> >
> >
> > A Vertical Axis why Field, my labels are being cut off, my width
> > dimension is fixed to 280 pixels, so the column needs to wrap down?
> >
> > Thanks,
> > Patrick
> >
>



Re: Ely: How do you wordwrap a label on a bar chart?

by turbo_vb :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


Patrick,

Sorry to highjack your thread.  Here's a method to display a multi-lined
Axis label:

labelFunction:
public function
wrapLabel(cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String
{
     var pattern:RegExp = /-/;
     return cat.replace(pattern, "-\n");
}

Axis:
<mx:horizontalAxis>
     <mx:CategoryAxis categoryField="CategoryField"
labelFunction="wrapLabel"/>
</mx:horizontalAxis>

This example changes:

11/17/06 - 12/16/06

to

11/17/06 -
12/16/06

By using regular expresions, you have quite a bit of flexibility.

-TH
__________________________________

Tim Hoff
Cynergy Systems, Inc.
http://www.cynergysystems.com
Office <http://www.cynergysystems.comoffice/> : 866-CYNERGY


--- In flexcoders@..., "Tim Hoff" <TimHoff@...> wrote:
>
>
> Thanks Ely, that makes sense now. I'll give it a try. Luckily, both
> series are using the same dataProvider, so I'll have access to the
data
> property and probably be able to eliminate the second axis completely.
> Thanks for the tips and the source to your interactive calendar
> component
> <http://www.quietlyscheming.com/blog/components/interactive-calendar/>
.

> Great Stuff!
>
> -TH
>
> --- In flexcoders@..., "Ely Greenfield" egreenfi@
> wrote:
> >
> >
> >
> >
> > Hi Tim. yes, the AxisRenderer supports a property called
> > 'labelRenderer' which is very much like an item renderer. Pass the
> > AxisRenderer a reference to a class (wrapped in a classFactory, just
> as
> > with itemRenderers) that extends UIComponent, ProgrammaticSkin, or
one

> > of the existing Flex components, and implements the IDataRenderer
> > interface. The AxisRenderer will instantiate one of these for each
> > label it needs to show, and assign the label to the labelRenderer's
> > 'data' property.
> >
> > I don't think there are any examples out there of how to do this
> today.
> >
> > Ely.
> >
> >
> > p.s. You could also consider writing a custom axisRenderer...there's
a
> > pretty exhaustive example of how to do that in the Interactive
Bubble

> > Chart on my blog, http://www.quietlyscheming.com/. You could
> > theoretically create two axis renderers that stack on the left hand
> side
> > that way, although that's a pretty big undertaking.
> >
> >
> >
> >
> > ________________________________
> >
> > From: flexcoders@... [mailto:flexcoders@...]
> On
> > Behalf Of Tim Hoff
> > Sent: Friday, November 17, 2006 3:37 PM
> > To: flexcoders@...
> > Subject: [flexcoders] Re: Ely: How do you wordwrap a label on a bar
> > chart?
> >
> >
> >
> > Hi Ely,
> >
> > I got this far with wordwrapping the label text, but my question is
> > more complicated. I want to have two verticalAxisRenderers, side-by-
> > side, on the same side of a ColumnChart. Or, create a single
> > LabelRenderer to simulate this. One of the labels needs a shaded
> > background with text, while the other is just text. While digging
> > into it, the docs say to use IFactory for a chart LabelRenderer. Is
> > this similar to an ItemRenderer for a DataGrid? Understandably,
> > there aren't any examples yet that show how to do this.
> >
> > If you have the time, thanks,
> > -TH
> >
> > --- In flexcoders@..., "Ely Greenfield" egreenfi@
> > wrote:
> > >
> > >
> > >
> > > Hi Patrick. THe only way would be to use a labelFunction on your
> axis
> > > and manually insert a line break yourself.
> > >
> > > Ely.
> > >
> > >
> > > ________________________________
> > >
> > > From: flexcoders@...
[mailto:flexcoders@...]

> > On
> > > Behalf Of dj
> > > Sent: Friday, November 17, 2006 2:34 PM
> > > To: flexcoders@...
> > > Subject: [flexcoders] Ely: How do you wordwrap a label on a bar
> chart?
> > >
> > >
> > >
> > > A Vertical Axis why Field, my labels are being cut off, my width
> > > dimension is fixed to 280 pixels, so the column needs to wrap
down?
> > >
> > > Thanks,
> > > Patrick
> > >
> >
>



Re: Re: Ely: How do you wordwrap a label on a bar chart?

by Igor Costa-2 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Or as Tim said, you could also uses this


private function toolTipReport(e:HitData):String
{
    var relatorioTip:String = "";

    relatorioTip += "<b>Custom Label:</b> "+e.item.col_1+"<br>";

    relatorioTip += "<b>Custom Label2:</b> "+ e.item.col_2 + "<br>";

    relatorioTip +="<b>Custom Label3:</b> " + e.item.col_3+"<br>";

    relatorioTip +="<b>Custom Label4:</b> "+e.item.col_5+ "<br>";

    relatorioTip += "<b>Custom Label 5:</b> " + e.item.col_6+ "<br>";

    relatorioTip += "<b>Custom Label 6:</b> " + e.item.col_7;

    return relatorioTip;

}

On 11/18/06, Tim Hoff <TimHoff@...> wrote:

>
>   Patrick,
>
> Sorry to highjack your thread.  Here's a method to display a
> multi-lined Axis label:
>
> *labelFunction:
> *public function wrapLabel
> (cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String
> {
>     var pattern:RegExp = /-/;
>     return cat.replace(pattern, "-\n");
> }
>
> *Axis:*
> <mx:horizontalAxis>
>     <mx:CategoryAxis categoryField="CategoryField" labelFunction="
> wrapLabel"/>
> </mx:horizontalAxis>
>
> This example changes:
>
> 11/17/06 - 12/16/06
>
> to
>
> 11/17/06 -
> 12/16/06
>
> By using regular expresions, you have quite a bit of flexibility.
>
> -TH
> __________________________________
>
> *Tim Hoff
> *Cynergy Systems, Inc.
> http://www.cynergysystems.com <http://www.cynergysystems.comoffice/>
> Office: 866-CYNERGY
>
>
> --- In flexcoders@..., "Tim Hoff" <TimHoff@...> wrote:
> >
> >
> > Thanks Ely, that makes sense now. I'll give it a try. Luckily, both
> > series are using the same dataProvider, so I'll have access to the data
> > property and probably be able to eliminate the second axis completely.
> > Thanks for the tips and the source to your interactive calendar
> > component
> > <http://www.quietlyscheming.com/blog/components/interactive-calendar/> .
>
> > Great Stuff!
> >
> > -TH
> >
> > --- In flexcoders@..., "Ely Greenfield" egreenfi@
> > wrote:
> > >
> > >
> > >
> > >
> > > Hi Tim. yes, the AxisRenderer supports a property called
> > > 'labelRenderer' which is very much like an item renderer. Pass the
> > > AxisRenderer a reference to a class (wrapped in a classFactory, just
> > as
> > > with itemRenderers) that extends UIComponent, ProgrammaticSkin, or one
> > > of the existing Flex components, and implements the IDataRenderer
> > > interface. The AxisRenderer will instantiate one of these for each
> > > label it needs to show, and assign the label to the labelRenderer's
> > > 'data' property.
> > >
> > > I don't think there are any examples out there of how to do this
> > today.
> > >
> > > Ely.
> > >
> > >
> > > p.s. You could also consider writing a custom axisRenderer...there's a
> > > pretty exhaustive example of how to do that in the Interactive Bubble
> > > Chart on my blog, http://www.quietlyscheming.com/. You could
> > > theoretically create two axis renderers that stack on the left hand
> > side
> > > that way, although that's a pretty big undertaking.
> > >
> > >
> > >
> > >
> > > ________________________________
> > >
> > > From: flexcoders@... [mailto:flexcoders@...]
> > On
> > > Behalf Of Tim Hoff
> > > Sent: Friday, November 17, 2006 3:37 PM
> > > To: flexcoders@...
> > > Subject: [flexcoders] Re: Ely: How do you wordwrap a label on a bar
> > > chart?
> > >
> > >
> > >
> > > Hi Ely,
> > >
> > > I got this far with wordwrapping the label text, but my question is
> > > more complicated. I want to have two verticalAxisRenderers, side-by-
> > > side, on the same side of a ColumnChart. Or, create a single
> > > LabelRenderer to simulate this. One of the labels needs a shaded
> > > background with text, while the other is just text. While digging
> > > into it, the docs say to use IFactory for a chart LabelRenderer. Is
> > > this similar to an ItemRenderer for a DataGrid? Understandably,
> > > there aren't any examples yet that show how to do this.
> > >
> > > If you have the time, thanks,
> > > -TH
> > >
> > > --- In flexcoders@..., "Ely Greenfield" egreenfi@
> > > wrote:
> > > >
> > > >
> > > >
> > > > Hi Patrick. THe only way would be to use a labelFunction on your
> > axis
> > > > and manually insert a line break yourself.
> > > >
> > > > Ely.
> > > >
> > > >
> > > > ________________________________
> > > >
> > > > From: flexcoders@... [mailto:flexcoders@...]
> > > On
> > > > Behalf Of dj
> > > > Sent: Friday, November 17, 2006 2:34 PM
> > > > To: flexcoders@...
> > > > Subject: [flexcoders] Ely: How do you wordwrap a label on a bar
> > chart?
> > > >
> > > >
> > > >
> > > > A Vertical Axis why Field, my labels are being cut off, my width
> > > > dimension is fixed to 280 pixels, so the column needs to wrap down?
> > > >
> > > > Thanks,
> > > > Patrick
> > > >
> > >
> >
>
>  
>



--
----------------------------
Igor Costa
www.igorcosta.com

Re: Re: Ely: How do you wordwrap a label on a bar chart?

by Patrick Lemiuex :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


Tim:

I gave this a shot am I missing something here?  Wordrapping isn't
working for me,
the text is still cut off.

I appreciate your time in showing me this.  Regex is all new to me, but
it's all the rage.

Thanks,
Patrick


Tim Hoff wrote:

>
> Patrick,
>
> Sorry to highjack your thread.  Here's a method to display a
> multi-lined Axis label:
>
> *labelFunction:
> *public function
> wrapLabel(cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String
> {
>     var pattern:RegExp = /-/;
>     return cat.replace(pattern, "-\n");
> }
>
> *Axis:*
> <mx:horizontalAxis>
>     <mx:CategoryAxis categoryField="CategoryField"
> labelFunction="wrapLabel"/>  
> </mx:horizontalAxis>
>
> This example changes:
>
> 11/17/06 - 12/16/06
>
> to
>
> 11/17/06 -
> 12/16/06
>
> By using regular expresions, you have quite a bit of flexibility.
>
> -TH
> __________________________________
>
> **Tim Hoff
> **Cynergy Systems, Inc.
> http://www.cynergysystems.com <http://www.cynergysystems.comoffice/>
> Office <http://www.cynergysystems.comoffice/>: 866-CYNERGY
>
>
> --- In flexcoders@..., "Tim Hoff" <TimHoff@...> wrote:
> >
> >
> > Thanks Ely, that makes sense now. I'll give it a try. Luckily, both
> > series are using the same dataProvider, so I'll have access to the data
> > property and probably be able to eliminate the second axis completely.
> > Thanks for the tips and the source to your interactive calendar
> > component
> > <http://www.quietlyscheming.com/blog/components/interactive-calendar/> .
> > Great Stuff!
> >
> > -TH
> >
> > --- In flexcoders@..., "Ely Greenfield" egreenfi@
> > wrote:
> > >
> > >
> > >
> > >
> > > Hi Tim. yes, the AxisRenderer supports a property called
> > > 'labelRenderer' which is very much like an item renderer. Pass the
> > > AxisRenderer a reference to a class (wrapped in a classFactory, just
> > as
> > > with itemRenderers) that extends UIComponent, ProgrammaticSkin, or one
> > > of the existing Flex components, and implements the IDataRenderer
> > > interface. The AxisRenderer will instantiate one of these for each
> > > label it needs to show, and assign the label to the labelRenderer's
> > > 'data' property.
> > >
> > > I don't think there are any examples out there of how to do this
> > today.
> > >
> > > Ely.
> > >
> > >
> > > p.s. You could also consider writing a custom axisRenderer...there's a
> > > pretty exhaustive example of how to do that in the Interactive Bubble
> > > Chart on my blog, http://www.quietlyscheming.com/. You could
> > > theoretically create two axis renderers that stack on the left hand
> > side
> > > that way, although that's a pretty big undertaking.
> > >
> > >
> > >
> > >
> > > ________________________________
> > >
> > > From: flexcoders@... [mailto:flexcoders@...]
> > On
> > > Behalf Of Tim Hoff
> > > Sent: Friday, November 17, 2006 3:37 PM
> > > To: flexcoders@...
> > > Subject: [flexcoders] Re: Ely: How do you wordwrap a label on a bar
> > > chart?
> > >
> > >
> > >
> > > Hi Ely,
> > >
> > > I got this far with wordwrapping the label text, but my question is
> > > more complicated. I want to have two verticalAxisRenderers, side-by-
> > > side, on the same side of a ColumnChart. Or, create a single
> > > LabelRenderer to simulate this. One of the labels needs a shaded
> > > background with text, while the other is just text. While digging
> > > into it, the docs say to use IFactory for a chart LabelRenderer. Is
> > > this similar to an ItemRenderer for a DataGrid? Understandably,
> > > there aren't any examples yet that show how to do this.
> > >
> > > If you have the time, thanks,
> > > -TH
> > >
> > > --- In flexcoders@..., "Ely Greenfield" egreenfi@
> > > wrote:
> > > >
> > > >
> > > >
> > > > Hi Patrick. THe only way would be to use a labelFunction on your
> > axis
> > > > and manually insert a line break yourself.
> > > >
> > > > Ely.
> > > >
> > > >
> > > > ________________________________
> > > >
> > > > From: flexcoders@... [mailto:flexcoders@...]
> > > On
> > > > Behalf Of dj
> > > > Sent: Friday, November 17, 2006 2:34 PM
> > > > To: flexcoders@...
> > > > Subject: [flexcoders] Ely: How do you wordwrap a label on a bar
> > chart?
> > > >
> > > >
> > > >
> > > > A Vertical Axis why Field, my labels are being cut off, my width
> > > > dimension is fixed to 280 pixels, so the column needs to wrap down?
> > > >
> > > > Thanks,
> > > > Patrick
> > > >
> > >
> >
>
>  



Re: Ely: How do you wordwrap a label on a bar chart?

by turbo_vb :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hey Patrick,

Why don't you post your code so we can see what you're doing.  It
probably has something to do with the gutters, fontSize and the
height of your chart.

-TH

--- In flexcoders@..., dj <dj@...> wrote:
>
>
> Tim:
>
> I gave this a shot am I missing something here?  Wordrapping isn't
> working for me,
> the text is still cut off.
>
> I appreciate your time in showing me this.  Regex is all new to
me, but

> it's all the rage.
>
> Thanks,
> Patrick
>
>
> Tim Hoff wrote:
> >
> > Patrick,
> >
> > Sorry to highjack your thread.  Here's a method to display a
> > multi-lined Axis label:
> >
> > *labelFunction:
> > *public function
> > wrapLabel
(cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String

> > {
> >     var pattern:RegExp = /-/;
> >     return cat.replace(pattern, "-\n");
> > }
> >
> > *Axis:*
> > <mx:horizontalAxis>
> >     <mx:CategoryAxis categoryField="CategoryField"
> > labelFunction="wrapLabel"/>  
> > </mx:horizontalAxis>
> >
> > This example changes:
> >
> > 11/17/06 - 12/16/06
> >
> > to
> >
> > 11/17/06 -
> > 12/16/06
> >
> > By using regular expresions, you have quite a bit of flexibility.
> >
> > -TH
> > __________________________________
> >
> > **Tim Hoff
> > **Cynergy Systems, Inc.
> > http://www.cynergysystems.com 
<http://www.cynergysystems.comoffice/>
> > Office <http://www.cynergysystems.comoffice/>: 866-CYNERGY
> >
> >
> > --- In flexcoders@..., "Tim Hoff" <TimHoff@> wrote:
> > >
> > >
> > > Thanks Ely, that makes sense now. I'll give it a try. Luckily,
both
> > > series are using the same dataProvider, so I'll have access to
the data
> > > property and probably be able to eliminate the second axis
completely.
> > > Thanks for the tips and the source to your interactive calendar
> > > component
> > > <http://www.quietlyscheming.com/blog/components/interactive-
calendar/> .

> > > Great Stuff!
> > >
> > > -TH
> > >
> > > --- In flexcoders@..., "Ely Greenfield" egreenfi@
> > > wrote:
> > > >
> > > >
> > > >
> > > >
> > > > Hi Tim. yes, the AxisRenderer supports a property called
> > > > 'labelRenderer' which is very much like an item renderer.
Pass the
> > > > AxisRenderer a reference to a class (wrapped in a
classFactory, just
> > > as
> > > > with itemRenderers) that extends UIComponent,
ProgrammaticSkin, or one
> > > > of the existing Flex components, and implements the
IDataRenderer
> > > > interface. The AxisRenderer will instantiate one of these
for each
> > > > label it needs to show, and assign the label to the
labelRenderer's
> > > > 'data' property.
> > > >
> > > > I don't think there are any examples out there of how to do
this
> > > today.
> > > >
> > > > Ely.
> > > >
> > > >
> > > > p.s. You could also consider writing a custom
axisRenderer...there's a
> > > > pretty exhaustive example of how to do that in the
Interactive Bubble
> > > > Chart on my blog, http://www.quietlyscheming.com/. You could
> > > > theoretically create two axis renderers that stack on the
left hand
> > > side
> > > > that way, although that's a pretty big undertaking.
> > > >
> > > >
> > > >
> > > >
> > > > ________________________________
> > > >
> > > > From: flexcoders@...
[mailto:flexcoders@...]
> > > On
> > > > Behalf Of Tim Hoff
> > > > Sent: Friday, November 17, 2006 3:37 PM
> > > > To: flexcoders@...
> > > > Subject: [flexcoders] Re: Ely: How do you wordwrap a label
on a bar
> > > > chart?
> > > >
> > > >
> > > >
> > > > Hi Ely,
> > > >
> > > > I got this far with wordwrapping the label text, but my
question is
> > > > more complicated. I want to have two verticalAxisRenderers,
side-by-
> > > > side, on the same side of a ColumnChart. Or, create a single
> > > > LabelRenderer to simulate this. One of the labels needs a
shaded
> > > > background with text, while the other is just text. While
digging
> > > > into it, the docs say to use IFactory for a chart
LabelRenderer. Is
> > > > this similar to an ItemRenderer for a DataGrid?
Understandably,

> > > > there aren't any examples yet that show how to do this.
> > > >
> > > > If you have the time, thanks,
> > > > -TH
> > > >
> > > > --- In flexcoders@..., "Ely Greenfield" egreenfi@
> > > > wrote:
> > > > >
> > > > >
> > > > >
> > > > > Hi Patrick. THe only way would be to use a labelFunction
on your
> > > axis
> > > > > and manually insert a line break yourself.
> > > > >
> > > > > Ely.
> > > > >
> > > > >
> > > > > ________________________________
> > > > >
> > > > > From: flexcoders@...
[mailto:flexcoders@...]
> > > > On
> > > > > Behalf Of dj
> > > > > Sent: Friday, November 17, 2006 2:34 PM
> > > > > To: flexcoders@...
> > > > > Subject: [flexcoders] Ely: How do you wordwrap a label on
a bar
> > > chart?
> > > > >
> > > > >
> > > > >
> > > > > A Vertical Axis why Field, my labels are being cut off, my
width
> > > > > dimension is fixed to 280 pixels, so the column needs to
wrap down?
> > > > >
> > > > > Thanks,
> > > > > Patrick
> > > > >
> > > >
> > >
> >
> >
>




Re: Re: Ely: How do you wordwrap a label on a bar chart?

by Patrick Lemiuex :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Tim:

I just posted the entire application in a zip file.  I added a player
title and it makes the text like subscript size.
I also am using Ely's comments and trying to put pictures to the left of
the bars - and I've realized, something...
I'm totally confused as to what I'm doing.  Which is par for the course
for me.

http://www.reduxdj.org/redux/polls.zip

I'm working from a previous example using the sandy distortion effects
and it may be a little convoluted
so far.

Thanks for any guidance (other than pick a new profession, of course ;)

Patrick



 From Ely's previous post:

 
A chart typically has two AxisRenderers, one for the horizontal, and one
for the vertical.
Each AxisRenderer has a labelRenderer factory associated with it. It
uses the label renderer factory to instantiate label renderer instances,
one for each label.
Your job is to create a new labelRenderer.
Your labelRenderer should probably extend UIComponent.
You would specify it like this:
 
<BarChart>
   <verticalAxisRenderer>
        <AxisRenderer labelRenderer="PicLabelRenderer" />
   </verticalAxisRenderer>
   ...
</BarChart>
 
Each PicLabelRenderer will get passed the string to render in its data
property.
It's up to you to decide how to render that string.
In your case, if I were you, I'd imagine the string would either be an
url, or used as a key to look up an image or image url in a mapping table.
 
 
Ely.








Tim Hoff wrote:

>
> Hey Patrick,
>
> Why don't you post your code so we can see what you're doing. It
> probably has something to do with the gutters, fontSize and the
> height of your chart.
>
> -TH
>
> --- In flexcoders@...
> <mailto:flexcoders%40yahoogroups.com>, dj <dj@...> wrote:
> >
> >
> > Tim:
> >
> > I gave this a shot am I missing something here? Wordrapping isn't
> > working for me,
> > the text is still cut off.
> >
> > I appreciate your time in showing me this. Regex is all new to
> me, but
> > it's all the rage.
> >
> > Thanks,
> > Patrick
> >
> >
> > Tim Hoff wrote:
> > >
> > > Patrick,
> > >
> > > Sorry to highjack your thread. Here's a method to display a
> > > multi-lined Axis label:
> > >
> > > *labelFunction:
> > > *public function
> > > wrapLabel
> (cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String
> > > {
> > > var pattern:RegExp = /-/;
> > > return cat.replace(pattern, "-\n");
> > > }
> > >
> > > *Axis:*
> > > <mx:horizontalAxis>
> > > <mx:CategoryAxis categoryField="CategoryField"
> > > labelFunction="wrapLabel"/>
> > > </mx:horizontalAxis>
> > >
> > > This example changes:
> > >
> > > 11/17/06 - 12/16/06
> > >
> > > to
> > >
> > > 11/17/06 -
> > > 12/16/06
> > >
> > > By using regular expresions, you have quite a bit of flexibility.
> > >
> > > -TH
> > > __________________________________
> > >
> > > **Tim Hoff
> > > **Cynergy Systems, Inc.
> > > http://www.cynergysystems.com <http://www.cynergysystems.com>
> <http://www.cynergysystems.comoffice/ 
> <http://www.cynergysystems.comoffice/>>
> > > Office <http://www.cynergysystems.comoffice/ 
> <http://www.cynergysystems.comoffice/>>: 866-CYNERGY
> > >
> > >
> > > --- In flexcoders@...
> <mailto:flexcoders%40yahoogroups.com>, "Tim Hoff" <TimHoff@> wrote:
> > > >
> > > >
> > > > Thanks Ely, that makes sense now. I'll give it a try. Luckily,
> both
> > > > series are using the same dataProvider, so I'll have access to
> the data
> > > > property and probably be able to eliminate the second axis
> completely.
> > > > Thanks for the tips and the source to your interactive calendar
> > > > component
> > > > <http://www.quietlyscheming.com/blog/components/interactive- 
> <http://www.quietlyscheming.com/blog/components/interactive->
> calendar/> .
> > > > Great Stuff!
> > > >
> > > > -TH
> > > >
> > > > --- In flexcoders@...
> <mailto:flexcoders%40yahoogroups.com>, "Ely Greenfield" egreenfi@
> > > > wrote:
> > > > >
> > > > >
> > > > >
> > > > >
> > > > > Hi Tim. yes, the AxisRenderer supports a property called
> > > > > 'labelRenderer' which is very much like an item renderer.
> Pass the
> > > > > AxisRenderer a reference to a class (wrapped in a
> classFactory, just
> > > > as
> > > > > with itemRenderers) that extends UIComponent,
> ProgrammaticSkin, or one
> > > > > of the existing Flex components, and implements the
> IDataRenderer
> > > > > interface. The AxisRenderer will instantiate one of these
> for each
> > > > > label it needs to show, and assign the label to the
> labelRenderer's
> > > > > 'data' property.
> > > > >
> > > > > I don't think there are any examples out there of how to do
> this
> > > > today.
> > > > >
> > > > > Ely.
> > > > >
> > > > >
> > > > > p.s. You could also consider writing a custom
> axisRenderer...there's a
> > > > > pretty exhaustive example of how to do that in the
> Interactive Bubble
> > > > > Chart on my blog, http://www.quietlyscheming.com/.
> <http://www.quietlyscheming.com/.> You could
> > > > > theoretically create two axis renderers that stack on the
> left hand
> > > > side
> > > > > that way, although that's a pretty big undertaking.
> > > > >
> > > > >
> > > > >
> > > > >
> > > > > ________________________________
> > > > >
> > > > > From: flexcoders@...
> <mailto:flexcoders%40yahoogroups.com>
> [mailto:flexcoders@... <mailto:flexcoders%40yahoogroups.com>]
> > > > On
> > > > > Behalf Of Tim Hoff
> > > > > Sent: Friday, November 17, 2006 3:37 PM
> > > > > To: flexcoders@...
> <mailto:flexcoders%40yahoogroups.com>
> > > > > Subject: [flexcoders] Re: Ely: How do you wordwrap a label
> on a bar
> > > > > chart?
> > > > >
> > > > >
> > > > >
> > > > > Hi Ely,
> > > > >
> > > > > I got this far with wordwrapping the label text, but my
> question is
> > > > > more complicated. I want to have two verticalAxisRenderers,
> side-by-
> > > > > side, on the same side of a ColumnChart. Or, create a single
> > > > > LabelRenderer to simulate this. One of the labels needs a
> shaded
> > > > > background with text, while the other is just text. While
> digging
> > > > > into it, the docs say to use IFactory for a chart
> LabelRenderer. Is
> > > > > this similar to an ItemRenderer for a DataGrid?
> Understandably,
> > > > > there aren't any examples yet that show how to do this.
> > > > >
> > > > > If you have the time, thanks,
> > > > > -TH
> > > > >
> > > > > --- In flexcoders@...
> <mailto:flexcoders%40yahoogroups.com>, "Ely Greenfield" egreenfi@
> > > > > wrote:
> > > > > >
> > > > > >
> > > > > >
> > > > > > Hi Patrick. THe only way would be to use a labelFunction
> on your
> > > > axis
> > > > > > and manually insert a line break yourself.
> > > > > >
> > > > > > Ely.
> > > > > >
> > > > > >
> > > > > > ________________________________
> > > > > >
> > > > > > From: flexcoders@...
> <mailto:flexcoders%40yahoogroups.com>
> [mailto:flexcoders@... <mailto:flexcoders%40yahoogroups.com>]
> > > > > On
> > > > > > Behalf Of dj
> > > > > > Sent: Friday, November 17, 2006 2:34 PM
> > > > > > To: flexcoders@...
> <mailto:flexcoders%40yahoogroups.com>
> > > > > > Subject: [flexcoders] Ely: How do you wordwrap a label on
> a bar
> > > > chart?
> > > > > >
> > > > > >
> > > > > >
> > > > > > A Vertical Axis why Field, my labels are being cut off, my
> width
> > > > > > dimension is fixed to 280 pixels, so the column needs to
> wrap down?
> > > > > >
> > > > > > Thanks,
> > > > > > Patrick
> > > > > >
> > > > >
> > > >
> > >
> > >
> >
>
>  



Re: Ely: How do you wordwrap a label on a bar chart?

by turbo_vb :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Ely,

That worked, thanks again.

Patrick,

I'll try to take a quick look at it during foolball tomorrow.  If
anything jumps out, I'll let you know.

-TH

--- In flexcoders@..., dj <dj@...> wrote:
>
> Tim:
>
> I just posted the entire application in a zip file.  I added a
player
> title and it makes the text like subscript size.
> I also am using Ely's comments and trying to put pictures to the
left of
> the bars - and I've realized, something...
> I'm totally confused as to what I'm doing.  Which is par for the
course
> for me.
>
> http://www.reduxdj.org/redux/polls.zip
>
> I'm working from a previous example using the sandy distortion
effects
> and it may be a little convoluted
> so far.
>
> Thanks for any guidance (other than pick a new profession, of
course ;)
>
> Patrick
>
>
>
>  From Ely's previous post:
>
>  
> A chart typically has two AxisRenderers, one for the horizontal,
and one
> for the vertical.
> Each AxisRenderer has a labelRenderer factory associated with it.
It
> uses the label renderer factory to instantiate label renderer
instances,

> one for each label.
> Your job is to create a new labelRenderer.
> Your labelRenderer should probably extend UIComponent.
> You would specify it like this:
>  
> <BarChart>
>    <verticalAxisRenderer>
>         <AxisRenderer labelRenderer="PicLabelRenderer" />
>    </verticalAxisRenderer>
>    ...
> </BarChart>
>  
> Each PicLabelRenderer will get passed the string to render in its
data
> property.
> It's up to you to decide how to render that string.
> In your case, if I were you, I'd imagine the string would either
be an
> url, or used as a key to look up an image or image url in a
mapping table.

>  
>  
> Ely.
>
>
>
>
>
>
>
>
> Tim Hoff wrote:
> >
> > Hey Patrick,
> >
> > Why don't you post your code so we can see what you're doing. It
> > probably has something to do with the gutters, fontSize and the
> > height of your chart.
> >
> > -TH
> >
> > --- In flexcoders@...
> > <mailto:flexcoders%40yahoogroups.com>, dj <dj@> wrote:
> > >
> > >
> > > Tim:
> > >
> > > I gave this a shot am I missing something here? Wordrapping
isn't

> > > working for me,
> > > the text is still cut off.
> > >
> > > I appreciate your time in showing me this. Regex is all new to
> > me, but
> > > it's all the rage.
> > >
> > > Thanks,
> > > Patrick
> > >
> > >
> > > Tim Hoff wrote:
> > > >
> > > > Patrick,
> > > >
> > > > Sorry to highjack your thread. Here's a method to display a
> > > > multi-lined Axis label:
> > > >
> > > > *labelFunction:
> > > > *public function
> > > > wrapLabel
> > (cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String
> > > > {
> > > > var pattern:RegExp = /-/;
> > > > return cat.replace(pattern, "-\n");
> > > > }
> > > >
> > > > *Axis:*
> > > > <mx:horizontalAxis>
> > > > <mx:CategoryAxis categoryField="CategoryField"
> > > > labelFunction="wrapLabel"/>
> > > > </mx:horizontalAxis>
> > > >
> > > > This example changes:
> > > >
> > > > 11/17/06 - 12/16/06
> > > >
> > > > to
> > > >
> > > > 11/17/06 -
> > > > 12/16/06
> > > >
> > > > By using regular expresions, you have quite a bit of
flexibility.

> > > >
> > > > -TH
> > > > __________________________________
> > > >
> > > > **Tim Hoff
> > > > **Cynergy Systems, Inc.
> > > > http://www.cynergysystems.com <http://www.cynergysystems.com>
> > <http://www.cynergysystems.comoffice/ 
> > <http://www.cynergysystems.comoffice/>>
> > > > Office <http://www.cynergysystems.comoffice/ 
> > <http://www.cynergysystems.comoffice/>>: 866-CYNERGY
> > > >
> > > >
> > > > --- In flexcoders@...
> > <mailto:flexcoders%40yahoogroups.com>, "Tim Hoff" <TimHoff@>
wrote:
> > > > >
> > > > >
> > > > > Thanks Ely, that makes sense now. I'll give it a try.
Luckily,
> > both
> > > > > series are using the same dataProvider, so I'll have
access to
> > the data
> > > > > property and probably be able to eliminate the second axis
> > completely.
> > > > > Thanks for the tips and the source to your interactive
calendar
> > > > > component
> > > > >
<http://www.quietlyscheming.com/blog/components/interactive- 

> > <http://www.quietlyscheming.com/blog/components/interactive->
> > calendar/> .
> > > > > Great Stuff!
> > > > >
> > > > > -TH
> > > > >
> > > > > --- In flexcoders@...
> > <mailto:flexcoders%40yahoogroups.com>, "Ely Greenfield" egreenfi@
> > > > > wrote:
> > > > > >
> > > > > >
> > > > > >
> > > > > >
> > > > > > Hi Tim. yes, the AxisRenderer supports a property called
> > > > > > 'labelRenderer' which is very much like an item renderer.
> > Pass the
> > > > > > AxisRenderer a reference to a class (wrapped in a
> > classFactory, just
> > > > > as
> > > > > > with itemRenderers) that extends UIComponent,
> > ProgrammaticSkin, or one
> > > > > > of the existing Flex components, and implements the
> > IDataRenderer
> > > > > > interface. The AxisRenderer will instantiate one of these
> > for each
> > > > > > label it needs to show, and assign the label to the
> > labelRenderer's
> > > > > > 'data' property.
> > > > > >
> > > > > > I don't think there are any examples out there of how to
do

> > this
> > > > > today.
> > > > > >
> > > > > > Ely.
> > > > > >
> > > > > >
> > > > > > p.s. You could also consider writing a custom
> > axisRenderer...there's a
> > > > > > pretty exhaustive example of how to do that in the
> > Interactive Bubble
> > > > > > Chart on my blog, http://www.quietlyscheming.com/.
> > <http://www.quietlyscheming.com/.> You could
> > > > > > theoretically create two axis renderers that stack on the
> > left hand
> > > > > side
> > > > > > that way, although that's a pretty big undertaking.
> > > > > >
> > > > > >
> > > > > >
> > > > > >
> > > > > > ________________________________
> > > > > >
> > > > > > From: flexcoders@...
> > <mailto:flexcoders%40yahoogroups.com>
> > [mailto:flexcoders@... <mailto:flexcoders%
40yahoogroups.com>]
> > > > > On
> > > > > > Behalf Of Tim Hoff
> > > > > > Sent: Friday, November 17, 2006 3:37 PM
> > > > > > To: flexcoders@...
> > <mailto:flexcoders%40yahoogroups.com>
> > > > > > Subject: [flexcoders] Re: Ely: How do you wordwrap a
label

> > on a bar
> > > > > > chart?
> > > > > >
> > > > > >
> > > > > >
> > > > > > Hi Ely,
> > > > > >
> > > > > > I got this far with wordwrapping the label text, but my
> > question is
> > > > > > more complicated. I want to have two
verticalAxisRenderers,
> > side-by-
> > > > > > side, on the same side of a ColumnChart. Or, create a
single

> > > > > > LabelRenderer to simulate this. One of the labels needs a
> > shaded
> > > > > > background with text, while the other is just text. While
> > digging
> > > > > > into it, the docs say to use IFactory for a chart
> > LabelRenderer. Is
> > > > > > this similar to an ItemRenderer for a DataGrid?
> > Understandably,
> > > > > > there aren't any examples yet that show how to do this.
> > > > > >
> > > > > > If you have the time, thanks,
> > > > > > -TH
> > > > > >
> > > > > > --- In flexcoders@...
> > <mailto:flexcoders%40yahoogroups.com>, "Ely Greenfield" egreenfi@
> > > > > > wrote:
> > > > > > >
> > > > > > >
> > > > > > >
> > > > > > > Hi Patrick. THe only way would be to use a
labelFunction

> > on your
> > > > > axis
> > > > > > > and manually insert a line break yourself.
> > > > > > >
> > > > > > > Ely.
> > > > > > >
> > > > > > >
> > > > > > > ________________________________
> > > > > > >
> > > > > > > From: flexcoders@...
> > <mailto:flexcoders%40yahoogroups.com>
> > [mailto:flexcoders@... <mailto:flexcoders%
40yahoogroups.com>]
> > > > > > On
> > > > > > > Behalf Of dj
> > > > > > > Sent: Friday, November 17, 2006 2:34 PM
> > > > > > > To: flexcoders@...
> > <mailto:flexcoders%40yahoogroups.com>
> > > > > > > Subject: [flexcoders] Ely: How do you wordwrap a label
on
> > a bar
> > > > > chart?
> > > > > > >
> > > > > > >
> > > > > > >
> > > > > > > A Vertical Axis why Field, my labels are being cut
off, my
> > width
> > > > > > > dimension is fixed to 280 pixels, so the column needs
to

> > wrap down?
> > > > > > >
> > > > > > > Thanks,
> > > > > > > Patrick
> > > > > > >
> > > > > >
> > > > >
> > > >
> > > >
> > >
> >
> >
>




Re: Ely: How do you wordwrap a label on a bar chart?

by turbo_vb :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


Patrick,

A quick and dirty solution for your app, would be to use this
labelFunction for the CategoryAxis.  This would add a new line in place
of the second space (not a great RegExp, but I couldn't locate an easy
way to find the second space).

public function
wrapLabel(cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String
{
      var pattern:RegExp = /\s/;
      cat = cat.replace(pattern, "%%");
      pattern = /\s/;
      cat = cat.replace(pattern, "\n");
      pattern = /%%/;
      return cat.replace(pattern, "\s");
}

A more involved method would be to use a labelRenderer (similar to the
following), for the AxisRenderer.  For word-wrap, you would change the
_label variable type from Label to UITextField or TextArea; and set the
desired styles and properties.  Caveat: I've found that if the entire
view is using a show effect (like yours), the app locks-up (probably
asking the player to do too much).  Also, if you use a showDataEffect on
a series of a chart, the effect doesn't play if you use a labelRenderer.

//___________________________________

<mx:verticalAxisRenderer>
   <mx:AxisRenderer labelRenderer="view.chart.MyAxisLabelRenderer"/>
</mx:verticalAxisRenderer>

//___________________________________

package view.chart
{
   import mx.core.UIComponent;
   import mx.core.IDataRenderer;
   import mx.charts.AxisLabel;
   import mx.controls.Label;

   public class MyAxisLabelRenderer extends UIComponent implements
IDataRenderer
   {
     private var _axisLabel:AxisLabel;
     private var _label:Label;

   public function MyAxisLabelRenderer():void
   {
     super();
     _label = new Label();
     addChild(_label);
   }

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

   public function set data(value:Object):void
   {
     if (_axisLabel == value)
       return;
     _axisLabel = AxisLabel(value);

     if(_chartItem != null)
     {
       _label.text = AxisLabel(_axisLabel).text.toString();
     }
   }

   override protected function
updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
   {
     super.updateDisplayList(unscaledWidth, unscaledHeight);

     _label.setStyle("textAlign","right");
     _label.width = 200; //this could be dynamic; based on the gutter
size
   
_label.setActualSize(_label.getExplicitOrMeasuredWidth(),_label.getExpli\
citOrMeasuredHeight());
     _label.move(-200,-6); //this could be dynamic; based on the gutter
size
   }
  }
}

Hopefully, this will give you some ideas,
-TH
__________________________________

Tim Hoff
Cynergy Systems, Inc.
http://www.cynergysystems.com
Office <http://www.cynergysystems.comoffice/> : 866-CYNERGY



--- In flexcoders@..., "Tim Hoff" <TimHoff@...> wrote:

>
> Ely,
>
> That worked, thanks again.
>
> Patrick,
>
> I'll try to take a quick look at it during foolball tomorrow. If
> anything jumps out, I'll let you know.
>
> -TH
>
> --- In flexcoders@..., dj dj@ wrote:
> >
> > Tim:
> >
> > I just posted the entire application in a zip file. I added a
> player
> > title and it makes the text like subscript size.
> > I also am using Ely's comments and trying to put pictures to the
> left of
> > the bars - and I've realized, something...
> > I'm totally confused as to what I'm doing. Which is par for the
> course
> > for me.
> >
> > http://www.reduxdj.org/redux/polls.zip
> >
> > I'm working from a previous example using the sandy distortion
> effects
> > and it may be a little convoluted
> > so far.
> >
> > Thanks for any guidance (other than pick a new profession, of
> course ;)
> >
> > Patrick
> >
> >
> >
> > From Ely's previous post:
> >
> >
> > A chart typically has two AxisRenderers, one for the horizontal,
> and one
> > for the vertical.
> > Each AxisRenderer has a labelRenderer factory associated with it.
> It
> > uses the label renderer factory to instantiate label renderer
> instances,
> > one for each label.
> > Your job is to create a new labelRenderer.
> > Your labelRenderer should probably extend UIComponent.
> > You would specify it like this:
> >
> > <BarChart>
> > <verticalAxisRenderer>
> > <AxisRenderer labelRenderer="PicLabelRenderer" />
> > </verticalAxisRenderer>
> > ...
> > </BarChart>
> >
> > Each PicLabelRenderer will get passed the string to render in its
> data
> > property.
> > It's up to you to decide how to render that string.
> > In your case, if I were you, I'd imagine the string would either
> be an
> > url, or used as a key to look up an image or image url in a
> mapping table.
> >
> >
> > Ely.
> >
> >
> >
> >
> >
> >
> >
> >
> > Tim Hoff wrote:
> > >
> > > Hey Patrick,
> > >
> > > Why don't you post your code so we can see what you're doing. It
> > > probably has something to do with the gutters, fontSize and the
> > > height of your chart.
> > >
> > > -TH
> > >
> > > --- In flexcoders@...
> > > <mailto:flexcoders%40yahoogroups.com>, dj <dj@> wrote:
> > > >
> > > >
> > > > Tim:
> > > >
> > > > I gave this a shot am I missing something here? Wordrapping
> isn't
> > > > working for me,
> > > > the text is still cut off.
> > > >
> > > > I appreciate your time in showing me this. Regex is all new to
> > > me, but
> > > > it's all the rage.
> > > >
> > > > Thanks,
> > > > Patrick
> > > >
> > > >
> > > > Tim Hoff wrote:
> > > > >
> > > > > Patrick,
> > > > >
> > > > > Sorry to highjack your thread. Here's a method to display a
> > > > > multi-lined Axis label:
> > > > >
> > > > > *labelFunction:
> > > > > *public function
> > > > > wrapLabel
> > > (cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String
> > > > > {
> > > > > var pattern:RegExp = /-/;
> > > > > return cat.replace(pattern, "-\n");
> > > > > }
> > > > >
> > > > > *Axis:*
> > > > > <mx:horizontalAxis>
> > > > > <mx:CategoryAxis categoryField="CategoryField"
> > > > > labelFunction="wrapLabel"/>
> > > > > </mx:horizontalAxis>
> > > > >
> > > > > This example changes:
> > > > >
> > > > > 11/17/06 - 12/16/06
> > > > >
> > > > > to
> > > > >
> > > > > 11/17/06 -
> > > > > 12/16/06
> > > > >
> > > > > By using regular expresions, you have quite a bit of
> flexibility.
> > > > >
> > > > > -TH
> > > > > __________________________________
> > > > >
> > > > > **Tim Hoff
> > > > > **Cynergy Systems, Inc.
> > > > > http://www.cynergysystems.com <http://www.cynergysystems.com>
> > > <http://www.cynergysystems.comoffice/
> > > <http://www.cynergysystems.comoffice/>>
> > > > > Office <http://www.cynergysystems.comoffice/
> > > <http://www.cynergysystems.comoffice/>>: 866-CYNERGY
> > > > >
> > > > >
> > > > > --- In flexcoders@...
> > > <mailto:flexcoders%40yahoogroups.com>, "Tim Hoff" <TimHoff@>
> wrote:
> > > > > >
> > > > > >
> > > > > > Thanks Ely, that makes sense now. I'll give it a try.
> Luckily,
> > > both
> > > > > > series are using the same dataProvider, so I'll have
> access to
> > > the data
> > > > > > property and probably be able to eliminate the second axis
> > > completely.
> > > > > > Thanks for the tips and the source to your interactive
> calendar
> > > > > > component
> > > > > >
> <http://www.quietlyscheming.com/blog/components/interactive-
> > > <http://www.quietlyscheming.com/blog/components/interactive->
> > > calendar/> .
> > > > > > Great Stuff!
> > > > > >
> > > > > > -TH
> > > > > >
> > > > > > --- In flexcoders@...
> > > <mailto:flexcoders%40yahoogroups.com>, "Ely Greenfield" egreenfi@
> > > > > > wrote:
> > > > > > >
> > > > > > >
> > > > > > >
> > > > > > >
> > > > > > > Hi Tim. yes, the AxisRenderer supports a property called
> > > > > > > 'labelRenderer' which is very much like an item renderer.
> > > Pass the
> > > > > > > AxisRenderer a reference to a class (wrapped in a
> > > classFactory, just
> > > > > > as
> > > > > > > with itemRenderers) that extends UIComponent,
> > > ProgrammaticSkin, or one
> > > > > > > of the existing Flex components, and implements the
> > > IDataRenderer
> > > > > > > interface. The AxisRenderer will instantiate one of these
> > > for each
> > > > > > > label it needs to show, and assign the label to the
> > > labelRenderer's
> > > > > > > 'data' property.
> > > > > > >
> > > > > > > I don't think there are any examples out there of how to
> do
> > > this
> > > > > > today.
> > > > > > >
> > > > > > > Ely.
> > > > > > >
> > > > > > >
> > > > > > > p.s. You could also consider writing a custom
> > > axisRenderer...there's a
> > > > > > > pretty exhaustive example of how to do that in the
> > > Interactive Bubble
> > > > > > > Chart on my blog, http://www.quietlyscheming.com/.
> > > <http://www.quietlyscheming.com/.> You could
> > > > > > > theoretically create two axis renderers that stack on the
> > > left hand
> > > > > > side
> > > > > > > that way, although that's a pretty big undertaking.
> > > > > > >
> > > > > > >
> > > > > > >
> > > > > > >
> > > > > > > ________________________________
> > > > > > >
> > > > > > > From: flexcoders@...
> > > <mailto:flexcoders%40yahoogroups.com>
> > > [mailto:flexcoders@... <mailto:flexcoders%
> 40yahoogroups.com>]
> > > > > > On
> > > > > > > Behalf Of Tim Hoff
> > > > > > > Sent: Friday, November 17, 2006 3:37 PM
> > > > > > > To: flexcoders@...
> > > <mailto:flexcoders%40yahoogroups.com>
> > > > > > > Subject: [flexcoders] Re: Ely: How do you wordwrap a
> label
> > > on a bar
> > > > > > > chart?
> > > > > > >
> > > > > > >
> > > > > > >
> > > > > > > Hi Ely,
> > > > > > >
> > > > > > > I got this far with wordwrapping the label text, but my
> > > question is
> > > > > > > more complicated. I want to have two
> verticalAxisRenderers,
> > > side-by-
> > > > > > > side, on the same side of a ColumnChart. Or, create a
> single
> > > > > > > LabelRenderer to simulate this. One of the labels needs a
> > > shaded
> > > > > > > background with text, while the other is just text. While
> > > digging
> > > > > > > into it, the docs say to use IFactory for a chart
> > > LabelRenderer. Is
> > > > > > > this similar to an ItemRenderer for a DataGrid?
> > > Understandably,
> > > > > > > there aren't any examples yet that show how to do this.
> > > > > > >
> > > > > > > If you have the time, thanks,
> > > > > > > -TH
> > > > > > >
> > > > > > > --- In flexcoders@...
> > > <mailto:flexcoders%40yahoogroups.com>, "Ely Greenfield" egreenfi@
> > > > > > > wrote:
> > > > > > > >
> > > > > > > >
> > > > > > > >
> > > > > > > > Hi Patrick. THe only way would be to use a
> labelFunction
> > > on your
> > > > > > axis
> > > > > > > > and manually insert a line break yourself.
> > > > > > > >
> > > > > > > > Ely.
> > > > > > > >
> > > > > > > >
> > > > > > > > ________________________________
> > > > > > > >
> > > > > > > > From: flexcoders@...
> > > <mailto:flexcoders%40yahoogroups.com>
> > > [mailto:flexcoders@... <mailto:flexcoders%
> 40yahoogroups.com>]
> > > > > > > On
> > > > > > > > Behalf Of dj
> > > > > > > > Sent: Friday, November 17, 2006 2:34 PM
> > > > > > > > To: flexcoders@...
> > > <mailto:flexcoders%40yahoogroups.com>
> > > > > > > > Subject: [flexcoders] Ely: How do you wordwrap a label
> on
> > > a bar
> > > > > > chart?
> > > > > > > >
> > > > > > > >
> > > > > > > >
> > > > > > > > A Vertical Axis why Field, my labels are being cut
> off, my
> > > width
> > > > > > > > dimension is fixed to 280 pixels, so the column needs
> to
> > > wrap down?
> > > > > > > >
> > > > > > > > Thanks,
> > > > > > > > Patrick
> > > > > > > >
> > > > > > >
> > > > > >
> > > > >
> > > > >
> > > >
> > >
> > >
> >
>



Re: Re: Ely: How do you wordwrap a label on a bar chart?

by Patrick Lemiuex :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Tim:

That's great, this helps me wrap my head around how to use a custom
label renderer class.
I'll give both a shot. I guess a super dirty solution would be to stack
these images
on top of canvas next to the chart, but that sounds cheesy.

By the way who were you rooting for in your game, hopefully not the radiers:

ok, a kid goes to his counselor and says he wants to live somewhere else
because hes getting beat. The counselor asks if he wants to live with
his dad, but he says no because he beats him. The counselor asks if he
wants to live with one of his aunts, and he says no because they beat
him too. Then, she asks if he wants to live with his grandparents, and
he says no, because they beat him too. Finally, the counselor asks "who
do you want to live with"?!!? He says, the raiders, cause they don't
beat anybody.

Thanks time,
Patrick

 




Tim Hoff wrote:

>
> Patrick,
>
> A quick and dirty solution for your app, would be to use this
> labelFunction for the CategoryAxis.  This would add a new line in
> place of the second space (not a great RegExp, but I couldn't locate
> an easy way to find the second space).
>
> public function
> wrapLabel(cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String
> {
>      var pattern:RegExp = /\s/;
>      cat = cat.replace(pattern, "%%");
>      pattern = /\s/;
>      cat = cat.replace(pattern, "\n");
>      pattern = /%%/;
>      return cat.replace(pattern, "\s");
> }
>
> A more involved method would be to use a labelRenderer (similar to the
> following), for the AxisRenderer.  For word-wrap, you would change
> the _label variable type from Label to UITextField or TextArea; and
> set the desired styles and properties.  Caveat: I've found that if the
> entire view is using a show effect (like yours), the app locks-up
> (probably asking the player to do too much).  Also, if you use a
> showDataEffect on a series of a chart, the effect doesn't play if you
> use a labelRenderer.
>
> //___________________________________
>
> <mx:verticalAxisRenderer>
>   <mx:AxisRenderer labelRenderer="view.chart.MyAxisLabelRenderer"/>
> </mx:verticalAxisRenderer>
>
> //___________________________________
>
> package view.chart
> {
>   import mx.core.UIComponent;
>   import mx.core.IDataRenderer;
>   import mx.charts.AxisLabel;
>   import mx.controls.Label;
>
>   public class MyAxisLabelRenderer extends UIComponent implements
> IDataRenderer
>   {
>     private var _axisLabel:AxisLabel;
>     private var _label:Label;
>  
>   public function MyAxisLabelRenderer():void
>   {
>     super();
>     _label = new Label();
>     addChild(_label);  
>   }
>
>   public function get data():Object
>   {
>     return _axisLabel;
>   }
>
>   public function set data(value:Object):void
>   {
>     if (_axisLabel == value)
>       return;
>     _axisLabel = AxisLabel(value);
>
>     if(_chartItem != null)
>     {
>       _label.text = AxisLabel(_axisLabel).text.toString();
>     }
>   }
>
>   override protected function
> updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
>   {
>     super.updateDisplayList(unscaledWidth, unscaledHeight);
>  
>     _label.setStyle("textAlign","right");
>     _label.width = 200; //this could be dynamic; based on the gutter size
>     _label.setActualSize(_label.getExplicitOrMeasuredWidth(),_label.getExplicitOrMeasuredHeight());
>     _label.move(-200,-6); //this could be dynamic; based on the gutter
> size
>   }
>  }
> }
>
> Hopefully, this will give you some ideas,
> -TH
> __________________________________
>
> **Tim Hoff
> **Cynergy Systems, Inc.
> http://www.cynergysystems.com <http://www.cynergysystems.comoffice/>
> Office <http://www.cynergysystems.comoffice/>: 866-CYNERGY
>
>
> --- In flexcoders@..., "Tim Hoff" <TimHoff@...> wrote:
> >
> > Ely,
> >
> > That worked, thanks again.
> >
> > Patrick,
> >
> > I'll try to take a quick look at it during foolball tomorrow. If
> > anything jumps out, I'll let you know.
> >
> > -TH
> >
> > --- In flexcoders@..., dj dj@ wrote:
> > >
> > > Tim:
> > >
> > > I just posted the entire application in a zip file. I added a
> > player
> > > title and it makes the text like subscript size.
> > > I also am using Ely's comments and trying to put pictures to the
> > left of
> > > the bars - and I've realized, something...
> > > I'm totally confused as to what I'm doing. Which is par for the
> > course
> > > for me.
> > >
> > > http://www.reduxdj.org/redux/polls.zip
> > >
> > > I'm working from a previous example using the sandy distortion
> > effects
> > > and it may be a little convoluted
> > > so far.
> > >
> > > Thanks for any guidance (other than pick a new profession, of
> > course ;)
> > >
> > > Patrick
> > >
> > >
> > >
> > > From Ely's previous post:
> > >
> > >
> > > A chart typically has two AxisRenderers, one for the horizontal,
> > and one
> > > for the vertical.
> > > Each AxisRenderer has a labelRenderer factory associated with it.
> > It
> > > uses the label renderer factory to instantiate label renderer
> > instances,
> > > one for each label.
> > > Your job is to create a new labelRenderer.
> > > Your labelRenderer should probably extend UIComponent.
> > > You would specify it like this:
> > >
> > > <BarChart>
> > > <verticalAxisRenderer>
> > > <AxisRenderer labelRenderer="PicLabelRenderer" />
> > > </verticalAxisRenderer>
> > > ...
> > > </BarChart>
> > >
> > > Each PicLabelRenderer will get passed the string to render in its
> > data
> > > property.
> > > It's up to you to decide how to render that string.
> > > In your case, if I were you, I'd imagine the string would either
> > be an
> > > url, or used as a key to look up an image or image url in a
> > mapping table.
> > >
> > >
> > > Ely.
> > >
> > >
> > >
> > >
> > >
> > >
> > >
> > >
> > > Tim Hoff wrote:
> > > >
> > > > Hey Patrick,
> > > >
> > > > Why don't you post your code so we can see what you're doing. It
> > > > probably has something to do with the gutters, fontSize and the
> > > > height of your chart.
> > > >
> > > > -TH
> > > >
> > > > --- In flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com>, dj <dj@> wrote:
> > > > >
> > > > >
> > > > > Tim:
> > > > >
> > > > > I gave this a shot am I missing something here? Wordrapping
> > isn't
> > > > > working for me,
> > > > > the text is still cut off.
> > > > >
> > > > > I appreciate your time in showing me this. Regex is all new to
> > > > me, but
> > > > > it's all the rage.
> > > > >
> > > > > Thanks,
> > > > > Patrick
> > > > >
> > > > >
> > > > > Tim Hoff wrote:
> > > > > >
> > > > > > Patrick,
> > > > > >
> > > > > > Sorry to highjack your thread. Here's a method to display a
> > > > > > multi-lined Axis label:
> > > > > >
> > > > > > *labelFunction:
> > > > > > *public function
> > > > > > wrapLabel
> > > > (cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String
> > > > > > {
> > > > > > var pattern:RegExp = /-/;
> > > > > > return cat.replace(pattern, "-\n");
> > > > > > }
> > > > > >
> > > > > > *Axis:*
> > > > > > <mx:horizontalAxis>
> > > > > > <mx:CategoryAxis categoryField="CategoryField"
> > > > > > labelFunction="wrapLabel"/>
> > > > > > </mx:horizontalAxis>
> > > > > >
> > > > > > This example changes:
> > > > > >
> > > > > > 11/17/06 - 12/16/06
> > > > > >
> > > > > > to
> > > > > >
> > > > > > 11/17/06 -
> > > > > > 12/16/06
> > > > > >
> > > > > > By using regular expresions, you have quite a bit of
> > flexibility.
> > > > > >
> > > > > > -TH
> > > > > > __________________________________
> > > > > >
> > > > > > **Tim Hoff
> > > > > > **Cynergy Systems, Inc.
> > > > > > http://www.cynergysystems.com <http://www.cynergysystems.com>
> > > > <http://www.cynergysystems.comoffice/
> > > > <http://www.cynergysystems.comoffice/>>
> > > > > > Office <http://www.cynergysystems.comoffice/
> > > > <http://www.cynergysystems.comoffice/>>: 866-CYNERGY
> > > > > >
> > > > > >
> > > > > > --- In flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com>, "Tim Hoff" <TimHoff@>
> > wrote:
> > > > > > >
> > > > > > >
> > > > > > > Thanks Ely, that makes sense now. I'll give it a try.
> > Luckily,
> > > > both
> > > > > > > series are using the same dataProvider, so I'll have
> > access to
> > > > the data
> > > > > > > property and probably be able to eliminate the second axis
> > > > completely.
> > > > > > > Thanks for the tips and the source to your interactive
> > calendar
> > > > > > > component
> > > > > > >
> > <http://www.quietlyscheming.com/blog/components/interactive-
> > > > <http://www.quietlyscheming.com/blog/components/interactive->
> > > > calendar/> .
> > > > > > > Great Stuff!
> > > > > > >
> > > > > > > -TH
> > > > > > >
> > > > > > > --- In flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com>, "Ely Greenfield" egreenfi@
> > > > > > > wrote:
> > > > > > > >
> > > > > > > >
> > > > > > > >
> > > > > > > >
> > > > > > > > Hi Tim. yes, the AxisRenderer supports a property called
> > > > > > > > 'labelRenderer' which is very much like an item renderer.
> > > > Pass the
> > > > > > > > AxisRenderer a reference to a class (wrapped in a
> > > > classFactory, just
> > > > > > > as
> > > > > > > > with itemRenderers) that extends UIComponent,
> > > > ProgrammaticSkin, or one
> > > > > > > > of the existing Flex components, and implements the
> > > > IDataRenderer
> > > > > > > > interface. The AxisRenderer will instantiate one of these
> > > > for each
> > > > > > > > label it needs to show, and assign the label to the
> > > > labelRenderer's
> > > > > > > > 'data' property.
> > > > > > > >
> > > > > > > > I don't think there are any examples out there of how to
> > do
> > > > this
> > > > > > > today.
> > > > > > > >
> > > > > > > > Ely.
> > > > > > > >
> > > > > > > >
> > > > > > > > p.s. You could also consider writing a custom
> > > > axisRenderer...there's a
> > > > > > > > pretty exhaustive example of how to do that in the
> > > > Interactive Bubble
> > > > > > > > Chart on my blog, http://www.quietlyscheming.com/.
> > > > <http://www.quietlyscheming.com/.> You could
> > > > > > > > theoretically create two axis renderers that stack on the
> > > > left hand
> > > > > > > side
> > > > > > > > that way, although that's a pretty big undertaking.
> > > > > > > >
> > > > > > > >
> > > > > > > >
> > > > > > > >
> > > > > > > > ________________________________
> > > > > > > >
> > > > > > > > From: flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com>
> > > > [mailto:flexcoders@... <mailto:flexcoders%
> > 40yahoogroups.com>]
> > > > > > > On
> > > > > > > > Behalf Of Tim Hoff
> > > > > > > > Sent: Friday, November 17, 2006 3:37 PM
> > > > > > > > To: flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com>
> > > > > > > > Subject: [flexcoders] Re: Ely: How do you wordwrap a
> > label
> > > > on a bar
> > > > > > > > chart?
> > > > > > > >
> > > > > > > >
> > > > > > > >
> > > > > > > > Hi Ely,
> > > > > > > >
> > > > > > > > I got this far with wordwrapping the label text, but my
> > > > question is
> > > > > > > > more complicated. I want to have two
> > verticalAxisRenderers,
> > > > side-by-
> > > > > > > > side, on the same side of a ColumnChart. Or, create a
> > single
> > > > > > > > LabelRenderer to simulate this. One of the labels needs a
> > > > shaded
> > > > > > > > background with text, while the other is just text. While
> > > > digging
> > > > > > > > into it, the docs say to use IFactory for a chart
> > > > LabelRenderer. Is
> > > > > > > > this similar to an ItemRenderer for a DataGrid?
> > > > Understandably,
> > > > > > > > there aren't any examples yet that show how to do this.
> > > > > > > >
> > > > > > > > If you have the time, thanks,
> > > > > > > > -TH
> > > > > > > >
> > > > > > > > --- In flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com>, "Ely Greenfield" egreenfi@
> > > > > > > > wrote:
> > > > > > > > >
> > > > > > > > >
> > > > > > > > >
> > > > > > > > > Hi Patrick. THe only way would be to use a
> > labelFunction
> > > > on your
> > > > > > > axis
> > > > > > > > > and manually insert a line break yourself.
> > > > > > > > >
> > > > > > > > > Ely.
> > > > > > > > >
> > > > > > > > >
> > > > > > > > > ________________________________
> > > > > > > > >
> > > > > > > > > From: flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com>
> > > > [mailto:flexcoders@... <mailto:flexcoders%
> > 40yahoogroups.com>]
> > > > > > > > On
> > > > > > > > > Behalf Of dj
> > > > > > > > > Sent: Friday, November 17, 2006 2:34 PM
> > > > > > > > > To: flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com>
> > > > > > > > > Subject: [flexcoders] Ely: How do you wordwrap a label
> > on
> > > > a bar
> > > > > > > chart?
> > > > > > > > >
> > > > > > > > >
> > > > > > > > >
> > > > > > > > > A Vertical Axis why Field, my labels are being cut
> > off, my
> > > > width
> > > > > > > > > dimension is fixed to 280 pixels, so the column needs
> > to
> > > > wrap down?
> > > > > > > > >
> > > > > > > > > Thanks,
> > > > > > > > > Patrick
> > > > > > > > >
> > > > > > > >
> > > > > > >
> > > > > >
> > > > > >
> > > > >
> > > >
> > > >
> > >
> >
>
>  



Re: Ely: How do you wordwrap a label on a bar chart?

by turbo_vb :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Indy, unfortunately.  If you wanted to add images to the Axis
labelRenderer, it's going to be a little tricky.  Unlike a DataGrid
itemRenderer, the data property of the labelRenderer only contains
the text for the label; not all of the other fields in the
dataProvider.  You can hack around this, by concatenating (with a
delimiter) the image class name to the categoryField data in the
dataProvider.  Inside the labelRenderer, separate the image class
name from the original categoryField data and use it as the source
for an image.  Obviously, you'll have to add the image as a child of
the labelRenderer as well.

-TH

--- In flexcoders@..., {reduxdj} <dj@...> wrote:
>
> Tim:
>
> That's great, this helps me wrap my head around how to use a
custom
> label renderer class.
> I'll give both a shot. I guess a super dirty solution would be to
stack
> these images
> on top of canvas next to the chart, but that sounds cheesy.
>
> By the way who were you rooting for in your game, hopefully not
the radiers:
>
> ok, a kid goes to his counselor and says he wants to live
somewhere else
> because hes getting beat. The counselor asks if he wants to live
with
> his dad, but he says no because he beats him. The counselor asks
if he
> wants to live with one of his aunts, and he says no because they
beat
> him too. Then, she asks if he wants to live with his grandparents,
and
> he says no, because they beat him too. Finally, the counselor
asks "who
> do you want to live with"?!!? He says, the raiders, cause they
don't

> beat anybody.
>
> Thanks time,
> Patrick
>
>  
>
>
>
>
> Tim Hoff wrote:
> >
> > Patrick,
> >
> > A quick and dirty solution for your app, would be to use this
> > labelFunction for the CategoryAxis.  This would add a new line
in
> > place of the second space (not a great RegExp, but I couldn't
locate
> > an easy way to find the second space).
> >
> > public function
> > wrapLabel
(cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String

> > {
> >      var pattern:RegExp = /\s/;
> >      cat = cat.replace(pattern, "%%");
> >      pattern = /\s/;
> >      cat = cat.replace(pattern, "\n");
> >      pattern = /%%/;
> >      return cat.replace(pattern, "\s");
> > }
> >
> > A more involved method would be to use a labelRenderer (similar
to the
> > following), for the AxisRenderer.  For word-wrap, you would
change
> > the _label variable type from Label to UITextField or TextArea;
and
> > set the desired styles and properties.  Caveat: I've found that
if the
> > entire view is using a show effect (like yours), the app locks-
up
> > (probably asking the player to do too much).  Also, if you use a
> > showDataEffect on a series of a chart, the effect doesn't play
if you
> > use a labelRenderer.
> >
> > //___________________________________
> >
> > <mx:verticalAxisRenderer>
> >   <mx:AxisRenderer
labelRenderer="view.chart.MyAxisLabelRenderer"/>

> > </mx:verticalAxisRenderer>
> >
> > //___________________________________
> >
> > package view.chart
> > {
> >   import mx.core.UIComponent;
> >   import mx.core.IDataRenderer;
> >   import mx.charts.AxisLabel;
> >   import mx.controls.Label;
> >
> >   public class MyAxisLabelRenderer extends UIComponent
implements

> > IDataRenderer
> >   {
> >     private var _axisLabel:AxisLabel;
> >     private var _label:Label;
> >  
> >   public function MyAxisLabelRenderer():void
> >   {
> >     super();
> >     _label = new Label();
> >     addChild(_label);  
> >   }
> >
> >   public function get data():Object
> >   {
> >     return _axisLabel;
> >   }
> >
> >   public function set data(value:Object):void
> >   {
> >     if (_axisLabel == value)
> >       return;
> >     _axisLabel = AxisLabel(value);
> >
> >     if(_chartItem != null)
> >     {
> >       _label.text = AxisLabel(_axisLabel).text.toString();
> >     }
> >   }
> >
> >   override protected function
> > updateDisplayList
(unscaledWidth:Number,unscaledHeight:Number):void
> >   {
> >     super.updateDisplayList(unscaledWidth, unscaledHeight);
> >  
> >     _label.setStyle("textAlign","right");
> >     _label.width = 200; //this could be dynamic; based on the
gutter size
> >     _label.setActualSize(_label.getExplicitOrMeasuredWidth
(),_label.getExplicitOrMeasuredHeight());
> >     _label.move(-200,-6); //this could be dynamic; based on the
gutter

> > size
> >   }
> >  }
> > }
> >
> > Hopefully, this will give you some ideas,
> > -TH
> > __________________________________
> >
> > **Tim Hoff
> > **Cynergy Systems, Inc.
> > http://www.cynergysystems.com 
<http://www.cynergysystems.comoffice/>

> > Office <http://www.cynergysystems.comoffice/>: 866-CYNERGY
> >
> >
> > --- In flexcoders@..., "Tim Hoff" <TimHoff@> wrote:
> > >
> > > Ely,
> > >
> > > That worked, thanks again.
> > >
> > > Patrick,
> > >
> > > I'll try to take a quick look at it during foolball tomorrow.
If

> > > anything jumps out, I'll let you know.
> > >
> > > -TH
> > >
> > > --- In flexcoders@..., dj dj@ wrote:
> > > >
> > > > Tim:
> > > >
> > > > I just posted the entire application in a zip file. I added a
> > > player
> > > > title and it makes the text like subscript size.
> > > > I also am using Ely's comments and trying to put pictures to
the
> > > left of
> > > > the bars - and I've realized, something...
> > > > I'm totally confused as to what I'm doing. Which is par for
the
> > > course
> > > > for me.
> > > >
> > > > http://www.reduxdj.org/redux/polls.zip
> > > >
> > > > I'm working from a previous example using the sandy
distortion

> > > effects
> > > > and it may be a little convoluted
> > > > so far.
> > > >
> > > > Thanks for any guidance (other than pick a new profession, of
> > > course ;)
> > > >
> > > > Patrick
> > > >
> > > >
> > > >
> > > > From Ely's previous post:
> > > >
> > > >
> > > > A chart typically has two AxisRenderers, one for the
horizontal,
> > > and one
> > > > for the vertical.
> > > > Each AxisRenderer has a labelRenderer factory associated
with it.

> > > It
> > > > uses the label renderer factory to instantiate label renderer
> > > instances,
> > > > one for each label.
> > > > Your job is to create a new labelRenderer.
> > > > Your labelRenderer should probably extend UIComponent.
> > > > You would specify it like this:
> > > >
> > > > <BarChart>
> > > > <verticalAxisRenderer>
> > > > <AxisRenderer labelRenderer="PicLabelRenderer" />
> > > > </verticalAxisRenderer>
> > > > ...
> > > > </BarChart>
> > > >
> > > > Each PicLabelRenderer will get passed the string to render
in its
> > > data
> > > > property.
> > > > It's up to you to decide how to render that string.
> > > > In your case, if I were you, I'd imagine the string would
either

> > > be an
> > > > url, or used as a key to look up an image or image url in a
> > > mapping table.
> > > >
> > > >
> > > > Ely.
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > Tim Hoff wrote:
> > > > >
> > > > > Hey Patrick,
> > > > >
> > > > > Why don't you post your code so we can see what you're
doing. It
> > > > > probably has something to do with the gutters, fontSize
and the

> > > > > height of your chart.
> > > > >
> > > > > -TH
> > > > >
> > > > > --- In flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com>, dj <dj@> wrote:
> > > > > >
> > > > > >
> > > > > > Tim:
> > > > > >
> > > > > > I gave this a shot am I missing something here?
Wordrapping
> > > isn't
> > > > > > working for me,
> > > > > > the text is still cut off.
> > > > > >
> > > > > > I appreciate your time in showing me this. Regex is all
new to

> > > > > me, but
> > > > > > it's all the rage.
> > > > > >
> > > > > > Thanks,
> > > > > > Patrick
> > > > > >
> > > > > >
> > > > > > Tim Hoff wrote:
> > > > > > >
> > > > > > > Patrick,
> > > > > > >
> > > > > > > Sorry to highjack your thread. Here's a method to
display a
> > > > > > > multi-lined Axis label:
> > > > > > >
> > > > > > > *labelFunction:
> > > > > > > *public function
> > > > > > > wrapLabel
> > > > >
(cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String

> > > > > > > {
> > > > > > > var pattern:RegExp = /-/;
> > > > > > > return cat.replace(pattern, "-\n");
> > > > > > > }
> > > > > > >
> > > > > > > *Axis:*
> > > > > > > <mx:horizontalAxis>
> > > > > > > <mx:CategoryAxis categoryField="CategoryField"
> > > > > > > labelFunction="wrapLabel"/>
> > > > > > > </mx:horizontalAxis>
> > > > > > >
> > > > > > > This example changes:
> > > > > > >
> > > > > > > 11/17/06 - 12/16/06
> > > > > > >
> > > > > > > to
> > > > > > >
> > > > > > > 11/17/06 -
> > > > > > > 12/16/06
> > > > > > >
> > > > > > > By using regular expresions, you have quite a bit of
> > > flexibility.
> > > > > > >
> > > > > > > -TH
> > > > > > > __________________________________
> > > > > > >
> > > > > > > **Tim Hoff
> > > > > > > **Cynergy Systems, Inc.
> > > > > > > http://www.cynergysystems.com 
<http://www.cynergysystems.com>
> > > > > <http://www.cynergysystems.comoffice/
> > > > > <http://www.cynergysystems.comoffice/>>
> > > > > > > Office <http://www.cynergysystems.comoffice/
> > > > > <http://www.cynergysystems.comoffice/>>: 866-CYNERGY
> > > > > > >
> > > > > > >
> > > > > > > --- In flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com>, "Tim Hoff"
<TimHoff@>

> > > wrote:
> > > > > > > >
> > > > > > > >
> > > > > > > > Thanks Ely, that makes sense now. I'll give it a try.
> > > Luckily,
> > > > > both
> > > > > > > > series are using the same dataProvider, so I'll have
> > > access to
> > > > > the data
> > > > > > > > property and probably be able to eliminate the
second axis
> > > > > completely.
> > > > > > > > Thanks for the tips and the source to your
interactive
> > > calendar
> > > > > > > > component
> > > > > > > >
> > > <http://www.quietlyscheming.com/blog/components/interactive-
> > > > >
<http://www.quietlyscheming.com/blog/components/interactive->
> > > > > calendar/> .
> > > > > > > > Great Stuff!
> > > > > > > >
> > > > > > > > -TH
> > > > > > > >
> > > > > > > > --- In flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com>, "Ely Greenfield"
egreenfi@
> > > > > > > > wrote:
> > > > > > > > >
> > > > > > > > >
> > > > > > > > >
> > > > > > > > >
> > > > > > > > > Hi Tim. yes, the AxisRenderer supports a property
called
> > > > > > > > > 'labelRenderer' which is very much like an item
renderer.
> > > > > Pass the
> > > > > > > > > AxisRenderer a reference to a class (wrapped in a
> > > > > classFactory, just
> > > > > > > > as
> > > > > > > > > with itemRenderers) that extends UIComponent,
> > > > > ProgrammaticSkin, or one
> > > > > > > > > of the existing Flex components, and implements the
> > > > > IDataRenderer
> > > > > > > > > interface. The AxisRenderer will instantiate one
of these
> > > > > for each
> > > > > > > > > label it needs to show, and assign the label to the
> > > > > labelRenderer's
> > > > > > > > > 'data' property.
> > > > > > > > >
> > > > > > > > > I don't think there are any examples out there of
how to

> > > do
> > > > > this
> > > > > > > > today.
> > > > > > > > >
> > > > > > > > > Ely.
> > > > > > > > >
> > > > > > > > >
> > > > > > > > > p.s. You could also consider writing a custom
> > > > > axisRenderer...there's a
> > > > > > > > > pretty exhaustive example of how to do that in the
> > > > > Interactive Bubble
> > > > > > > > > Chart on my blog, http://www.quietlyscheming.com/.
> > > > > <http://www.quietlyscheming.com/.> You could
> > > > > > > > > theoretically create two axis renderers that stack
on the

> > > > > left hand
> > > > > > > > side
> > > > > > > > > that way, although that's a pretty big undertaking.
> > > > > > > > >
> > > > > > > > >
> > > > > > > > >
> > > > > > > > >
> > > > > > > > > ________________________________
> > > > > > > > >
> > > > > > > > > From: flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com>
> > > > > [mailto:flexcoders@... <mailto:flexcoders%
> > > 40yahoogroups.com>]
> > > > > > > > On
> > > > > > > > > Behalf Of Tim Hoff
> > > > > > > > > Sent: Friday, November 17, 2006 3:37 PM
> > > > > > > > > To: flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com>
> > > > > > > > > Subject: [flexcoders] Re: Ely: How do you wordwrap
a
> > > label
> > > > > on a bar
> > > > > > > > > chart?
> > > > > > > > >
> > > > > > > > >
> > > > > > > > >
> > > > > > > > > Hi Ely,
> > > > > > > > >
> > > > > > > > > I got this far with wordwrapping the label text,
but my
> > > > > question is
> > > > > > > > > more complicated. I want to have two
> > > verticalAxisRenderers,
> > > > > side-by-
> > > > > > > > > side, on the same side of a ColumnChart. Or,
create a
> > > single
> > > > > > > > > LabelRenderer to simulate this. One of the labels
needs a
> > > > > shaded
> > > > > > > > > background with text, while the other is just
text. While
> > > > > digging
> > > > > > > > > into it, the docs say to use IFactory for a chart
> > > > > LabelRenderer. Is
> > > > > > > > > this similar to an ItemRenderer for a DataGrid?
> > > > > Understandably,
> > > > > > > > > there aren't any examples yet that show how to do
this.
> > > > > > > > >
> > > > > > > > > If you have the time, thanks,
> > > > > > > > > -TH
> > > > > > > > >
> > > > > > > > > --- In flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com>, "Ely Greenfield"
egreenfi@

> > > > > > > > > wrote:
> > > > > > > > > >
> > > > > > > > > >
> > > > > > > > > >
> > > > > > > > > > Hi Patrick. THe only way would be to use a
> > > labelFunction
> > > > > on your
> > > > > > > > axis
> > > > > > > > > > and manually insert a line break yourself.
> > > > > > > > > >
> > > > > > > > > > Ely.
> > > > > > > > > >
> > > > > > > > > >
> > > > > > > > > > ________________________________
> > > > > > > > > >
> > > > > > > > > > From: flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com>
> > > > > [mailto:flexcoders@... <mailto:flexcoders%
> > > 40yahoogroups.com>]
> > > > > > > > > On
> > > > > > > > > > Behalf Of dj
> > > > > > > > > > Sent: Friday, November 17, 2006 2:34 PM
> > > > > > > > > > To: flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com>
> > > > > > > > > > Subject: [flexcoders] Ely: How do you wordwrap a
label
> > > on
> > > > > a bar
> > > > > > > > chart?
> > > > > > > > > >
> > > > > > > > > >
> > > > > > > > > >
> > > > > > > > > > A Vertical Axis why Field, my labels are being
cut
> > > off, my
> > > > > width
> > > > > > > > > > dimension is fixed to 280 pixels, so the column
needs

> > > to
> > > > > wrap down?
> > > > > > > > > >
> > > > > > > > > > Thanks,
> > > > > > > > > > Patrick
> > > > > > > > > >
> > > > > > > > >
> > > > > > > >
> > > > > > >
> > > > > > >
> > > > > >
> > > > >
> > > > >
> > > >
> > >
> >
> >
>




RE: Re: Ely: How do you wordwrap a label on a bar chart?

by Matt Horn :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Tim's approach requires that you have a hyphen in your label as it
replaces that hyphen with a hyphen plus a newline.

Another approach would be to split the string on spaces, and then insert
a newline at the nth space. The following example puts in a newline at
the fourth occurrence of a space:

  public function defineLabel(cat:Object, pcat:Object, ax:CategoryAxis,
catItem:Object):String {
        var a:Array = cat.split(' ');
        var s:String = "";
       
        for (var i:int=0; i<a.length; i++) {
            s += a[i] + ' '; // reconstruct the label
            if (i==3) { // insert a newline at the fourth space
                s += "\n";
            }
        }
        return s;
  }

hth,
matt horn
flex docs



> -----Original Message-----
> From: flexcoders@...
> [mailto:flexcoders@...] On Behalf Of dj
> Sent: Saturday, November 18, 2006 1:21 PM
> To: flexcoders@...
> Subject: Re: [flexcoders] Re: Ely: How do you wordwrap a
> label on a bar chart?
>
>
> Tim:
>
> I gave this a shot am I missing something here? Wordrapping
> isn't working for me, the text is still cut off.
>
> I appreciate your time in showing me this. Regex is all new
> to me, but it's all the rage.
>
> Thanks,
> Patrick
>
> Tim Hoff wrote:
> >
> > Patrick,
> >
> > Sorry to highjack your thread. Here's a method to display a
> > multi-lined Axis label:
> >
> > *labelFunction:
> > *public function
> >
> wrapLabel(cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):Strin
> > g
> > {
> > var pattern:RegExp = /-/;
> > return cat.replace(pattern, "-\n");
> > }
> >
> > *Axis:*
> > <mx:horizontalAxis>
> > <mx:CategoryAxis categoryField="CategoryField"
> > labelFunction="wrapLabel"/>
> > </mx:horizontalAxis>
> >
> > This example changes:
> >
> > 11/17/06 - 12/16/06
> >
> > to
> >
> > 11/17/06 -
> > 12/16/06
> >
> > By using regular expresions, you have quite a bit of flexibility.
> >
> > -TH
> > __________________________________
> >
> > **Tim Hoff
> > **Cynergy Systems, Inc.
> > http://www.cynergysystems.com <http://www.cynergysystems.com>  
> > <http://www.cynergysystems.comoffice/ 
> > <http://www.cynergysystems.comoffice/> > Office
> > <http://www.cynergysystems.comoffice/ 
> > <http://www.cynergysystems.comoffice/> >: 866-CYNERGY
> >
> >
> > --- In flexcoders@...
> <mailto:flexcoders%40yahoogroups.com> , "Tim Hoff"
> <TimHoff@...> wrote:
> > >
> > >
> > > Thanks Ely, that makes sense now. I'll give it a try.
> Luckily, both
> > > series are using the same dataProvider, so I'll have
> access to the
> > > data property and probably be able to eliminate the
> second axis completely.
> > > Thanks for the tips and the source to your interactive calendar
> > > component
> > >
> <http://www.quietlyscheming.com/blog/components/interactive-ca
lendar/ > <http://www.quietlyscheming.com/blog/components/interactive-ca
lendar/> > .

> > > Great Stuff!
> > >
> > > -TH
> > >
> > > --- In flexcoders@...
> > > <mailto:flexcoders%40yahoogroups.com> , "Ely Greenfield" egreenfi@
> > > wrote:
> > > >
> > > >
> > > >
> > > >
> > > > Hi Tim. yes, the AxisRenderer supports a property called
> > > > 'labelRenderer' which is very much like an item
> renderer. Pass the
> > > > AxisRenderer a reference to a class (wrapped in a classFactory,
> > > > just
> > > as
> > > > with itemRenderers) that extends UIComponent,
> ProgrammaticSkin, or
> > > > one of the existing Flex components, and implements the
> > > > IDataRenderer interface. The AxisRenderer will
> instantiate one of
> > > > these for each label it needs to show, and assign the
> label to the
> > > > labelRenderer's 'data' property.
> > > >
> > > > I don't think there are any examples out there of how to do this
> > > today.
> > > >
> > > > Ely.
> > > >
> > > >
> > > > p.s. You could also consider writing a custom
> > > > axisRenderer...there's a pretty exhaustive example of how to do
> > > > that in the Interactive Bubble Chart on my blog,
> > > > http://www.quietlyscheming.com/.
> > > > <http://www.quietlyscheming.com/.>  You could
> theoretically create
> > > > two axis renderers that stack on the left hand
> > > side
> > > > that way, although that's a pretty big undertaking.
> > > >
> > > >
> > > >
> > > >
> > > > ________________________________
> > > >
> > > > From: flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com>  
> > > > [mailto:flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com> ]
> > > On
> > > > Behalf Of Tim Hoff
> > > > Sent: Friday, November 17, 2006 3:37 PM
> > > > To: flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com>
> > > > Subject: [flexcoders] Re: Ely: How do you wordwrap a label on a
> > > > bar chart?
> > > >
> > > >
> > > >
> > > > Hi Ely,
> > > >
> > > > I got this far with wordwrapping the label text, but my
> question
> > > > is more complicated. I want to have two verticalAxisRenderers,
> > > > side-by- side, on the same side of a ColumnChart. Or, create a
> > > > single LabelRenderer to simulate this. One of the
> labels needs a
> > > > shaded background with text, while the other is just
> text. While
> > > > digging into it, the docs say to use IFactory for a chart
> > > > LabelRenderer. Is this similar to an ItemRenderer for a
> DataGrid?
> > > > Understandably, there aren't any examples yet that show
> how to do this.
> > > >
> > > > If you have the time, thanks,
> > > > -TH
> > > >
> > > > --- In flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com> , "Ely
> Greenfield" egreenfi@
> > > > wrote:
> > > > >
> > > > >
> > > > >
> > > > > Hi Patrick. THe only way would be to use a
> labelFunction on your
> > > axis
> > > > > and manually insert a line break yourself.
> > > > >
> > > > > Ely.
> > > > >
> > > > >
> > > > > ________________________________
> > > > >
> > > > > From: flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com>  
> > > > > [mailto:flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com> ]
> > > > On
> > > > > Behalf Of dj
> > > > > Sent: Friday, November 17, 2006 2:34 PM
> > > > > To: flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com>
> > > > > Subject: [flexcoders] Ely: How do you wordwrap a
> label on a bar
> > > chart?
> > > > >
> > > > >
> > > > >
> > > > > A Vertical Axis why Field, my labels are being cut
> off, my width
> > > > > dimension is fixed to 280 pixels, so the column needs
> to wrap down?
> > > > >
> > > > > Thanks,
> > > > > Patrick
> > > > >
> > > >
> > >
> >
> >
>
>
>
>  
>

Re: Ely: How do you wordwrap a label on a bar chart?

by turbo_vb :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Yeah Matt,

You're correct, you can use whatever RegExp you want.  That was just
an example that I was using for dates.  The main idea is to insert
the new line, escape character, in the labelFunction.  I realized
that I wasn't as clear as I could have been, after I hit send. :)

Thanks,
-TH

--- In flexcoders@..., "Matt Horn" <mhorn@...> wrote:
>
> Tim's approach requires that you have a hyphen in your label as it
> replaces that hyphen with a hyphen plus a newline.
>
> Another approach would be to split the string on spaces, and then
insert
> a newline at the nth space. The following example puts in a
newline at
> the fourth occurrence of a space:
>
>   public function defineLabel(cat:Object, pcat:Object,
ax:CategoryAxis,

> catItem:Object):String {
>         var a:Array = cat.split(' ');
>         var s:String = "";
>        
>         for (var i:int=0; i<a.length; i++) {
>             s += a[i] + ' '; // reconstruct the label
>             if (i==3) { // insert a newline at the fourth space
>                 s += "\n";
>             }
>         }
>         return s;
>   }
>
> hth,
> matt horn
> flex docs
>
>
>
> > -----Original Message-----
> > From: flexcoders@...
> > [mailto:flexcoders@...] On Behalf Of dj
> > Sent: Saturday, November 18, 2006 1:21 PM
> > To: flexcoders@...
> > Subject: Re: [flexcoders] Re: Ely: How do you wordwrap a
> > label on a bar chart?
> >
> >
> > Tim:
> >
> > I gave this a shot am I missing something here? Wordrapping
> > isn't working for me, the text is still cut off.
> >
> > I appreciate your time in showing me this. Regex is all new
> > to me, but it's all the rage.
> >
> > Thanks,
> > Patrick
> >
> > Tim Hoff wrote:
> > >
> > > Patrick,
> > >
> > > Sorry to highjack your thread. Here's a method to display a
> > > multi-lined Axis label:
> > >
> > > *labelFunction:
> > > *public function
> > >
> > wrapLabel
(cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):Strin

> > > g
> > > {
> > > var pattern:RegExp = /-/;
> > > return cat.replace(pattern, "-\n");
> > > }
> > >
> > > *Axis:*
> > > <mx:horizontalAxis>
> > > <mx:CategoryAxis categoryField="CategoryField"
> > > labelFunction="wrapLabel"/>
> > > </mx:horizontalAxis>
> > >
> > > This example changes:
> > >
> > > 11/17/06 - 12/16/06
> > >
> > > to
> > >
> > > 11/17/06 -
> > > 12/16/06
> > >
> > > By using regular expresions, you have quite a bit of
flexibility.

> > >
> > > -TH
> > > __________________________________
> > >
> > > **Tim Hoff
> > > **Cynergy Systems, Inc.
> > > http://www.cynergysystems.com <http://www.cynergysystems.com>  
> > > <http://www.cynergysystems.comoffice/ 
> > > <http://www.cynergysystems.comoffice/> > Office
> > > <http://www.cynergysystems.comoffice/ 
> > > <http://www.cynergysystems.comoffice/> >: 866-CYNERGY
> > >
> > >
> > > --- In flexcoders@...
> > <mailto:flexcoders%40yahoogroups.com> , "Tim Hoff"
> > <TimHoff@> wrote:
> > > >
> > > >
> > > > Thanks Ely, that makes sense now. I'll give it a try.
> > Luckily, both
> > > > series are using the same dataProvider, so I'll have
> > access to the
> > > > data property and probably be able to eliminate the
> > second axis completely.
> > > > Thanks for the tips and the source to your interactive
calendar
> > > > component
> > > >
> > <http://www.quietlyscheming.com/blog/components/interactive-ca
> lendar/ >
<http://www.quietlyscheming.com/blog/components/interactive-ca
> lendar/> > .
> > > > Great Stuff!
> > > >
> > > > -TH
> > > >
> > > > --- In flexcoders@...
> > > > <mailto:flexcoders%40yahoogroups.com> , "Ely Greenfield"
egreenfi@
> > > > wrote:
> > > > >
> > > > >
> > > > >
> > > > >
> > > > > Hi Tim. yes, the AxisRenderer supports a property called
> > > > > 'labelRenderer' which is very much like an item
> > renderer. Pass the
> > > > > AxisRenderer a reference to a class (wrapped in a
classFactory,

> > > > > just
> > > > as
> > > > > with itemRenderers) that extends UIComponent,
> > ProgrammaticSkin, or
> > > > > one of the existing Flex components, and implements the
> > > > > IDataRenderer interface. The AxisRenderer will
> > instantiate one of
> > > > > these for each label it needs to show, and assign the
> > label to the
> > > > > labelRenderer's 'data' property.
> > > > >
> > > > > I don't think there are any examples out there of how to
do this
> > > > today.
> > > > >
> > > > > Ely.
> > > > >
> > > > >
> > > > > p.s. You could also consider writing a custom
> > > > > axisRenderer...there's a pretty exhaustive example of how
to do

> > > > > that in the Interactive Bubble Chart on my blog,
> > > > > http://www.quietlyscheming.com/.
> > > > > <http://www.quietlyscheming.com/.>  You could
> > theoretically create
> > > > > two axis renderers that stack on the left hand
> > > > side
> > > > > that way, although that's a pretty big undertaking.
> > > > >
> > > > >
> > > > >
> > > > >
> > > > > ________________________________
> > > > >
> > > > > From: flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com>  
> > > > > [mailto:flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com> ]
> > > > On
> > > > > Behalf Of Tim Hoff
> > > > > Sent: Friday, November 17, 2006 3:37 PM
> > > > > To: flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com>
> > > > > Subject: [flexcoders] Re: Ely: How do you wordwrap a label
on a
> > > > > bar chart?
> > > > >
> > > > >
> > > > >
> > > > > Hi Ely,
> > > > >
> > > > > I got this far with wordwrapping the label text, but my
> > question
> > > > > is more complicated. I want to have two
verticalAxisRenderers,
> > > > > side-by- side, on the same side of a ColumnChart. Or,
create a

> > > > > single LabelRenderer to simulate this. One of the
> > labels needs a
> > > > > shaded background with text, while the other is just
> > text. While
> > > > > digging into it, the docs say to use IFactory for a chart
> > > > > LabelRenderer. Is this similar to an ItemRenderer for a
> > DataGrid?
> > > > > Understandably, there aren't any examples yet that show
> > how to do this.
> > > > >
> > > > > If you have the time, thanks,
> > > > > -TH
> > > > >
> > > > > --- In flexcoders@...
> > > > > <mailto:flexcoders%40yahoogroups.com> , "Ely
> > Greenfield" egreenfi@
> > > > > wrote:
> > > > > >
> > > > > >
> > > > > >
> > > > > > Hi Patrick. THe only way would be to use a
> > labelFunction on your
> > > > axis
> > > > > > and manually insert a line break yourself.
> > > > > >
> > > > > > Ely.
> > > > > >
> > > > > >
> > > > > > ________________________________
> > > > > >
> > > > > > From: flexcoders@...
> > > > > > <mailto:flexcoders%40yahoogroups.com>  
> > > > > > [mailto:flexcoders@...
> > > > > > <mailto:flexcoders%40yahoogroups.com> ]
> > > > > On
> > > > > > Behalf Of dj
> > > > > > Sent: Friday, November 17, 2006 2:34 PM
> > > > > > To: flexcoders@...
> > > > > > <mailto:flexcoders%40yahoogroups.com>
> > > > > > Subject: [flexcoders] Ely: How do you wordwrap a
> > label on a bar
> > > > chart?
> > > > > >
> > > > > >
> > > > > >
> > > > > > A Vertical Axis why Field, my labels are being cut
> > off, my width
> > > > > > dimension is fixed to 280 pixels, so the column needs
> > to wrap down?
> > > > > >
> > > > > > Thanks,
> > > > > > Patrick
> > > > > >
> > > > >
> > > >
> > >
> > >
> >
> >
> >
> >  
> >
>