<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:comp="com.connectedpixel.charts.*"
     creationComplete="init()"
    layout="vertical" viewSourceURL="srcview/index.html">

    <mx:Style>
        ScrollableAxisRenderer {
            scrollBarUpArrowUpSkin: Embed(source='assets/flex_scroll_skins.swf', symbol='ScrollArrowUp_upSkin');
            scrollBarDownArrowUpSkin: Embed(source='assets/flex_scroll_skins.swf', symbol='ScrollArrowDown_upSkin');
            scrollBarUpArrowOverSkin: Embed(source='assets/flex_scroll_skins.swf', symbol='ScrollArrowUp_overSkin');
            scrollBarDownArrowOverSkin: Embed(source='assets/flex_scroll_skins.swf', symbol='ScrollArrowDown_overSkin');
            scrollBarUpArrowDownSkin: Embed(source='assets/flex_scroll_skins.swf', symbol='ScrollArrowUp_downSkin');
            scrollBarDownArrowDownSkin: Embed(source='assets/flex_scroll_skins.swf', symbol='ScrollArrowDown_downSkin');
            
            scrollBarThumbUpSkin: Embed(source='assets/flex_scroll_skins.swf', symbol='ScrollThumb_upSkin');
            scrollBarThumbOverSkin: Embed(source='assets/flex_scroll_skins.swf', symbol='ScrollThumb_overSkin');
            scrollBarThumbDownSkin: Embed(source='assets/flex_scroll_skins.swf', symbol='ScrollThumb_downSkin');
        }
    </mx:Style>
    
    <mx:XML xmlns="" id="myData">
        <items>
            <item year="1960" rain="92" />
            <item year="1961" rain="192" />
            <item year="1962" rain="32" />
            <item year="1963" rain="52" />
            <item year="1964" rain="112" />
            <item year="1965" rain="52" />
            <item year="1966" rain="88" />
            <item year="1967" rain="52" />
            <item year="1968" rain="66" />
            <item year="1969" rain="39" />
            <item year="1970" rain="192" />
            <item year="1971" rain="182" />
            <item year="1972" rain="177" />
            <item year="1973" rain="179" />
            <item year="1974" rain="198" />
            <item year="1975" rain="207" />
            <item year="1976" rain="388" />
            <item year="1977" rain="372" />
            <item year="1978" rain="352" />
            <item year="1979" rain="33" />
            <item year="1980" rain="32" />
            <item year="1981" rain="56" />
            <item year="1982" rain="52" />
            <item year="1983" rain="49" />
            <item year="1984" rain="38" />
            <item year="1985" rain="48" />
            <item year="1986" rain="47" />
            <item year="1987" rain="38" />
            <item year="1988" rain="79" />
            <item year="1989" rain="83" />
            <item year="1990" rain="65" />
            <item year="1991" rain="56" />
            <item year="1992" rain="104" />
            <item year="1993" rain="98" />
            <item year="1994" rain="68" />
            <item year="1995" rain="74" />
            <item year="1996" rain="81" />
            <item year="1997" rain="85" />
            <item year="1998" rain="52" />
            <item year="1999" rain="72" />
            <item year="2000" rain="72" />
            <item year="2001" rain="121" />
            <item year="2002" rain="145" />
            <item year="2003" rain="245" />
            <item year="2004" rain="205" />
            <item year="2005" rain="315" />
        </items>
    </mx:XML>
    
    <mx:XMLListCollection id="rainData" source="{myData.children()}" />
    
    <mx:Label text="Annual Rainfall in Inches" />
    <mx:ColumnChart id="myChart"  
            width="350" height="200" 
            dataProvider="{myData.children()}"   >
            
        <mx:horizontalAxis>
            <mx:CategoryAxis id="yearAxis"  categoryField="@year"   />
        </mx:horizontalAxis>
            
        <mx:series>
            <mx:ColumnSeries xField="@year"  yField="@rain" displayName="Rain" >
            </mx:ColumnSeries>
        </mx:series>
        <mx:horizontalAxisRenderers>
            <comp:ScrollableAxisRenderer id="scrollAxisRenderer" axis="{yearAxis}" tickPlacement="none"   placement="bottom"
                    labelGap="3"  maxVisibleColumns="8"   />
        </mx:horizontalAxisRenderers>
            
    </mx:ColumnChart>
    
    <mx:HBox>
        <mx:Label text="Zoom" />
        <mx:HSlider id="zoomSlider"  minimum="5" maximum="{rainData.length}"  
            value="{scrollAxisRenderer.maxVisibleColumns}"
            change="scrollAxisRenderer.maxVisibleColumns=zoomSlider.value"  
            snapInterval="1" allowTrackClick="true" 
            liveDragging="true"/>
    </mx:HBox>
</mx:Application>