4 Replies Latest reply on Feb 8, 2011 2:46 AM by anshusaini

    bar chart with diagonal lines pattern

    anshusaini Level 1

      Hi All,

       

      I need to create a bar chart where it will be filled with lines inside. Diagonal white lines has to alternate with the stripes of another color picked dynamically.

      I know we have itemrenderers and we can use that.

       

      I have been able to fill the complete bar with an image

      But not able to achieve the exact requirement.

       

      Pls help..

        • 1. Re: bar chart with diagonal lines pattern
          BhaskerChari Level 4

          Hi anshu,

           

          Can you post the screenshot of the requirement you are talking about...??

           

          Thanks,

          Bhasker

          • 2. Re: bar chart with diagonal lines pattern
            anshusaini Level 1

            Below is the image showing the chart I need to achieve

            diagonal.JPG

            • 3. Re: bar chart with diagonal lines pattern
              BhaskerChari Level 4

              Hi Anshu,

               

              Use the below component as an itemRenderer for your Column Chart...you will acheive the desired output you needed.

               

              package components.renderers
              {
                import flash.display.Graphics;
                import mx.charts.series.items.ColumnSeriesItem;
                import mx.core.IDataRenderer;
                import mx.core.UIComponent;
               
                public class BarColorItemRenderer extends UIComponent implements IDataRenderer
                { 
                   public static const 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 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.lineStyle(2,0XFFFFFF,1);
                         var barY:int=10;
                         var moveX:int=10;
                         var moveY:int=0;
                         var stripWidth:int=10;
                         while(barY < unscaledHeight || moveY < unscaledHeight)
                         {
                 g.moveTo(moveX,moveY);
                 g.lineTo(0,barY);
                
                 if((moveX + stripWidth) < unscaledWidth)
                 {
                  moveX += stripWidth
                 }
                 else
                 {
                  moveX = unscaledWidth;
                  moveY += stripWidth;
                 }
                 barY += stripWidth;
                         }
                         g.endFill();
                   }
                }
              }

               

              Thanks,

              Bhasker Chari

              • 4. Re: bar chart with diagonal lines pattern
                anshusaini Level 1

                Thanks Bhaskar..That was really helpful