September 6th, 2007 by Kyle
Tags: charting, charting-legend, Flex, flex-charting, graphing, graphs, interactive, legend
Posted in: Flex
I worked on this sample with a customer to help debug some issues. I must confess, I don’t remember what I did and haven’t review the code to recall how this works, but it is a nice little sample. When you mouse over an item in the legend, the series in the chart glows and vice versa, when you mouse over an item in the chart, the corresponding item in the legend glows. Neato!
Here is the extension to the Legend class.
import mx.charts.LegendItem;
import flash.events.MouseEvent;
import mx.containers.Canvas;
import flash.geom.Rectangle;
import flash.display.DisplayObject;
import flash.display.Sprite;
public class myLegendItem extends LegendItem
{
private var bgElement:Canvas;
private var _highlight:Boolean;
public function myLegendItem()
{
super();
addEventListener(MouseEvent.MOUSE_OVER, handleEvent);
addEventListener(MouseEvent.MOUSE_OUT, handleEvent);
}
override protected function createChildren():void {
super.createChildren();
bgElement = new Canvas();
bgElement.setStyle("backgroundColor", 0x00ff00);
addChildAt(bgElement,0);
}
private function handleEvent(event:MouseEvent):void{
if(event.type == MouseEvent.MOUSE_OVER)
highlight = true;
else if(event.type == MouseEvent.MOUSE_OUT)
highlight = false;
}
public function set highlight(value:Boolean):void{
_highlight = value;
invalidateDisplayList()
}
protected override function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
graphics.clear();
graphics.beginFill(0,0);
graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
graphics.endFill();
name = label;
bgElement.setActualSize(unscaledWidth, unscaledHeight);
if(_highlight)
bgElement.visible = true;
else
bgElement.visible = false;
}
}
}
Tweet
3 Comments »

Recent Comments