6 Replies Latest reply on Jun 4, 2009 9:41 AM by dzeikei

    get colors and text from Legend or chart?

    Magick9393 Level 1

      It seems to be impossible ( or at least I cannot find a way to ) to wrap the labels in the Legend control.

       

      so I will have to write my own legend control that can do this.

       

      In order to create a Legend control I will need to get a array of the colors used in the Chart ( or legend) and apply these to the new legend control. Can anyone advise how I can do this?

       

      thanks

        • 1. Re: get colors and text from Legend or chart?
          _Natasha_ Level 4

          Hi,

          If you create your own Legend you don't need to get data from legend. You should get it from Chart!

          Chart has series property. Each series has property legendData with Array of LegendItem. LegendItem has info about text (label property) and symbol (marker property).

          You should use this info.

           

          Also you can open Legend source code and look what info is used and the way.

           

          Hope this helpful.

          • 2. Re: get colors and text from Legend or chart?
            Magick9393 Level 1

            Hi Natasha

             

            I have tried:

             

             

             

             

            for each(var item in myChart.series.legendData )

            {

             

             

            trace("series item is : " + item);

            }

             

            And

             

             

             

             

            for each(var item in myChart.series.items)

            {

             

             

            trace("series item is : " + item);

            }

             

            UPDATE: I have also tried:

             

             

             

             

            trace

             

            ("legendData is : " + myChart.series[0].legendData);

             

             

            trace("items is : " + myChart.series[0].items);

            for each(var item:Array in myChart.series[0].legendData){

             

             

            trace("series item is : "

            + item);

             

            And again the trace statement in the for each loop is never reached, and the other trace statements are empty (besides the initial string), yet I can see in the variables window of Eclipse that there should be data.

             

             

            And I have a breakpoint on the trace statement, yet in both cases the breakpoint is never reached. I am not getting any error message.

             

            Also, when editing, when I put the '.' after myChart.series I do not get either legendData or items in the 'intellisense', just methods. Perhaps the intellisense is very limited.

             

            Anyway, can you advise on another way to get the colors and labels from a chart so I can create my own legend, which can wrap the labels?

             

            Many thanks

            • 3. Re: get colors and text from Legend or chart?
              Magick9393 Level 1

              Ok this is now getting really retarded.

               

              Here is my code - would really appreciate it someone could tell me why the myChart.series[0].legendData and myChart.series[0].items trace statements return nothing.

               

              I have waste enomormous amounts of time trying to figure out how to get labels to wrap in a Legend only to find that its definitely not a simple thing to do ( it should be a true/false setting, but no instead I have write my own custom Legend to make this possible ).

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                  backgroundColor="#ffffff"
                  layout="absolute"
                  creationComplete="init()" xmlns:ns1="*">
                 
                  <mx:Style source="css/chartStyles.css"/>
                  <mx:Script>
                      <![CDATA[
                          import mx.charts.series.items.PieSeriesItem;
                          import mx.controls.Label;
                          import mx.controls.listClasses.ListData;
                          import mx.collections.ArrayCollection;
                          import mx.rpc.events.ResultEvent;
                          import com.adobe.serialization.json.JSON;
                          import mx.charts.chartClasses.IAxis;
                         
                          // Declare bindable properties in Application scope.
                          [Bindable]
                           public var myFacilityID:String;        
                          [Bindable]
                           public var myPollutantID:String;
                          [Bindable]
                           public var myChartlabel:String;
                           [Bindable]
                           public var myYear:String;
                           [Bindable]
                           public var myData:String;
                          
                           [Bindable]
                           public var myCSS:String; // air, soil or water
                          
                          [Bindable]
                           public var serviceURL:String;
                          
                           [Bindable]
                           public var arr:Array;
                                       
                           [Bindable]
                           public var dp:ArrayCollection;   
                          
                           
                          private function init():void
                          {
                              myFacilityID     = Application.application.parameters.facilityID;
                              myPollutantID     = Application.application.parameters.pollutantID;
                              myChartlabel     = Application.application.parameters.myChartlabel;
                              myCSS             = Application.application.parameters.type;
                              myYear             = Application.application.parameters.year;
                              myData             = Application.application.parameters.data; //Chart data from FlashVars
                             
                             
                              onJSONLoad();               
                              myNewLegend();
                          }

                          private function myNewLegend():void
                          {
                              trace("legendData is : " + myChart.series[0].legendData);
                              trace("items is : " + myChart.series[0].items);
                              trace("dp is : " + dp);
                              for each(var item:Array in myChart.series[0].legendData){
                              trace("series item is : " + item);
                              }
                          }
                          private function onJSONLoad():void
                          {   
                              //get the raw JSON data and cast to String
                              //var rawData:String = String(event.result);
                              var rawData:String = unescape(myData);
                              //trace("JSON string is " + rawData);
                             
                              //decode the data to ActionScript using the JSON API
                              //in this case, the JSON data is a serialize Array of Objects.
                             
                             
                              try {
                                   var obj:Object = (JSON.decode(rawData) as Object);
                                  
                              } catch (error:Error) {
                                   trace("error is " + error);
                              }
                             
                              arr = (obj as Array);
                              //create a new ArrayCollection passing the de-serialized Array
                              //ArrayCollections work better as DataProviders, as they can
                              //be watched for changes.
                              dp = new ArrayCollection(arr);
                             
                              //trace("Array Collection is " +dp);
                              //pass the ArrayCollection to the DataGrid as its dataProvider.
                              //grid.dataProvider = arr;
                              //myBarChart.dataProvider = arr;}
                             
                             
                             
                             
                          }   

                      ]]>
                  </mx:Script>
                 

                 
                 
                <mx:HBox width="729" height="356">
                  <mx:PieChart id="myChart" 
                     dataProvider="{dp}"
                     showDataTips="true"
                     width="339" height="306">
                     <mx:series>
                        <mx:PieSeries
                             field="Total"
                             nameField="FromCountry"  labelPosition=""             
                             filters="[]" styleName="myLegend"
                        />
                     </mx:series>
                  </mx:PieChart>
                 
                  <mx:Legend id="myLegend"  dataProvider="{myChart}"
                   direction="vertical"  
                      styleName="myLegend"    width="358"/>

                </mx:HBox>


              </mx:Application>

              • 4. Re: get colors and text from Legend or chart?
                dzeikei Level 2

                try changing:

                 

                myNewLegend();

                 

                to

                     callLater(myNewLegend);

                 

                then do this in myNewLegend

                 

                for each(var series:Object in myChart.legendData[0])
                {
                     trace(series.fill.color);
                }

                 

                THe problem is that your pie chart does not draw until the next screen refresh so you cannot set the dataprovider then expect it to be there straight away

                the callLater() delays the call till after the next redraw where it will be available to use

                • 5. Re: get colors and text from Legend or chart?
                  Magick9393 Level 1

                  I managed to get a step further by using:

                   

                   

                   

                  this

                   

                   

                   

                  I now have an ArrayCollection containing the labels and colors. I also now have a list which displays the labels. My next challenge is how have icons, with the correct fill color, displayed next to the labels.

                   

                  If anyone can assist with that I would be super appreciative!

                   

                  Thanks

                  .myChart.addEventListener(FlexEvent.UPDATE_COMPLETE, myNewLegend);

                  • 6. Re: get colors and text from Legend or chart?
                    dzeikei Level 2

                    Hi, our of my own interest I took on your problem of wrapping text on LegendItems.

                     

                    I have detailed out what I have done in my blog:

                     

                    http://flexbreakpoints.blogspot.com/

                     

                    It's not perfect but it works and you may find it useful even in its current state.

                     

                    Hopefully I have helped you