9 Replies Latest reply on Jan 1, 2011 8:53 AM by Gregory Lafrance

    How to set minimum size for PieChart wedge?

    Gregory Lafrance Level 6

      The following chart has one wedge that is very thin. I know it is because the data value for that wedge is very small (262) compared to the other wedge data values, but I'd like to be able to set a minimum wedge size.

       

      Any ideas?

       

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Script><![CDATA[
           import mx.collections.ArrayCollection;
           [Bindable]
           public var expenses:ArrayCollection = new ArrayCollection([
              {Expense:"Jan", Amount:2200000},
              {Expense:"Feb", Amount:4700000},
              {Expense:"Mar", Amount:2300000},
              {Expense:"Jul", Amount:262}
           ]);
        ]]></mx:Script>
        <mx:Panel title="Pie Chart">
           <mx:PieChart id="myChart" 
              dataProvider="{expenses}" 
              showDataTips="true"
           >
              <mx:series>
                 <mx:PieSeries 
                      field="Amount" 
                      nameField="Expense" 
                      labelPosition="callout"
                 />
              </mx:series>
           </mx:PieChart>
        </mx:Panel>
      </mx:Application>
      


      PieChart.jpg

        • 1. Re: How to set minimum size for PieChart wedge?
          Gregory Lafrance Level 6

          Just wondering if anyone can comment on this?

          • 2. Re: How to set minimum size for PieChart wedge?
            Gregory Lafrance Level 6

            Just wondering if anyone can comment on this?

             

             

            • 3. Re: How to set minimum size for PieChart wedge?
              IlyaG Level 1

              it is easy to implement by your own. Let's say you wan't the minimum size to be 10% so you need to calculate the new amounts like this:

              2.3M

              4.7M

              2.2M

              262

               

              cake = 100% = 2.3M + 4.7M + 2.2M + 262;

              min = 10% = cake * 0.1;

              dif = (min - 262) / 4;

               

              and now

               

              oldAmount = 2.3M;

              newAmount = oldAmount - dif;

               

              • 4. Re: How to set minimum size for PieChart wedge?
                Gregory Lafrance Level 6

                Unfortunately, that won't work, because then the values displayed in the dataTips will be wrong.

                 

                I need some way to affect the rendering of small wedges, without affecting the data itself.

                • 5. Re: How to set minimum size for PieChart wedge?
                  IlyaG Level 1

                  Override it, Separate your GUI from data, if there is a flex implementation for this it will act just like that.

                  • 6. Re: How to set minimum size for PieChart wedge?
                    Gregory Lafrance Level 6

                    Override what, the PieChart class?

                     

                    How would I separate the GUI from the data?

                     

                    Your statement "if there is a flex implementation for this it will act just like that" provides no useful information.

                     

                    I'm looking for concrete and useful suggestions on how to actually achieve this, not high-level suggestions that really do not lead me toward a solution.

                     

                     

                     

                     

                     

                     

                    • 7. Re: How to set minimum size for PieChart wedge?
                      flex2008 Level 3

                      How about creating a custom item renderer for PieSeries by extending WedgeRenderer and overriding the updateDisplayList method and then modify the code there.Check the value which is going to be displayed is greater than a particular value.If not,alter the calculations used to draw the wedge and use a fixed "minimum" value.By the way I did take a look at the code in WedgeRenderer.But i could not understand it properly.

                      • 8. Re: How to set minimum size for PieChart wedge?
                        USawIt

                        This might be close enough to what you're looking for:

                         

                        PieChartwMin.jpg

                        The FB 4 code is shown below:

                         

                        <?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" 
                            minWidth="955" minHeight="600">
                            <fx:Script>
                             <![CDATA[
                                import mx.charts.HitData;
                                import mx.collections.ArrayCollection;
                                import mx.controls.Alert;
                                import mx.utils.ObjectUtil;
                        
                                [Bindable] private var Amount:String = "";
                                [Bindable] private var minAmount:String = "";
                        
                                [Bindable]
                                public var expenses:ArrayCollection = new ArrayCollection([
                                {Expense:"Jan", Amount:2200000, minAmount:2200000},
                                {Expense:"Feb", Amount:4700000, minAmount:4700000},
                                {Expense:"Mar", Amount:2300000, minAmount:2300000},
                                {Expense:"Jul", Amount:262, minAmount:50000}
                                ]);
                        
                                private function getDataTips(hitData:HitData):String {
                                    // add percent when the user gets the DataTip
                                    var percentValue:Number = (hitData.item.Amount / 9200262) * 100;
                                    var f:int = 3;
                                    if (percentValue > 1) {
                                        f = 1;
                                    }
                                    return hitData.item.Expense + ": " + percentValue.toFixed(f) + " % (" + hitData.item.Amount + ")";
                                }
                        
                                private function getData(series:PieSeries, item:Object, fieldName:String):Object {
                                    if (item.minAmount != 50000) {
                                        return item.Amount;
                                        psExpenses.setStyle("labelPosition", "callout");
                                    } else {
                                        return item.minAmount
                                        psExpenses.setStyle("labelPosition", "none");
                                    }
                                }
                        
                             ]]>
                            </fx:Script>
                            <mx:Panel title="Pie Chart">
                             <mx:PieChart id="myChart" 
                                     dataProvider="{expenses}" dataTipFunction="getDataTips"
                                     showDataTips="true">
                                <mx:series>
                                    <mx:PieSeries id="psExpenses" nameField="Expense" dataFunction="getData"/>
                                </mx:series>
                             </mx:PieChart>
                            </mx:Panel>
                        </s:Application>
                        
                        1 person found this helpful
                        • 9. Re: How to set minimum size for PieChart wedge?
                          Gregory Lafrance Level 6

                          I ended up storing the original data values in an object and increasing data values that did not meet a minimum threshold in the PieChart data provider collection.

                           

                          Then in my data tip function, I access the original values.

                           

                          I had to jump through some hoops to get it to work, but it works.

                           

                          Thanks for your suggestion.