|
View:
New views
17 Messages
—
Rating Filter:
Alert me
|
|
|
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?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?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@...] > 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?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@...] > 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?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 > > 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 > > > > > > > > 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?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 > > 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 > > > > > > > > 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?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 > > 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 > > 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@... > > 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 > > > > > > Thanks, > > > Patrick > > > > > > |
|
|
Re: Re: Ely: How do you wordwrap a label on a bar chart?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?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?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 > > { > > 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. > > > > 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 > > > 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?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?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 > 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 > > > 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 > > > > > > > > -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@> > > > > > > > > > > > > > > > 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 > > 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% > > > > > 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 > > 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 > > on your > > > > > axis > > > > > > > and manually insert a line break yourself. > > > > > > > > > > > > > > Ely. > > > > > > > > > > > > > > > > > > > > > ________________________________ > > > > > > > > > > > > > > From: flexcoders@... > > <mailto:flexcoders%40yahoogroups.com> > > [mailto:flexcoders@... <mailto:flexcoders% > > > > > > 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?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?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?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 > > 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 > > 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 > > 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 > > { > > 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 > > 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. > > > 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 > > > 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 > > > 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 > > > 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 > > > > > 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? > > > 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 > > > > > > > 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/ > > > > > <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 > > > > > 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 > > > > > 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 > > > 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 > > > 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?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/> > . > > > 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?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 > > > 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 > > > > > > -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 > > > > 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 > > > > 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 > > > > > 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 > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > |
| Free embeddable forum powered by Nabble | Forum Help |