3 Replies Latest reply on Jan 27, 2011 11:02 PM by BhaskerChari

    How can I change the color of a chartItem or chartSeries?

    smart2008_tw Level 1

      arrayList={date:"2008/01", data1:30,data2:15},
      {date:"2008/02", data1:25,data2:10},
      {date:"2008/03", data1:60,data2:30}

       

      i have a <mx:ColumnChart dataProvider="{arrList}" id="myChart" />

      and  <mx:ColumnSeries id="series1" yField="Apples" displayName="Apples" / >

      and one button <mx:Button  label="click" click="changeChartColor();"/>

       

      when i click the button, the changeChartColor() function will be trigger

       

      how to loop through  series:Object = myChart.series[0] and set particular char color?

      like to say,i want to set 2009/01 this char become read color, 2008/02 char become green color?

      any sample code? thank for helping

       

       


                        

        • 1. Re: How can I change the color of a chartItem or chartSeries?
          BhaskerChari Level 4

          @smart,

           

          Make use of an itemRenderer for your Column chart and set the color there..Here in this example I have made use of a color array in which I have put various colors which the BarChart makes use to render the bar color.

           

          In your case I don't think it is needed as you are rendering the bar color based on the condition. So you need to write whatever condition you require and fill with the appropriate color in the updateDisplayList() function at the below line of code..

           

          g.beginFill(0XFF0000);

           

          <mx:ColumnChart dataProvider="{arrList}" id="myChart" itemRenderer="components.BarColorItemRenderer" />

           

          package components.renderers
          {
            import flash.display.Graphics;
           
            import mx.charts.series.items.BarSeriesItem;
            import mx.charts.series.items.ColumnSeriesItem;
            import mx.core.IDataRenderer;
            import mx.core.UIComponent;
           
            public class BarColorItemRenderer extends UIComponent implements IDataRenderer
            { 
               public var colors:Array = colors:Array =  [0X000000,0X938953,0X1F497D,0XC0504D,0X9BBB59,0X8064A2,0X4BACC6,0XF79646,0X7F7F7F,0X548DD 4,0X632423,0X4F6128,0XB2A2C7,0X31859B,0X974806,0X20B2AA,0XF5DEB3,0XDDA0DD,0XE9967A,0X7FFFD 4];;
               private var _chartItem:*;
              
               public function BarColorItemRenderer () {
                  // Empty constructor.
               }

              public function get data():Object {
                  return _chartItem;
              }

              public function set data(value:Object):void {
               if(value is BarSeriesItem)
               {
                _chartItem = value as BarSeriesItem;
               }
               else if(value is ColumnSeriesItem)
               {
                _chartItem = value as ColumnSeriesItem;
               }
            invalidateDisplayList();
               }

               override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
                     super.updateDisplayList(unscaledWidth, unscaledHeight);
                     var g:Graphics = graphics;
                     g.clear(); 
                     g.beginFill(colors[(_chartItem == null)? 0:_chartItem.index]);
                     g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                     g.endFill();
               }
            }
          }

          1 person found this helpful
          • 2. Re: How can I change the color of a chartItem or chartSeries?
            smart2008_tw Level 1

            hello BhaskerChari,thank for helping. i will try it

            • 3. Re: How can I change the color of a chartItem or chartSeries?
              smart2008_tw Level 1

              how about if i set the timer to update my data,(like to say update data every 5 minutes)

              than, how can i call itemRenderer function?