<?xml version="1.0"?>
<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>