Charts itemrenderers in flex 3

Question

Can anyone tell, how to add an image in the chart datatip?

Answer 1

Hi, you need to create a subclass of datatip and override the updateDisplayList function.

Here is what I did:

    override protected function updateDisplayList(w:Number, h:Number):void {
        super.updateDisplayList(w, h);
        this.setStyle("textAlign","left");
        this.setStyle("color", "0xCCCCCC");

        if (this.numChildren > 1)
            this.removeChildAt(1);

        numLines = (data.displayText as String).split("<br").length;

        var g:Graphics = graphics; 
        g.clear();  
        var m:Matrix = new Matrix();
        m.createGradientBox(w+60,h+numLines*25,0,0,0);
        g.beginGradientFill(GradientType.LINEAR,[0x00FF00,0xFFFFFF],
            [.1,1],[0,255],m,null,null,0);
        g.drawRect(-30,0,w+60,h+numLines*25);
        g.endFill();

        // load current image
        var imageFile:File = File.applicationStorageDirectory.resolvePath(Constants.TINY_IMG_PATH + data.item.name);
        var urlLoader:URLLoader = new URLLoader( );
        urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
        urlLoader.addEventListener(Event.COMPLETE, onLoadingComplete );
        urlLoader.load( new URLRequest(imageFile.nativePath) );
    }

    private function onLoadingComplete( e: Event ):void
    {
        var dispLoader: Loader = new Loader( );

        dispLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, onParsingComplete);
        dispLoader.loadBytes( e.currentTarget.data );
    }

    private function onParsingComplete(e:Event):void {

        var container:Sprite = new Sprite();
        this.addChild(container);
        container.y = numLines*15 + 10;

        var _bitmap:Bitmap = new Bitmap((e.currentTarget.content as Bitmap).bitmapData);
        container.graphics.beginBitmapFill(_bitmap.bitmapData, null, false, true);
        container.graphics.drawRect(0, 0, _bitmap.width, _bitmap.height);
        container.graphics.endFill();
    }

Enjoy