16 Replies Latest reply on Aug 12, 2010 7:27 AM by rtalton

    Pie Chart with Legend

    Dajji Level 3

      Hey Experts,

       

      I have a small issue but cannot seem to find the solution. I have a pie chart with legends which I want to show side by side (horizontally). First pie chart and then legends. My requirement is that when the window is resized, the pie chart should also resize. I am able to show the chart and legends horizontally but when the legends list is long, the pie chart is always aligned in the center vertically. I tried setting all properties such as verticalAlign = "top", verticalCenter = "false", tried putting pie chart and legends in a separate VBox but nothing seems to work. Below is the code snippet.

       

      I believe others would have faced this problem. Can someone help?

       

       

      <mx:HBox width="100%" height="100%" verticalAlign="top" verticalCenter="false">
           <mx:VBox width="100%" verticalAlign="top" verticalCenter="false">
                <mx:PieChart id="pieChart" width="100%" height="100%" showDataTips="true" minWidth="200" minHeight="200" verticalCenter="false"/>
           </mx:VBox>
           <mx:VBox width="100%" verticalAlign="top" verticalCenter="false">
                <mx:Legend width="100%" height="100%" dataProvider="{pieChart}"/>
           </mx:VBox>
      </mx:HBox>
      

        • 1. Re: Pie Chart with Legend
          BhaskerChari Level 4

          Hi Dajji,

           

          Can you post the total sample code depicting your problem..?? or else can you post the screenshots of the problem you are facing...???

           

           

           

          Thank,

          Bhasker

          • 2. Re: Pie Chart with Legend
            Dajji Level 3

            Hi Bhasker,

             

            I won't be able to post complete code. However, I am sharing the screenshot. You can see in the screenshot that the pie chart is not aligned to the top inspite of setting the properties.

             

            .piechart.JPG

            • 3. Re: Pie Chart with Legend
              rtalton Level 4

              The verticalCenter style is not a boolean; it should be set in pixels.Try removing this from both your VBox and the PieChart. I think it is unnecessary on all your components. The VBox's verticalAlign="top" alone should accomplish what you want (I think that is the default on VBox, anyway). You might want to check the VBox paddingTop style and make sure it is not set to a high value; while debugging, set it to zero to remove its influence.

               

              Check the PieChart.paddingTop style. Set it to as low as possible.

              Make sure the PieSeries.labelPosition style is NOT set to to "callout". This will shrink the chart. Set it to "none" while debugging this issue.

              Also, temporarily set the chart's height/width to fixed values, not percentages.

              • 4. Re: Pie Chart with Legend
                rootsounds Level 4

                You could also try putting the chart and the legend into separate containers. Allow the legend to be scrolled vertically. Depends on your preference though.

                • 5. Re: Pie Chart with Legend
                  BhaskerChari Level 4

                  Hi Dajji,

                   

                  Try this once...

                   

                  <mx:HBox width="100%" height="100%">
                        <mx:VBox width="100%" height="100%" verticalAlign="top">
                             <mx:PieChart id="pieChart" width="100%" showDataTips="true" minWidth="200" minHeight="200" verticalCenter="false"/>
                        </mx:VBox>
                        <mx:VBox width="100%" height="100%" verticalAlign="top">
                             <mx:Legend width="100%" height="100%" dataProvider="{pieChart}"/>
                        </mx:VBox>
                  </mx:HBox>

                   

                   

                   

                  Thanks,

                  Bhasker Chari

                  • 6. Re: Pie Chart with Legend
                    Dajji Level 3

                    @rtalton I had not user verticalCenter earlier. As per my understanding only verticalAlign should work and the default value is top. But when things were not working I just tried setting these values.

                     

                    I have checked paddingTop and other related properties but they are not causing this. If I simply remove legends, it is aligned on the top. labelPosition is also not set to callout. I had is earlier but removed it.

                    • 7. Re: Pie Chart with Legend
                      Dajji Level 3

                      @rootsounds They are already in separate containers. i.e. VBox

                      • 8. Re: Pie Chart with Legend
                        Dajji Level 3

                        @Bhasker That's what I have done but its not working.

                        • 9. Re: Pie Chart with Legend
                          BhaskerChari Level 4

                          Hi Dajji,

                           

                          It will be very helpful for us to trace out the problem if you post the sample code which has your pieChart dataprovider ...??

                           

                          May be you can populate the dataprovider with static values and post the code and with the outer conatiner layout of your PieChart..

                           

                           

                          Thanks,

                          Bhasker

                          • 10. Re: Pie Chart with Legend
                            Balakrishnan V Level 3

                             

                            <?xml version="1.0" encoding="utf-8"?>

                            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                              xmlns:s="library://ns.adobe.com/flex/spark"

                              xmlns:mx="library://ns.adobe.com/flex/mx">

                            <mx:HBox width="100%" height="100%">

                            <mx:VBox width="100%" height="100%">

                            <mx:PieChart id="pieChart"  showDataTips="true"

                            width="100%" height="100%">

                            </mx:PieChart>

                            </mx:VBox>

                            <mx:VBox width="100%" verticalAlign="top" verticalCenter="false">

                            <mx:Legend width="100%" height="100%" dataProvider="{pieChart}"/>

                            </mx:VBox>

                            </mx:HBox>

                            </s:Application>

                             

                            Inside your application tag, there is a minWidth and minHeight property that is set to 955 and 600 by default. Just remove them and it should work fine.

                             

                            Hope this helps,

                             

                            Balakrishnan V

                             

                            • 11. Re: Pie Chart with Legend
                              Dajji Level 3

                              Okay...You can have a look at following sample code. Just resize the browser window to make it small. Specially the width. You will see that when the height of the window is increased, the chart is aligned centrally. Why should that happen when I have given verticalAlign as top for the VBox and that is also the default value.

                               

                              <?xml version="1.0"?>
                              <!-- Simple example to demonstrate the PieChart control. -->
                              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                                  <mx:Script>
                                      <![CDATA[          
                                      import mx.collections.ArrayCollection;
                              
                                      [Bindable]
                                      private var medalsAC:ArrayCollection = new ArrayCollection( [
                                          { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                          { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                          { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
                                  
                                      private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
                                          var temp:String= (" " + percentValue).substr(0,6);
                                          return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
                                      }
                                      ]]>
                                  </mx:Script>
                              
                                  <mx:Panel title="Olympics 2004 Medals Tally Panel" height="100%" width="100%" layout="horizontal" verticalAlign="top">
                                         <mx:VBox width="100%" height="100%" verticalAlign="top">
                                           <mx:PieChart id="chart" height="100%" width="100%"
                                               showDataTips="true" 
                                               dataProvider="{medalsAC}">          
                                               <mx:series>
                                                   <mx:PieSeries 
                                                       nameField="Country"
                                                       field="Gold" 
                                                       labelFunction="displayGold">
                                                   </mx:PieSeries>
                                               </mx:series>
                                           </mx:PieChart>  
                                         </mx:VBox>                  
                                       <mx:Legend dataProvider="{chart}"/>
                                  </mx:Panel>
                              </mx:Application>
                              

                              • 12. Re: Pie Chart with Legend
                                Dajji Level 3

                                @Balakrishnan Here is your code...but it does not work...try out as I mentioned. Resize your browser window.

                                 

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  xmlns:mx="http://www.adobe.com/2006/mxml">
                                   <mx:Script>
                                        <![CDATA[          
                                        import mx.collections.ArrayCollection;
                                 
                                        [Bindable]
                                        private var medalsAC:ArrayCollection = new ArrayCollection( [
                                            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
                                    
                                        private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
                                            var temp:String= (" " + percentValue).substr(0,6);
                                            return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
                                        }
                                        ]]>
                                    </mx:Script>
                                      
                                     <mx:HBox width="100%" height="100%">
                                          <mx:VBox width="100%" height="100%">
                                               <mx:PieChart id="pieChart"  showDataTips="true"
                                               width="100%" height="100%" dataProvider="{medalsAC}">
                                                <mx:series>
                                                 <mx:PieSeries 
                                                     nameField="Country"
                                                     field="Gold" 
                                                     labelFunction="displayGold">
                                                 </mx:PieSeries>
                                             </mx:series>               
                                               </mx:PieChart>
                                          </mx:VBox>
                                          <mx:VBox width="100%" verticalAlign="top" verticalCenter="false">
                                               <mx:Legend width="100%" height="100%" dataProvider="{pieChart}"/>
                                          </mx:VBox>
                                </mx:HBox>
                                </mx:Application>
                                

                                • 13. Re: Pie Chart with Legend
                                  BhaskerChari Level 4

                                  Hi Dajji,

                                   

                                  Here is the code which resolves the problem...

                                   

                                  Note: In the code below I have removed the percentage width and height for PieChart.....that resolves the problem.....but the thing here is as you resize

                                   

                                  your browser window the piechart width and height will not change accordingly...? Do you need PieChart to change its dimensions as your browser window

                                   

                                  resizes...???

                                   

                                  However if you specify width="100%" and height="100%" for PieChart you never gonna acheive the PieChart to be vertically alined to top.....why because

                                   

                                  as you specified width="100%" and height="100%" for PieChart it occupies the total dimensions of the VBox but the actual visible portion dimensions are

                                   

                                  less... because within the VBox you also have the legends so Flex will assign the sizes proportionately....for PieChart and Legends..

                                   

                                  Hope you got my point...So you should remove the width="100%" and height="100%" for PieChart then you can acheive what you needed...

                                   

                                   

                                  <?xml version="1.0"?>
                                  <!-- Simple example to demonstrate the PieChart control. -->
                                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%">
                                      <mx:Script>
                                          <![CDATA[         
                                          import mx.collections.ArrayCollection;

                                          [Bindable]
                                          private var medalsAC:ArrayCollection = new ArrayCollection( [
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
                                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
                                     
                                          private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
                                              var temp:String= (" " + percentValue).substr(0,6);
                                              return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
                                          }
                                          ]]>
                                      </mx:Script>

                                      <mx:Panel title="Olympics 2004 Medals Tally Panel" height="100%" width="100%" layout="horizontal" verticalAlign="top">
                                             <mx:VBox verticalAlign="top" height="100%" width="100%">
                                               <mx:PieChart id="chart"
                                                   showDataTips="true"
                                                   dataProvider="{medalsAC}">         
                                                   <mx:series>
                                                       <mx:PieSeries
                                                           nameField="Country"
                                                           field="Gold"
                                                           labelFunction="displayGold">
                                                       </mx:PieSeries>
                                                   </mx:series>
                                               </mx:PieChart> 
                                             </mx:VBox>                 
                                           <mx:Legend dataProvider="{chart}"/>
                                      </mx:Panel>
                                  </mx:Application>

                                   

                                  Thanks,

                                  Bhasker Chari

                                  • 14. Re: Pie Chart with Legend
                                    Dajji Level 3

                                    My requirement is to make the chart resizable. It should occupy the space left after displaying legends. However, I would like it to be vertically aligned to the top. I got your point about the % height but if I remove % height I will loose the ability to resize the chart. Is there any other workaround?

                                    • 15. Re: Pie Chart with Legend
                                      Balakrishnan V Level 3

                                      I don't think so. When the pieChart is laid out, it is laid within a container. You might have to extend the PieChart class to create your own PieChart and try tweaking inside your class.

                                       

                                      I shall keep looking for other workarounds as well.

                                       

                                      Hope this helps,

                                       

                                      Balakrishnan V

                                      • 16. Re: Pie Chart with Legend
                                        rtalton Level 4

                                        "Also, temporarily set the chart's height/width to fixed values, not  percentages." 8/11/2010

                                         

                                        This is what I had recommended to you in my post. I had a feeling that this would be the answer, as all Flex components set to percentage values will fill up the available space--you have no control as to how the chart will be positioned, Flex does this automatically.

                                         

                                        In this case, you will see that the VBox *is aligning the chart to the TOP*. It just doesn't look that way to your eye, but that is what it is doing. Measure it with a screen ruler and you can verify this.

                                         

                                        So, in order to make the chart stay closer to the top of the VBox, you will have to limit its width and height.OR...

                                         

                                        If it were me, I would simply add a spacer under the chart and set it's height to a percentage value. This will help keep the chart "pushed up" towards the top of the VBox and ultimately limit its dimensions.