<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:chart="org.openzet.charts.chartClasses.*"
backgroundColor="0xFFFFFF"
paddingTop="5"
paddingRight="5"
paddingLeft="5"
paddingBottom="5"
creationComplete="creationCompleteHandler();">
<mx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;
    
    import org.openzet.events.ChartZoomerEvent;

    private function creationCompleteHandler():void
    {
        setRandomData();
    }

    [Bindable]
    private var expenses:ArrayCollection = new ArrayCollection();

    [Bindable]
    private var newData:ArrayCollection = new ArrayCollection();

    private function setRandomData():void
    {
        var tempAC:ArrayCollection = new ArrayCollection();
        
        expenses = new ArrayCollection();

        var i:int;
        var n:int = 500;

        for (i = 0; i < n; i++)
        {
            tempAC.addItem({Month: Math.floor(Math.random() * (12 - 1 + 1)) + 1,
                              Profit: Math.floor(Math.random() * (500 - 300 + 1)) + 300,
                              Expenses: Math.floor(Math.random() * (500 - 300 + 1)) + 300});
                             
        }
        
        expenses = tempAC;
    }
    
    private function dividerChangeHandler(event:ChartZoomerEvent):void
    {
        newData.source = expenses.source.slice(event.leftValue, event.rightValue);
    }

    ]]>
</mx:Script>
<mx:AreaChart id="myChart" 
    dataProvider="{newData}" 
    showDataTips="true"
    width="100%" height="100%">
    <mx:verticalAxis>
        <mx:LinearAxis />
    </mx:verticalAxis>

    <mx:verticalAxisRenderers>
        <mx:AxisRenderer 
            axis="{axis0}" visible="false" />
    </mx:verticalAxisRenderers>
    
    <mx:horizontalAxis>
       <mx:CategoryAxis 
            id="axis0"
            dataProvider="{newData}" 
            categoryField="Month" />
    </mx:horizontalAxis>

    <mx:horizontalAxisRenderers>
        <mx:AxisRenderer 
            axis="{axis0}" showLabels="false" visible="false"
            includeInLayout="false">
        </mx:AxisRenderer>
    </mx:horizontalAxisRenderers>

    <mx:seriesFilters>
       <mx:Array/>
    </mx:seriesFilters>
    
    
    <mx:series>
       <mx:AreaSeries 
            yField="Profit" 
            displayName="Profit"/>
    </mx:series>
 </mx:AreaChart>

<mx:AreaChart id="myChart2" 
    dataProvider="{expenses}" 
    showDataTips="false"
    width="100%" height="20%">
    <mx:verticalAxis>
        <mx:LinearAxis maximum="1000" padding="0"/>
    </mx:verticalAxis>

    <mx:verticalAxisRenderers>
        <mx:AxisRenderer 
            axis="{axis1}" showLine="false"
            visible="false" includeInLayout="false"/>
    </mx:verticalAxisRenderers>
    
    <mx:horizontalAxis>
       <mx:CategoryAxis 
            id="axis1"
            dataProvider="{expenses}" 
            categoryField="Month" />
    </mx:horizontalAxis>

    <mx:horizontalAxisRenderers>
        <mx:AxisRenderer 
            axis="{axis1}" showLabels="false" visible="false"
            includeInLayout="false">
        </mx:AxisRenderer>
    </mx:horizontalAxisRenderers>

    <mx:seriesFilters>
       <mx:Array/>
    </mx:seriesFilters>
        
    <mx:series>
       <mx:AreaSeries 
            yField="Profit" 
            displayName="Profit"/>
    </mx:series>

    <mx:annotationElements>
        <chart:ChartZoomer
            id="zoomInControl"
            navigateChart="{myChart2}"  chartData="{expenses}" dividerChange="dividerChangeHandler(event);" />
    </mx:annotationElements>
 </mx:AreaChart>
 <mx:Button label="set Data" click="setRandomData();" />
</mx:Application>