<?xml version="1.0" encoding="utf-8"?>

<!-- This example is made using amStock Flex component. Visit http://flex.amcharts.com to see more examples -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:amcharts="http://www.amcharts.com/com_internal"    
                creationComplete="{generateChartData()}"
                backgroundColor="#FFFFFF" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            // generate some random data for 4 different data providers
            
            [Bindable]
            private var chartData1:ArrayCollection = new ArrayCollection();
            
            [Bindable]
            private var chartData2:ArrayCollection = new ArrayCollection();    
            
            [Bindable]
            private var chartData3:ArrayCollection = new ArrayCollection();    
            
            [Bindable]
            private var chartData4:ArrayCollection = new ArrayCollection();            
            
            private function generateChartData():void
            {
                var firstDate:Date = new Date();
                firstDate.setDate(firstDate.getDate() - 1000);
                
                for(var i:Number = 0; i < 1000; i++)
                {
                    var newDate:Date = new Date(firstDate);
                    
                    newDate.setDate(newDate.getDate() + i);
                    
                    var a1:Number = Math.round(Math.random() * (40 + i)) + 100 + i;
                    var b1:Number   = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
                    
                    var a2:Number   = Math.round(Math.random() * (100 + i)) + 200 + i;
                    var b2:Number   = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
                    
                    var a3:Number   = Math.round(Math.random() * (100 + i)) + 200;
                    var b3:Number   = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
                    
                    var a4:Number   = Math.round(Math.random() * (100 + i)) + 200 + i;
                    var b4:Number   = Math.round(Math.random() * (100 + i)) + 600 + i;                                        
                    
                    chartData1.addItem({date:newDate, a:a1, b:b1});
                    chartData2.addItem({date:newDate, a:a2, b:b2});
                    chartData3.addItem({date:newDate, a:a3, b:b3});
                    chartData4.addItem({date:newDate, a:a4, b:b4});
                }
            }            
        ]]>
    </mx:Script>    
    
    <mx:VBox width="100%" height="100%" paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10">
        
        <amcharts:AmStockChart width="100%" height="100%">
            
            <!-- Stock chart must have at least one data set -->
            <amcharts:dataSets>
                <!-- first data set -->
                <amcharts:DataSet dataProvider="{chartData1}" categoryField="date" title="First data set">                
                    <!-- all fields which will be used by stock chart must be mapped -->
                    <amcharts:fieldMappings>
                        <amcharts:FieldMapping fromField="a" toField="value"/>
                        <amcharts:FieldMapping fromField="b" toField="volume"/>
                    </amcharts:fieldMappings>                
                </amcharts:DataSet>    
                
                <!-- second data set -->
                <amcharts:DataSet dataProvider="{chartData2}" categoryField="date" title="Second data set">                
                    <amcharts:fieldMappings>
                        <amcharts:FieldMapping fromField="a" toField="value"/>
                        <amcharts:FieldMapping fromField="b" toField="volume"/>
                    </amcharts:fieldMappings>                
                </amcharts:DataSet>    
                
                <!-- third data set -->
                <amcharts:DataSet dataProvider="{chartData3}" categoryField="date" title="Third data set">                
                    <amcharts:fieldMappings>
                        <amcharts:FieldMapping fromField="a" toField="value"/>
                        <amcharts:FieldMapping fromField="b" toField="volume"/>
                    </amcharts:fieldMappings>                
                </amcharts:DataSet>
                
                <!-- fourth data set -->
                <amcharts:DataSet dataProvider="{chartData4}" categoryField="date" title="Fourth data set">                
                    <amcharts:fieldMappings>
                        <amcharts:FieldMapping fromField="a" toField="value"/>
                        <amcharts:FieldMapping fromField="b" toField="volume"/>
                    </amcharts:fieldMappings>                
                </amcharts:DataSet>                                                    
            </amcharts:dataSets>
            
            
            <!-- Stock chart must have at least one stock panel -->
            
            <amcharts:panels>
                <!-- first panel -->
                <amcharts:StockPanel title="Value" height="50%" showCategoryAxis="false">
                    <!-- graphs -->
                    <amcharts:stockGraphs>
                        <amcharts:StockGraph id="g1" valueField="value" compareField="value" comparable="true"/>                        
                    </amcharts:stockGraphs>
                    <!-- legend -->
                    <amcharts:stockLegend>
                        <amcharts:StockLegend/>                        
                    </amcharts:stockLegend>
                </amcharts:StockPanel>
                
                <!-- second panel -->
                <amcharts:StockPanel title="Volume" height="50%">
                    <!-- graphs -->
                    <amcharts:stockGraphs>
                        <amcharts:StockGraph id="g2" valueField="volume" type="column" fillAlphas="[1]" lineAlpha="0"/>                        
                    </amcharts:stockGraphs>
                    <amcharts:stockLegend>
                        <amcharts:StockLegend/>                        
                    </amcharts:stockLegend>                    
                </amcharts:StockPanel>            
                
            </amcharts:panels>
            
            
            <!-- Data set selector is optional -->
            <amcharts:dataSetSelector>
                <amcharts:DataSetSelector position="left" width="157"/>                
            </amcharts:dataSetSelector>
            
            <!-- Period selector is optional -->
            <amcharts:periodSelector>
                <amcharts:PeriodSelector position="left" width="157">
                    <!-- predefined periods -->
                    <amcharts:periods>
                        <amcharts:PeriodButton label="10 Days" period="DD" count="10"/>
                        <amcharts:PeriodButton label="1 Month" period="MM" count="1"/>
                        <amcharts:PeriodButton label="6 Months" period="MM" count="6"/>
                        <amcharts:PeriodButton selected="true" label="1 Year" period="YYYY" count="1"/>
                        <amcharts:PeriodButton label="MAX" period="MAX"/>
                        <amcharts:PeriodButton label="YTD" period="YTD"/>                        
                    </amcharts:periods>
                </amcharts:PeriodSelector>
            </amcharts:periodSelector>
            
            <!-- All settings components below are optional, you can remove them --> 
            <!-- Scrollbar settings -->
            <amcharts:chartScrollbarSettings>
                <amcharts:ChartScrollbarSettings height="30" graph="{g1}"/>
            </amcharts:chartScrollbarSettings>
            
            <!-- Category axes settings -->        
            <amcharts:categoryAxesSettings>
                <amcharts:CategoryAxesSettings maxSeries="100"/>
            </amcharts:categoryAxesSettings>
            
            <!-- Value axes settings -->        
            <amcharts:valueAxesSettings>
                <amcharts:ValueAxesSettings/>
            </amcharts:valueAxesSettings>    
            
            <!-- Panels settings -->        
            <amcharts:panelsSettings>
                <amcharts:PanelsSettings/>
            </amcharts:panelsSettings>    
            
            <!-- Legends settings -->        
            <amcharts:legendSettings>
                <amcharts:LegendSettings/>
            </amcharts:legendSettings>        
            
            <!-- Stock events settings -->        
            <amcharts:stockEventsSettings>
                <amcharts:StockEventsSettings/>
            </amcharts:stockEventsSettings>                                                            
            
        </amcharts:AmStockChart>
    </mx:VBox>    
    
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:amcharts="http://www.amcharts.com/com_internal"    
                creationComplete="{generateChartData()}"
                backgroundColor="#FFFFFF">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var chartData:ArrayCollection = new ArrayCollection();            
            
            private function generateChartData():void
            {
                var firstDate:Date = new Date();
                firstDate.setHours(0,0,0,0);
                firstDate.setDate(firstDate.getDate() - 200);
                
                for(var i:Number = 0; i < 200; i++)
                {
                    var newDate:Date = new Date(firstDate);
                    
                    newDate.setDate(newDate.getDate() + i);
                    
                    var open:Number     = Math.round(Math.random() * (30) + 100 + i * 0.3);
                    var close:Number   = open + Math.round(Math.random() * (15) - Math.random() * 10);
                    
                    var low:Number;
                    if(open < close)
                    {
                        low = open - Math.round(Math.random() * 5);
                    }
                    else
                    {
                        low = close - Math.round(Math.random() * 5);
                    }                    
                    
                    var high:Number;
                    if(open < close)
                    {
                        high = close + Math.round(Math.random() * 5);
                    }
                    else
                    {
                        high = open + Math.round(Math.random() * 5);
                    }                    
                    
                    var volume:Number   = Math.round(Math.random() * (1000 + i)) + 100 + i;
                    var value:Number   = Math.round(Math.random() * (5000 + i)) + 100;
                    
                    
                    chartData.addItem({date:newDate, open:open, close:close, high:high, low:low, volume:volume, value:value});
                }
            }    
            
            [Bindable]
            private var _panel:StockPanel;
            
            private function addPanel():void
            {
                _panel = new StockPanel();
                _panel.showCategoryAxis = false;
                _panel.allowTurningOff = true;
                _panel.percentHeight = 30;
                _panel.title = "Average";
                
                var graph:StockGraph = new StockGraph();
                graph.valueField = "value";
                _panel.addStockGraph(graph);
                
                
                chart.addPanelAt(_panel, 1);
            }
            
            private function removePanel():void
            {
                chart.removePanel(_panel);
            }
            
            private function set3D():void
            {
                chart.panelsSettings.angle = 30;
                chart.panelsSettings.depth3D = 15;                
            }
            
            private function set2D():void
            {
                chart.panelsSettings.angle = 0;
                chart.panelsSettings.depth3D = 0;                
            }            
            
        ]]>
    </mx:Script>    
    
    <mx:VBox width="100%" height="100%" paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10">
        
        <mx:HBox>
            <mx:Button label="add panel" click="{addPanel()}"/>
            <mx:Button label="remove panel" click="{removePanel()}"/>
            <mx:Spacer width="20"/>
            <mx:Label text="Cursor type:"/>
            <mx:RadioButton groupName="panSelect" label="select" selected="true" click="{chart.chartCursorSettings.pan=false}"/>
            <mx:RadioButton groupName="panSelect" label="pan" click="{chart.chartCursorSettings.pan=true}"/>
            <mx:Spacer width="20"/>
            <mx:RadioButton groupName="dgroup" label="2D" selected="true" click="{set2D()}"/>
            <mx:RadioButton groupName="dgroup" label="3D" click="{set3D()}"/>                            
        </mx:HBox>
        
        <amcharts:AmStockChart id="chart" width="100%" height="100%">
            
            <amcharts:dataSets>
                <amcharts:DataSet
                    dataProvider="{chartData}" 
                    categoryField="date" 
                    title=""
                    color="#7f8da9">
                    
                    <amcharts:fieldMappings>
                        <amcharts:FieldMapping fromField="open" toField="open"/>
                        <amcharts:FieldMapping fromField="close" toField="close"/>
                        <amcharts:FieldMapping fromField="low" toField="low"/>
                        <amcharts:FieldMapping fromField="high" toField="high"/>
                        <amcharts:FieldMapping fromField="volume" toField="volume"/>
                        <amcharts:FieldMapping fromField="value" toField="value"/>
                    </amcharts:fieldMappings>                
                </amcharts:DataSet>    
            </amcharts:dataSets>
            
            <amcharts:panels>
                
                <amcharts:StockPanel title="Value" height="70%" showCategoryAxis="true">
                    
                    <amcharts:stockGraphs>
                        <amcharts:StockGraph 
                            id="g1"
                            valueField="close" 
                            type="candlestick" 
                            openField="open" 
                            closeField="close" 
                            lowField="low" 
                            highField="high"
                            lineColor="#7f8da9"
                            fillColors="[#7f8da9]"
                            negativeLineColor="#db4c3c"
                            negativeFillColors="[#db4c3c]" 
                            fillAlphas="[1]"
                            useDataSetColors="false"/>                        
                    </amcharts:stockGraphs>
                    
                    <amcharts:stockLegend>
                        <amcharts:StockLegend valueTextRegular="open:[[open]] close:[[close]] low:[[low]] high:[[high]]" markerType="none" valueWidth="250" markerSize="0" valueAlign="left"/>                        
                    </amcharts:stockLegend>
                </amcharts:StockPanel>
                
                <amcharts:StockPanel title="Volume" height="30%" allowTurningOff="true" showCategoryAxis="false">
                    <amcharts:stockGraphs>
                        <amcharts:StockGraph 
                            id="g2" 
                            valueField="volume" 
                            type="column" 
                            fillAlphas="[1]" 
                            lineAlpha="0"/>                        
                    </amcharts:stockGraphs>
                    <amcharts:stockLegend>
                        <amcharts:StockLegend markerType="none" markerSize="0" valueAlign="left"/>                        
                    </amcharts:stockLegend>                    
                </amcharts:StockPanel>            
                
            </amcharts:panels>
            
            <!-- Period selector is optional -->
            <amcharts:periodSelector>
                <amcharts:PeriodSelector>
                    <!-- predefined periods -->
                    <amcharts:periods>
                        <amcharts:PeriodButton label="10 Days" period="DD" count="10"/>
                        <amcharts:PeriodButton label="1 Month" period="MM" count="1"/>
                        <amcharts:PeriodButton selected="true" label="6 Months" period="MM" count="6"/>
                        <amcharts:PeriodButton label="MAX" period="MAX"/>
                        <amcharts:PeriodButton label="YTD" period="YTD"/>                        
                    </amcharts:periods>
                </amcharts:PeriodSelector>
            </amcharts:periodSelector>
            
            <!-- Scrollbar settings -->
            <amcharts:chartScrollbarSettings>
                <amcharts:ChartScrollbarSettings 
                    selectedGraphFillColor="#7f8da9" 
                    selectedGraphFillAlpha="1" 
                    graphType="line" 
                    graph="{g1}"/>
            </amcharts:chartScrollbarSettings>
            
            <amcharts:panelsSettings>
                <amcharts:PanelsSettings                    
                    backgroundColor="#FFFFFF" 
                    backgroundAlpha="1" 
                    panelHeaderPaddingTop="7" 
                    panelHeaderPaddingRight="7" 
                    panelHeaderPaddingLeft="7"/>
            </amcharts:panelsSettings>
            
            <amcharts:valueAxesSettings>
                <amcharts:ValueAxesSettings labelBackgroundAlpha="0.5" labelBackgroundColor="#000000" color="#FFFFFF"/>
            </amcharts:valueAxesSettings>
            
            <amcharts:chartCursorSettings>
                <amcharts:ChartCursorSettings valueBalloonsEnabled="true" crosshair="true"/>
            </amcharts:chartCursorSettings>
            
            <amcharts:balloon>
                <amcharts:AmBalloon 
                    cornerRadius="8"
                    adjustBorderColor="true"
                    borderAlpha="1" 
                    fillColor="#FFFFFF" 
                    fillAlpha="0.9" 
                    color="#000000"
                    borderThickness="3"/>
            </amcharts:balloon>
            
        </amcharts:AmStockChart>
    </mx:VBox>
    
    
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>

<!-- This example is made using amStock Flex component. Visit http://flex.amcharts.com to see more examples -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:amcharts="http://www.amcharts.com/com_internal"    
                creationComplete="{generateChartData()}"
                backgroundColor="#FFFFFF" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import com.amcharts.stock.events.StockBulletEvent;
            import mx.collections.ArrayCollection;
            
            // generate some random data for 4 different data providers
            
            [Bindable]
            private var chartData1:ArrayCollection = new ArrayCollection();
            
            [Bindable]
            private var chartData2:ArrayCollection = new ArrayCollection();    
            
            [Bindable]
            private var chartData3:ArrayCollection = new ArrayCollection();    
            
            [Bindable]
            private var chartData4:ArrayCollection = new ArrayCollection();            
            
            private function generateChartData():void
            {
                var firstDate:Date = new Date(2010,1,5);
                firstDate.setDate(firstDate.getDate() - 1000);
                
                for(var i:Number = 0; i < 1000; i++)
                {
                    var newDate:Date = new Date(firstDate);
                    
                    newDate.setDate(newDate.getDate() + i);
                    
                    var a1:Number = Math.round(Math.random() * (40 + i)) + 100 + i;
                    var b1:Number   = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
                    
                    var a2:Number   = Math.round(Math.random() * (100 + i)) + 200 + i;
                    var b2:Number   = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
                    
                    var a3:Number   = Math.round(Math.random() * (100 + i)) + 200;
                    var b3:Number   = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
                    
                    var a4:Number   = Math.round(Math.random() * (100 + i)) + 200 + i;
                    var b4:Number   = Math.round(Math.random() * (100 + i)) + 600 + i;                                        
                    
                    chartData1.addItem({date:newDate, a:a1, b:b1});
                    chartData2.addItem({date:newDate, a:a2, b:b2});
                    chartData3.addItem({date:newDate, a:a3, b:b3});
                    chartData4.addItem({date:newDate, a:a4, b:b4});
                }
            }    
            
            private function handleEventClick(event:StockBulletEvent):void
            {
                trace(event.eventObject.description);
            }        
        ]]>
    </mx:Script>    
    
    <mx:VBox width="100%" height="100%" paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5">
        
        <amcharts:AmStockChart 
            width="100%" 
            height="100%" 
            mainDataSet="{ds3}"
            clickStockEvent="{handleEventClick(event)}">
            
            <amcharts:dataSets>
                <amcharts:DataSet id="ds1" dataProvider="{chartData1}" categoryField="date" title="First data set">                
                    <amcharts:fieldMappings>
                        <amcharts:FieldMapping fromField="a" toField="value"/>
                        <amcharts:FieldMapping fromField="b" toField="volume"/>
                    </amcharts:fieldMappings>                
                </amcharts:DataSet>    
                
                <amcharts:DataSet id="ds2" dataProvider="{chartData2}" categoryField="date" title="Second data set">                
                    <amcharts:fieldMappings>
                        <amcharts:FieldMapping fromField="a" toField="value"/>
                        <amcharts:FieldMapping fromField="b" toField="volume"/>
                    </amcharts:fieldMappings>                
                </amcharts:DataSet>    
                
                <amcharts:DataSet id="ds3" dataProvider="{chartData3}" categoryField="date" title="Third data set">                
                    <amcharts:fieldMappings>
                        <amcharts:FieldMapping fromField="a" toField="value"/>
                        <amcharts:FieldMapping fromField="b" toField="volume"/>
                    </amcharts:fieldMappings>        
                    
                    <!-- EVENTS -->
                    <amcharts:stockEvents>
                        <amcharts:StockEvent date="{new Date(2009,5,2)}" type="polygon" backgroundColor="#CC0000" graph="{g1}" polygonX="{[0,10,5,5,-5,-5,-10,0]}" polygonY="{[0,-10,-10,-20,-20,-10,-10,0]}"/>
                        <amcharts:StockEvent date="{new Date(2009,6,26)}" type="flag" backgroundColor="#85CDE6" graph="{g1}" text="A" description="This is description of an event"/>
                        <amcharts:StockEvent date="{new Date(2009,7,26)}" type="text" backgroundColor="#FFFFFF" backgroundAlpha="0.5" graph="{g1}">
                            <amcharts:text><![CDATA[Some longer<br>text can also<br> be added]]></amcharts:text>
                        </amcharts:StockEvent>
                        <amcharts:StockEvent date="{new Date(2009,8,19)}" graph="{g1}" text="B" description="This is description of an event"/>
                        <amcharts:StockEvent date="{new Date(2009,9,3)}" type="flag" backgroundColor="#85CDE6" graph="{g1}" text="C" description="This is description of an event"/>
                        <amcharts:StockEvent date="{new Date(2009,10,6)}" graph="{g1}" text="D" description="This is description of an event"/>
                        <amcharts:StockEvent date="{new Date(2009,11,5)}" graph="{g1}" text="E" description="This is description of an event"/>
                        <amcharts:StockEvent date="{new Date(2009,11,5)}" graph="{g1}" text="F" description="This is description of an event"/>                        
                        <amcharts:StockEvent date="{new Date(2009,11,25)}" graph="{g1}" text="G" description="This is description of an event"/>
                        <amcharts:StockEvent date="{new Date(2010,0,10)}" type="polygon" backgroundColor="#00CC00" graph="{g1}" polygonX="{[0,10,5,5,-5,-5,-10,0]}" polygonY="{[0,10,10,20,20,10,10,0]}"/>
                    </amcharts:stockEvents>
                    
                </amcharts:DataSet>
                
                <amcharts:DataSet id="ds4" dataProvider="{chartData4}" categoryField="date" title="Fourth data set">                
                    <amcharts:fieldMappings>
                        <amcharts:FieldMapping fromField="a" toField="value"/>
                        <amcharts:FieldMapping fromField="b" toField="volume"/>
                    </amcharts:fieldMappings>                
                </amcharts:DataSet>                                                    
            </amcharts:dataSets>
            
            
            <amcharts:panels>
                <amcharts:StockPanel height="60%" showCategoryAxis="false">
                    <amcharts:stockLegend>
                        <amcharts:StockLegend/>
                    </amcharts:stockLegend>
                    <amcharts:stockGraphs>
                        <amcharts:StockGraph id="g1" type="smoothedLine" valueField="value" compareField="value" comparable="true"/>                        
                    </amcharts:stockGraphs>
                </amcharts:StockPanel>
                
                <amcharts:StockPanel height="40%">
                    <amcharts:stockGraphs>
                        <amcharts:StockGraph id="g2" cornerRadiusTop="8" valueField="volume" type="column" fillAlphas="[1]" lineAlpha="0"/>                        
                    </amcharts:stockGraphs>
                </amcharts:StockPanel>            
                
            </amcharts:panels>
            
            <amcharts:dataSetSelector>
                <amcharts:DataSetSelector position="left" width="160"/>                
            </amcharts:dataSetSelector>
            
            <amcharts:periodSelector>
                <amcharts:PeriodSelector position="left" width="160">
                    <amcharts:periods>
                        <amcharts:PeriodButton label="10 Days" period="DD" count="10"/>
                        <amcharts:PeriodButton label="1 Month" period="MM" count="1"/>
                        <amcharts:PeriodButton label="2 Month" period="MM" count="2"/>
                        <amcharts:PeriodButton label="6 Months" period="MM" count="6"/>
                        <amcharts:PeriodButton selected="true" label="1 Year" period="YYYY" count="1"/>
                        <amcharts:PeriodButton label="MAX" period="MAX"/>
                    </amcharts:periods>
                </amcharts:PeriodSelector>
            </amcharts:periodSelector>
            
            <amcharts:stockEventsSettings>
                <amcharts:StockEventsSettings backgroundColor="#CDF52C"/>
            </amcharts:stockEventsSettings>
            
            <amcharts:chartScrollbarSettings>
                <amcharts:ChartScrollbarSettings height="30" graph="{g1}"/>
            </amcharts:chartScrollbarSettings>
            
            <amcharts:chartCursorSettings>
                <amcharts:ChartCursorSettings showValueAxisValue="true" valueBalloonsEnabled="true" crosshair="true"/>
            </amcharts:chartCursorSettings>    
            
            <amcharts:panelsSettings>
                <amcharts:PanelsSettings startDuration="1" sequencedAnimation="true"/>
            </amcharts:panelsSettings>                                                        
            
        </amcharts:AmStockChart>
    </mx:VBox>
    
    
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>

<!-- This example is made using amStock Flex component. Visit http://flex.amcharts.com to see more examples -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:amcharts="http://www.amcharts.com/com_internal"    
                creationComplete="{generateChartData()}"
                backgroundColor="#FFFFFF" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var chartData:ArrayCollection = new ArrayCollection();
            
            private function generateChartData():void
            {
                var firstDate:Date = new Date();
                firstDate.setMinutes(firstDate.getMinutes() - 2000);
                
                for(var i:Number = 0; i < 2000; i++)
                {
                    var newDate:Date = new Date(firstDate);
                    
                    newDate.setMinutes(newDate.getMinutes() + i);
                    
                    var a:Number = Math.round(Math.random() * (40 + i)) + 100 + i;
                    var b:Number   = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
                    
                    chartData.addItem({date:newDate, a:a, b:b});
                }
            }            
        ]]>
    </mx:Script>    
    
    <mx:VBox width="100%" height="100%" paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10">
        
        <amcharts:AmStockChart width="100%" height="100%">
            <amcharts:dataSets>
                <amcharts:DataSet color="#00CC00" dataProvider="{chartData}" categoryField="date" title="First data set">                
                    <amcharts:fieldMappings>
                        <amcharts:FieldMapping fromField="a" toField="value"/>
                        <amcharts:FieldMapping fromField="b" toField="volume"/>
                    </amcharts:fieldMappings>                
                </amcharts:DataSet>    
            </amcharts:dataSets>
                        
            <amcharts:panels>                
                <!-- to enabled drawing icons, you only need to set drawingIconsEnabled="true" on StockPanel -->                
                <amcharts:StockPanel drawingIconsEnabled="true" title="Value" height="50%" showCategoryAxis="true">
                    <amcharts:stockGraphs>
                        <amcharts:StockGraph bulletBorderColor="#FFFFFF" bullet="round" id="g1" valueField="value" compareField="value" comparable="true"/>                        
                    </amcharts:stockGraphs>
                    <amcharts:stockLegend>
                        <amcharts:StockLegend/>                        
                    </amcharts:stockLegend>
                </amcharts:StockPanel>
            </amcharts:panels>
            
            <amcharts:periodSelector>
                <amcharts:PeriodSelector position="bottom" width="157">
                    <amcharts:periods>
                        <amcharts:PeriodButton selected="true" label="1 Hour" period="hh" count="1"/>
                        <amcharts:PeriodButton label="2 Hours" period="hh" count="2"/>
                        <amcharts:PeriodButton label="6 Hours" period="hh" count="6"/>
                        <amcharts:PeriodButton label="1 Day" period="DD" count="1"/>
                        <amcharts:PeriodButton label="MAX" period="MAX"/>
                    </amcharts:periods>
                </amcharts:PeriodSelector>
            </amcharts:periodSelector>

            <amcharts:chartScrollbarSettings>
                <amcharts:ChartScrollbarSettings height="30" graph="{g1}"/>
            </amcharts:chartScrollbarSettings>
            
            <amcharts:categoryAxesSettings>
                <amcharts:CategoryAxesSettings minPeriod="mm"/>
            </amcharts:categoryAxesSettings>
            
            <amcharts:chartCursorSettings>
                <amcharts:ChartCursorSettings showValueAxisValue="true" crosshair="true"/>
            </amcharts:chartCursorSettings>
            
        </amcharts:AmStockChart>
    </mx:VBox>    
    
</mx:Application>