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

    <mx:Script>
        <![CDATA[
            import mx.graphics.Stroke;
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var dataProvider : ArrayCollection;
            
            private function init(count : int = 200) : void
            {
                var tempCollection : ArrayCollection = new ArrayCollection();
                
                for (var i : int = count; i >= 1; i--)
                {
                    tempCollection.addItem({id: i, value : (i * 10), otherValue:(i * 5)});
                }
                
                dataProvider = tempCollection;
            }
            
        ]]>
    </mx:Script>

    <mx:VBox horizontalAlign="center">
    
        <!-- Horizontal Chart -->
        <mx:ColumnChart id="horizontalChart"  
                        width="400"
                        height="400" 
                        dataProvider="{scrollableRenderer.maskedCollection}">
            <mx:horizontalAxis>
                <mx:CategoryAxis id="categoryAxis" categoryField="id" />
            </mx:horizontalAxis>
            <mx:verticalAxis>
                <mx:LinearAxis id="verticalAxis" />
            </mx:verticalAxis>
            <mx:series>
                <mx:ColumnSeries id="series" xField="id" yField="value" displayName="Value" />
            </mx:series>
            
            <mx:horizontalAxisRenderers>
                <maximporges:ScrollBarAxisRenderer    id="scrollableRenderer"
                                                    placement="bottom"
                                                    axis="{categoryAxis}"
                                                    verticalAxis="{verticalAxis}"
                                                    series="{series}"
                                                    dataProvider="{dataProvider}"
                                                    pageSize="{slider.value}" />
            </mx:horizontalAxisRenderers>
        </mx:ColumnChart>
        
    
    
        <!-- Vertical Chart -->
        <mx:BarChart id="verticalChart"  selectionMode="single"
                        width="400"
                        height="400" 
                        dataProvider="{verticalChartScrollableRenderer.maskedCollection}">
            <mx:horizontalAxis>
                <mx:LinearAxis id="verticalChartVerticalAxis" maximum="5000" />
            </mx:horizontalAxis>
            <mx:verticalAxis>
                <mx:CategoryAxis id="verticalChartCategoryAxis" categoryField="id" />
            </mx:verticalAxis>
            <mx:series>
                
                    <mx:BarSeries id="verticalChartSeries" yField="id" xField="value" displayName="Value" />
                

                
            </mx:series>
            
            <mx:verticalAxisRenderers>
                <maximporges:ScrollBarAxisRenderer    id="verticalChartScrollableRenderer"
                                                    placement="right"
                                                    axis="{verticalChartCategoryAxis}"
                                                    verticalAxis="{verticalChartVerticalAxis}"
                                                    series="{verticalChartSeries}" 
                                                    dataProvider="{dataProvider}"
                                                    showLabels="false"
                                                    pageSize="{slider.value}"
                                                     />
                                                    
                <mx:AxisRenderer placement="left" axis="{verticalChartCategoryAxis}" width="200" />
            </mx:verticalAxisRenderers>
                
        </mx:BarChart>
        
        
        <!-- Slider for selecting bar size -->
        <mx:HSlider id="slider" 
                    width="100%"
                    maximum="30"
                    minimum="1"
                    snapInterval="1"
                    liveDragging="true"
                    value="10"/>
        
        <!-- Randomize Button -->
        <mx:Button label="Randomize Data (Current Count: {dataProvider.length})" click="{init(Math.random() * 300)}" />
        
    </mx:VBox>
    
</mx:Application>