March 10th, 2008 by Kyle
Tags: charting, Flex, interactive series, series
Posted in: Flex
This sample basically builds upon another sample I posted a while back.
It is pretty self explanatory - if you have multiple series in a chart, you may not want the clutter of viewing all the series, so this app demonstrates how you can extend the legend to toggle series on/off.
If you turn off all series in the app below (with the button at the bottom of the app), you can then toggle on/off the (multiple) series you desire to view by clicking on the legend item for the series you are interested in.
Download a zipfile containing the source to this sample.
Browse the source of this example.
Or continue into the blog entry to see the source:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.charts.events.LegendMouseEvent;
import mx.collections.ArrayCollection;
[Bindable] private var allOn:Boolean=true;
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
{ Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
{ Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
private function clickLegend(event:LegendMouseEvent):void{
if(!allOn){
var lineSer:LineSeries = findSeries(event.item.label);
lineSer.visible=(event.item as myLegendItem).selected;
}
}
private function findSeries(lbl:String):LineSeries{
var series:LineSeries = new LineSeries()
for(var i:int=0;i<linechart.series.length;i++){
var tmpSeries:LineSeries = linechart.series[i];
if(tmpSeries.displayName == lbl)
series = tmpSeries;
}
return series;
}
private function toggle():void{
allOn=!allOn;
var a:Array=myLegend.getChildren();
for(var i:int=0;i<a.length;i++){
(a[i] as myLegendItem).selected=false;
}
}
]]>
</mx:Script>
<mx:Panel title="LineChart"
height="100%" width="100%" layout="horizontal">
<mx:LineChart id="linechart" height="100%" width="100%"
paddingLeft="5" paddingRight="5"
showDataTips="true" dataProvider="{expensesAC}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="Profit" form="curve" displayName="Profitppp"
visible="{allOn}"/>
<mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"
visible="{allOn}"/>
<mx:LineSeries yField="Amount" form="curve" displayName="Amount"
visible="{allOn}"/>
</mx:series>
</mx:LineChart>
<mx:Legend id="myLegend" dataProvider="{linechart}" verticalGap="0" horizontalGap="0" markerWidth="50" markerHeight="4"
itemMouseDown="clickLegend(event)"
legendItemClass="myLegendItem" enabled="{!allOn}" disabledOverlayAlpha="0" >
</mx:Legend>
<mx:ControlBar>
<mx:Button label="Turn all series {(!allOn? ‘on’:'off’)}" click="toggle()"
width="100%"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
import flash.events.MouseEvent;
import mx.charts.LegendItem;
import mx.containers.Canvas;
public class myLegendItem extends LegendItem
{
private var bgElement:Canvas;
private var _selected:Boolean;
public function myLegendItem()
{
super();
addEventListener(MouseEvent.MOUSE_DOWN, handleEvent);
}
override protected function createChildren():void {
super.createChildren();
bgElement = new Canvas();
bgElement.setStyle("backgroundColor", 0×00ff00);
addChildAt(bgElement,0);
}
private function handleEvent(event:MouseEvent):void{
selected=!_selected;
}
public function set selected(value:Boolean):void{
_selected = value;
invalidateDisplayList()
}
public function get selected():Boolean{
return _selected;
}
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(_selected)
bgElement.visible = true;
else
bgElement.visible = false;
}
}
}


March 10th, 2008 at 4:42 pm
excellent idea!
March 12th, 2008 at 9:07 am
Very cool! Wish I had written it.
matt horn
flex docs
May 6th, 2008 at 5:36 am
[...] Some while ago Kyle posted on his blog an article about interactive legend. [...]
May 6th, 2008 at 5:42 am
hi Kyle,
http://shemesh.wordpress.com/2008/05/06/22/