<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:amcharts="http://www.amcharts.com/com_internal"
                layout="absolute"
                backgroundColor="#FFFFFF"
                creationComplete="{generateChartData()}"
                width="100%"
                height="100%" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import com.amcharts.chartClasses.AmGraph;
            import mx.collections.ArrayCollection;
            
            [Bindable]private var chartData:ArrayCollection = new ArrayCollection(); 
            // generate some random data, quite different range
            private function generateChartData():void{
                var firstDate:Date = new Date();
                firstDate.setDate(firstDate.getDate() - 100);
                
                for(var i:Number = 0; i < 100; i++){
                    var newDate:Date = new Date(firstDate);
                    newDate.setDate(newDate.getDate() + i);
                    
                    var visits:Number = Math.round(Math.random() * 40) + 100;
                    var hits:Number   = Math.round(Math.random() * 80) + 500;
                    var views:Number   = Math.round(Math.random() * 6000);
                    
                    chartData.addItem({date:newDate, visits:visits, hits:hits, views:views});
                }
            }
            
            private function zoom():void{
                chart.zoomToIndexes(0,20);
            }
            
            private var _newValueAxis:ValueAxis;
            
            private function addValueAxis():void{
                
                _newValueAxis = new ValueAxis();
                _newValueAxis.offset = 50;
                _newValueAxis.setStyle("gridAlpha", 0);
                _newValueAxis.setStyle("axisColor", 0xB0DE09);
                _newValueAxis.setStyle("axisThickness", 2);
                chart.addValueAxis(_newValueAxis);
                
                var graph:AmGraph = new AmGraph();
                graph.valueField = "views";
                graph.setStyle("bullet", "triangleUp");
                graph.setStyle("hideBulletsCount", 30);
                graph.type = "smoothedLine";
                graph.valueAxis = _newValueAxis;        
                chart.addGraph(graph);                
                
                addAxis.enabled = false;
                removeAxis.enabled = true;
            }
            
            private function removeValueAxis():void{
                chart.removeValueAxis(_newValueAxis);
                addAxis.enabled = true;
                removeAxis.enabled = false;            
            }
            
        ]]>
    </mx:Script>
    
    <mx:VBox width="100%" height="100%">
        <amcharts:AmSerialChart 
            dataUpdated="{zoom()}" 
            id="chart" 
            width="100%" 
            height="100%" 
            dataProvider="{chartData}" 
            categoryField="date">
            
            <amcharts:graphs>
                <!-- In case you have more then one value axis, you should set valueAxis for the graph -->
                <amcharts:AmGraph title="Visits" valueAxis="{v1}" valueField="visits" type="smoothedLine" bullet="round" hideBulletsCount="30"/>                        
                <amcharts:AmGraph title="Visits" valueAxis="{v2}" valueField="hits" type="smoothedLine"  bullet="square" hideBulletsCount="30"/>                        
            </amcharts:graphs>
            <!-- you can have any number of value axes. If you place value axes on the same side, you can move axis by setting "offset" property -->
            <amcharts:valueAxes>
                <amcharts:ValueAxis id="v1" axisColor="#FF6600" axisThickness="2"/>                    
                <amcharts:ValueAxis id="v2" position="right" axisColor="#FCD202" gridAlpha="0" axisThickness="2"/>                    
            </amcharts:valueAxes>
            
            <amcharts:categoryAxis>
                <amcharts:CategoryAxis parseDates="true" minPeriod="DD" gridCount="13"/>
            </amcharts:categoryAxis>
            
            <amcharts:chartCursor>
                <amcharts:ChartCursor cursorPosition="mouse"/>                        
            </amcharts:chartCursor>
            <amcharts:chartScrollbar>
                <amcharts:ChartScrollbar height="15"/>                        
            </amcharts:chartScrollbar>
        </amcharts:AmSerialChart>
        <mx:HBox>
            <mx:Spacer width="35"/>
            <mx:Button id="addAxis" label="add value axis" click="{addValueAxis()}"/>
            <mx:Button enabled="false" id="removeAxis" label="remove value axis" click="{removeValueAxis()}"/>
        </mx:HBox>
        <mx:Spacer height="15"/>
    </mx:VBox>    
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:amcharts="http://www.amcharts.com/com_internal"
                layout="absolute"
                backgroundColor="#FFFFFF"
                width="100%"
                height="100%" 
                creationComplete="{clearFilter()}" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]private var chartData:ArrayCollection = new ArrayCollection([
                {year:"2000",a:20,b:5,c:10,d:5},
                {year:"2001",a:21,b:6,c:10,d:10},
                {year:"2002",a:24,b:7,c:9,d:10},
                {year:"2003",a:21,b:5,c:10,d:8},
                {year:"2004",a:24,b:4,c:10,d:8},
                {year:"2005",a:26,b:8,c:10,d:9},
                {year:"2006",a:27,b:9,c:12,d:9},
                {year:"2007",a:29,b:9,c:13,d:8},
                {year:"2008",a:30,b:10,c:14,d:7},
                {year:"2009",a:26,b:12,c:15,d:8},
                {year:"2010",a:24,b:11,c:13,d:9},
                {year:"2011",a:22,b:14,c:11,d:8},
                {year:"2012",a:21,b:16,c:11,d:7},
                {year:"2013",a:20,b:17,c:13,d:6},
                {year:"2014",a:15,b:19,c:13,d:5},
                {year:"2015",a:14,b:18,c:14,d:3}
                
            ]);
            
            private function zoom():void{
                chart.zoomToIndexes(6,12);
            }
            
            private function clearFilter():void{
                this.filters = [];
            }
            
        ]]>
    </mx:Script>
    <mx:filters> 
        <flash.filters:BevelFilter id='bevelFilter' xmlns:flash.filters='flash.filters.*' 
                                   angle='60'
                                   blurX='5' blurY='5'
                                   distance='3'
                                   highlightAlpha='0.39' highlightColor='#ffffff' 
                                   knockout='false' quality='1'
                                   shadowAlpha='0.27' shadowColor='#000000' strength='1' type='inner'/>
    </mx:filters>
    
    <mx:HBox backgroundColor="#FFFFFF" width="100%" height="100%">
        <mx:VBox width="100%" height="100%">                
            <amcharts:AmSerialChart
                width="100%"
                height="100%"
                id="chart"
                dataProvider="{chartData}"
                categoryField="year"
                plotAreaFillAlphas="[0]"
                dataUpdated="{zoom()}">
                <amcharts:graphs>
                    <amcharts:AmGraph 
                        color="#FFFFFF" 
                        title="Sample a" 
                        valueField="a" 
                        type="column" 
                        lineAlpha="0.8" 
                        fillAlphas="[0.8]"
                        showBalloon="false"
                        filters="{[bevelFilter]}"/>                        
                    <amcharts:AmGraph 
                        color="#FFFFFF" 
                        title="Sample b" 
                        valueField="b" 
                        type="column" 
                        lineAlpha="0.8" 
                        fillAlphas="[0.8]"
                        showBalloon="false"
                        filters="{[bevelFilter]}"/>
                    <amcharts:AmGraph 
                        color="#FFFFFF" 
                        title="Sample c" 
                        valueField="c" 
                        type="column" 
                        lineAlpha="0.8" 
                        fillAlphas="[0.8]"
                        showBalloon="false"
                        filters="{[bevelFilter]}"/>
                    <amcharts:AmGraph 
                        color="#FFFFFF" 
                        title="Sample d" 
                        valueField="d" 
                        type="column" 
                        lineAlpha="0.8"
                        fillAlphas="[0.8]"
                        showBalloon="false"
                        filters="{[bevelFilter]}"/>
                </amcharts:graphs>
                
                <amcharts:valueAxes>
                    <amcharts:ValueAxis stackType="regular" gridAlpha="0.1"/>                    
                </amcharts:valueAxes>
                
                <amcharts:categoryAxis>
                    <amcharts:CategoryAxis gridPosition="start" gridAlpha="0.1" fontWeight="bold"/>
                </amcharts:categoryAxis>
                
                <amcharts:chartScrollbar>
                    <amcharts:ChartScrollbar hideResizeGrips="false" height="20"/>                    
                </amcharts:chartScrollbar>
                
                <amcharts:chartCursor>
                    <amcharts:ChartCursor cursorAlpha=".5"/>                    
                </amcharts:chartCursor>
                
            </amcharts:AmSerialChart>
            
            <amcharts:AmLegend 
                fontWeight="bold"
                dataProvider="{chart}" 
                width="100%" align="center"/>                
        </mx:VBox>
        
        
    </mx:HBox>
    
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:amcharts="http://www.amcharts.com/com_internal"
                layout="absolute"
                backgroundColor="#FFFFFF"
                width="100%"
                height="100%" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var chartData:ArrayCollection = new ArrayCollection([
                // scatter points            
                {ax:1, ay:0.5, bx:1, by:2.2},
                {ax:2, ay:1.3, bx:2, by:4.9},
                {ax:3, ay:2.3, bx:3, by:5.1},
                {ax:4, ay:2.8, bx:4, by:5.3},
                {ax:5, ay:3.5, bx:5, by:6.1},
                {ax:6, ay:5.1, bx:6, by:8.3},
                {ax:7, ay:6.7, bx:7, by:10.5},
                {ax:8, ay:8.0, bx:8, by:12.3},
                {ax:9, ay:8.9, bx:9, by:14.5},
                {ax:10, ay:9.7, bx:10, by:15.0},
                {ax:11, ay:10.4, bx:11, by:18.8},
                {ax:12, ay:11.7, bx:12, by:19.0},
                // trend graphs
                {agx:12, agy:11, bgx:12, bgy:19},
                {agx:1, agy:1, bgx:1, bgy:2}            
            ]);    
        ]]>
    </mx:Script>
    
    
    <amcharts:AmXYChart
        width="100%"
        height="100%"
        id="chart"
        dataProvider="{chartData}"
        startDuration="1">
        <amcharts:graphs>
            <amcharts:AmGraph balloonText="x:[[x]] y:[[y]]" xField="ax" yField="ay" lineAlpha="0" bullet="triangleDown"/>
            <amcharts:AmGraph balloonText="x:[[x]] y:[[y]]" xField="bx" yField="by" lineAlpha="0" bullet="square"/>
            <amcharts:AmGraph balloonText="x:[[x]] y:[[y]]" xField="agx" yField="agy" lineThickness="2" lineColor="0xFF6600"/>
            <amcharts:AmGraph balloonText="x:[[x]] y:[[y]]" xField="bgx" yField="bgy" lineThickness="2" lineColor="0xFCD202"/>                        
        </amcharts:graphs>
        
        <amcharts:valueAxes>
            <amcharts:ValueAxis position="left" gridCount="20" labelFrequency="2"/>
            <amcharts:ValueAxis position="bottom" gridCount="20"/>                
        </amcharts:valueAxes>
        
        <amcharts:chartCursor>
            <amcharts:ChartCursor>                    
            </amcharts:ChartCursor>
        </amcharts:chartCursor>            
        
        <amcharts:chartScrollbar>
            <amcharts:ChartScrollbar hideResizeGrips="false" height="20">                    
            </amcharts:ChartScrollbar>    
        </amcharts:chartScrollbar>
        
    </amcharts:AmXYChart>
    
</mx:Application>