5 Replies Latest reply on Oct 29, 2009 12:05 AM by David_F57

    set pie slice color

    kingquattro Level 1

      Hey guys,

               I am creating pie chart based on xml data, which can have at most 6 categories, but not every time.  For consistency sake I would like pie slice to be colored by category, i.e every time I see category 1 it should be colored with c1, category 2 should be colored c2 etc.  By just setting fill property I don't always get the same color for category 2 if category 1 is missing. 

       

           Hope my objective is clear, does anyone have any idea, I have been nosing around adobe forms and google but no luck so far.

       

      Thank you

      Jay

        • 1. Re: set pie slice color
          David_F57 Level 5

          Hi,

           

          Are you setting the color by index of the category or name of the category - this could be your problem.

           

          David.

          • 2. Re: set pie slice color
            kingquattro Level 1

                 Currently I am just using SolidColor array and setting the fill property.  But I think I have found the solution.  I can use pieSeries.fillFunction and in there set the color of each slice based on labelText.

             

            Is there a better solution?

             

            Jay

            • 3. Re: set pie slice color
              David_F57 Level 5

              I think you have pretty much got it covered, I suppose you could get really clever and use the fieldname as the reference and declare the colors with an id that matched the fieldname(you still have to use fillfunction). But if its working why break it

               

              David.

              • 4. Re: set pie slice color
                kingquattro Level 1

                sorry its late i don't know what I am looking at.  fillFunction works.

                • 5. Re: set pie slice color
                  David_F57 Level 5

                  Instead of a switch statement you could do this, the colors use the fieldname as id's so you then have a single line in your fillfunction.

                   

                  <?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/halo" minWidth="1024" minHeight="768" xmlns:local="*">

                  <fx:Declarations>

                  <s:SolidColor id="Taxes" color="blue" alpha="1"/>

                  <s:SolidColor id="Rent" color="red" alpha="1"/>

                  <s:SolidColor id="Bills" color="green" alpha="1"/>

                  <s:SolidColor id="Car" color="gray" alpha="1"/>

                  <s:SolidColor id="Gas" color="black" alpha="1"/>

                  <s:SolidColor id="Food" color="yellow" alpha="1"/>

                  </fx:Declarations>

                  <fx:Script>

                  <![CDATA[

                  import mx.charts.series.items.PieSeriesItem;

                  import mx.graphics.IFill;

                  import mx.charts.ChartItem;

                  import mx.collections.ArrayCollection;

                   

                  [Bindable]

                  public var expenses:ArrayCollection = new ArrayCollection([

                  {Expense:"Taxes", Amount:2000},

                  {Expense:"Rent", Amount:1000},

                  {Expense:"Bills", Amount:100},

                  {Expense:"Car", Amount:450},

                  {Expense:"Gas", Amount:100},

                  {Expense:"Food", Amount:200}

                  ]);

                   

                  private function myFiller(item:ChartItem, index:Number):IFill

                  {

                  return(this[expenses[index].Expense]);

                  }

                  ]]>

                  </fx:Script>

                   

                  <mx:Panel title="Pie Chart">

                  <mx:PieChart id="myChart"

                  dataProvider="{expenses}"

                  showDataTips="true"

                  innerRadius=".3"

                  >

                  <mx:series>

                  <mx:PieSeries

                  field="Amount"

                  nameField="Expense"

                      fillFunction="myFiller"

                  />

                  </mx:series>

                  </mx:PieChart>

                  </mx:Panel>

                   

                  </s:Application>