2 Replies Latest reply on Oct 21, 2009 9:16 PM by Eugene_Kuzovlev

    How to use images as markers in LineChart dinamicaly

    Eugene_Kuzovlev

      Hello!

      I have some problem with charting. I have in my app a certain graph of  LineChart. Also there is a certain set of data. The challenge - to build a chart so that if i have a particular field in data item, i would be able to show the marker that is different. To do rhis i wrote a special class for ItemRenderer, look the code below. However, this class draws only geometric shapes, this is the way, but i would like to show some images, stored in the same directory as my application. I tried to do it by loading images as Bitmap object and using the Graphics object method beginBitmatFill but get nothing. What should i do?

       

      package classes.charts
      {
                import flash.display.Graphics;
                
                import mx.charts.series.items.LineSeriesItem;
                import mx.core.IDataRenderer;
                import mx.skins.ProgrammaticSkin;
                import mx.controls.Alert;
      
      
           public class ExtendRenderer extends ProgrammaticSkin implements IDataRenderer
           {
                private var images:Array = [0xff0000, 0x00ff00, 0x0000ff];
                                                     
                  private var _chartItem:LineSeriesItem;
                  
                public function ExtendRenderer()
                {
                     super();
                }
                
                public function get data():Object
                {
                     return _chartItem;
                }
                
                public function set data(value:Object):void
                {
                     _chartItem = value as LineSeriesItem;
                     invalidateDisplayList();
                }
                
                override protected function
                     updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
                          super.updateDisplayList(unscaledWidth, unscaledHeight);
                          var g:Graphics = graphics;
                          
                        g.clear();
                        var rad:Number = 5;
                        if (_chartItem.item.hasOwnProperty('enter'))
                        {
                             g.beginFill(0x00ff00);
                             rad = 10;
                        }
                        else if (_chartItem.item.hasOwnProperty('exit'))
                        {
                             g.beginFill(0xff0000);
                             rad = 10;
                        }
                        else if (_chartItem.item.hasOwnProperty('week'))
                        {
                             g.beginFill(0x0000ff);
                             rad = 10;
                        }
                        else
                        {
                             g.beginFill(0x0000ff);
                        }
                        g.drawCircle(unscaledWidth/2,unscaledHeight/2,rad);
                        g.endFill();
                     }
                
           }
      }
      

       

      P.S. Sorry for my english - its rather bad

        • 1. Re: How to use images as markers in LineChart dinamicaly
          _Natasha_ Level 4

          Hi,

          as a variant of solution - use Image for it and change source property.

           

          1. Add private variable Image. (private var myImage:Image)

          2. Override protected function createChildren to create an Image, add as a child component and set it visible= false;

          3. In set data function check if you need to use Image and set source property for myImage and visible = true; else set visible = false;

          • 2. Re: How to use images as markers in LineChart dinamicaly
            Eugene_Kuzovlev Level 1

            Thank you for answer, but i still have some questions...

             

            1) As i understand, we must add the private var as a variable to my class ExtendRenderer?

            2) Protected function of what class? Neither ProgrammaticSkin nor Image did not have this method...

            3) Why set data function and not updateDisplayList?

             

            Tried to add private var Image and  add it in set data method. Got nothing, even didn't got my chart, only the clean screen >.<