12 Replies Latest reply on Mar 29, 2010 7:52 AM by Li3149

    how to wrap labels in a chart legend?

    Magick9393 Level 1

      Hi

       

      I have some very long labels in a pie chart legend, and need to wrap these. How can I achieve this?

       

      Thanks

        • 1. Re: how to wrap labels in a chart legend?
          Magick9393 Level 1

          Anyone? Any help would be greatly appreciated.

          • 2. Re: how to wrap labels in a chart legend?
            Magick9393 Level 1

            Hi

             

            If anyone can help me with this I would greatly appreciate it. I am spending huge amounts of time on this issue and not making any progress.

             

            Thanks

            • 3. Re: how to wrap labels in a chart legend?
              _Natasha_ Level 4

              Hi,

              frankly speaking i don't fully understad what you want to do.

              There are no variants to set any properties to set it smaller, but it's a label and should have truncateToFit property.

               

              The first variant is to set smaller labels - the easiest.

              The second variant is extend legendItem.

              The third variant is to create special array to be a dataProvider for legend. Copy a marker and only a part from your default label.

              Another variant is to add legend to canvas with fixed width and height and with disabled scrolling - so all data will be cutted by this canvas.

               

              Try to explain what do you want to see.

              • 4. Re: how to wrap labels in a chart legend?
                Magick9393 Level 1

                Hi Natasha,

                 

                thanks for the reply

                 

                What I am trying to achieve is to have multiline labels in in the legend. The data I am working with is of significantly varying lengths - from 2 words, to 40 words.

                 

                I cant, unfortunately, truncate the labels - that is why if there is a lot of wording I need it to wrap onto another line.

                • 5. Re: how to wrap labels in a chart legend?
                  _Natasha_ Level 4

                  So the only variant for you is to extend LegendItem with default marker and Text control instead of Label (to see multiple lines).

                  And set legendItemClass property for your Legend to use it.

                  • 6. Re: how to wrap labels in a chart legend?
                    Magick9393 Level 1

                    OK thanks Natasha

                     

                    I'm new to Flex, so I'm not too sure exactly what you mean by 'extend LegendItem with default marker and Text control instead of Label'  but I will look into it.

                     

                    I appreciate you taking the time to help out a stranger

                    • 7. Re: how to wrap labels in a chart legend?
                      Magick9393 Level 1

                      Hi Natasha

                       

                      is this post similar as to what you are recommending? -> http://forums.adobe.com/message/21117#21117

                       

                      If so, I have tried this. And while it does wrap the text, it also sets all Textfields to the height of the heighest (the text field that contains the most words) textfield.

                       

                      What I am looking to do is have the texfield wrap, and therefore increase in height, only if needed - not to set all textfields to the size of the largest.

                      Perhaps you could suggest a way to only wrap and increase the size of the textfields when needed?

                       

                       

                       

                      I have also tried to create my own legend using the List control as this has both Wordwrap and variableRowHeight properties, however, as i am wanting to populate this with the values - both text and marker colors - from the legend, I need to be able to look at the legend items. However, when I inspect the array of myChart.legendData I only get one item everytime regardless of how many items there are visibly in the legend and chart. I cant understand why that would be.

                       

                      thanks again for your assistance Natasha.

                      • 8. Re: how to wrap labels in a chart legend?
                        _Natasha_ Level 4

                        Hi,

                        that example is not you actually need.

                         

                        In this example type of UITextField. But you have to change it!

                         

                        May be you don't need Legend. I don't check but may be it's usually fit to width. If so you need to use VBox to show labels.

                         

                        legendData is an Array. If you have only one series it should be only one element. If more it should be more elements.

                        • 9. Re: how to wrap labels in a chart legend?
                          Magick9393 Level 1

                          Hi again Natasha

                           

                          I have tired replacing the UITextField with Text, TextField and TextArea.

                           

                          Text does not wrap, and textfield looks the same as UITextField.

                           

                          TextArea just ignores my width setting and does not wrap.

                           

                          Another strange thing is if I put a break point at addChild(child); it is never hit.

                          But if I comment out the if if (!(txt==null) ) condition then I get a TypeError: Error #1009: Cannot access a property or method of a null object reference error.

                           

                          Also, it seems that when the Text control that this is not even being applied, whereas the UITextField is being applied. Dont understand why that is.

                           

                          Do you have any other suggestions? This is crazy how differcult it is to do something that should be so simple.

                           

                          But thats for you ongoing assitance.

                          • 10. Re: how to wrap labels in a chart legend?
                            PHans456

                            Hello, does noone have a solution for this wordwrapping ?

                             

                            i found on the web someting but i dont know how to change the class.

                            http://flexbreakpoints.blogspot.com/2009/06/creating-wordwrapping-legenditems-for.html

                             

                            maybe someone can help and explain how to do.

                            • 11. Re: how to wrap labels in a chart legend?
                              Subeesh Arakkan Level 4

                              Hi,

                               

                              Download his WrapLegendItem class from the source ( http://www.dzeikei.com/blog/flex/wraplegenditem/srcview/index.html ) and set it as the legendItemClass for the legend

                               <mx:Legend id="myLegend"  dataProvider="{myChart}" direction="vertical" 
                                   legendItemClass="{WrapLegendItem}" styleName="myLegend" />
                              
                              • 12. Re: how to wrap labels in a chart legend?
                                Li3149

                                thx, it works now.

                                 

                                the marker align setting is middel. when you have a wraped text in 3 lines, the marker position is in the second line.

                                 

                                     text line 1

                                [X] text line 2

                                     text line 3

                                 

                                its possible to set the marker in line 1 ?

                                 

                                [X] text line 1

                                     text line 2

                                     text line 3

                                 

                                -----------------------------------------------------

                                edit: i found out how

                                 

                                insert the codes for the markers in the wraplegenditem.as

                                those parts with

                                  //----------------------------------
                                  //  legendData
                                  //----------------------------------

                                 

                                  //----------------------------------
                                  //  marker
                                  //----------------------------------

                                 

                                than override the updateDisplayList function.

                                 

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

                                        
                                         var markerX:Number = 0;
                                   var markerY:Number = 0;

                                   var mAvailableWidth:Number = getMarkerWidth();
                                   var mAvailableHeight:Number = getMarkerHeight();

                                   var markerH:Number = mAvailableHeight;
                                   var markerW:Number = mAvailableWidth;
                                        
                                         if (!_marker)
                                   {
                                    var markerClass:IFactory = getStyle("legendMarkerRenderer");
                                   
                                    if (markerClass)
                                     marker = markerClass.newInstance();
                                    else
                                     marker = new BoxItemRenderer();

                                    if (_marker is ISimpleStyleClient)
                                    {
                                     (_marker as ISimpleStyleClient).styleName =
                                      (!element) ? this : element;
                                    }
                                   }

                                   _marker.x = markerX + (mAvailableWidth - markerW) / 2;
                                   _marker.y = markerY + (mAvailableHeight - markerH) / 2;
                                  
                                   _marker.setActualSize(markerW, markerH);
                                          
                                  }