<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:chartClasses="org.openzet.charts.chartClasses.*"
    backgroundColor="0xFFFFFF">
    <mx:Script>
    <![CDATA[          
    import mx.collections.ArrayCollection;

    [Bindable]
    private var medalsAC:ArrayCollection = new ArrayCollection( [
        { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
        { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
        { Country: "Korea", Gold: 52, Silver:31, Bronze: 39 },
        { Country: "a", Gold: 25, Silver:21, Bronze: 35 },
        { Country: "e", Gold: 45, Silver:43, Bronze: 12 },
        { Country: "w", Gold: 34, Silver:42, Bronze: 52 },
        { Country: "qw", Gold: 57, Silver:31, Bronze: 21 },
        { Country: "Japan", Gold: 22, Silver:21, Bronze: 21 },
        { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);

    [Bindable]
    private var expensesAC:ArrayCollection = new ArrayCollection( [
            { Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
            { Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
    ]]>
    </mx:Script>

    <!-- Define custom colors for use as fills. -->
    <mx:SolidColor id="sc1" color="yellow" alpha=".8" />
    <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6" />
    <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6" />

    <!-- Define custom Strokes for the columns. -->
    <mx:Stroke id="s1" color="yellow" weight="2" />
    <mx:Stroke id="s2" color="0xCCCCCC" weight="2" />
    <mx:Stroke id="s3" color="0xFFCC66" weight="2" />

    <!-- Define custom colors for the candles. -->
    <mx:SolidColor id="up" color="green" alpha=".8" />
    <mx:SolidColor id="down" color="red" alpha=".8" />

    <!-- Define custom Stroke for the candle wick. -->
    <mx:Stroke id="wick" color="black" weight="2" />

    <!-- Define custom Stroke for the candle box. -->
    <mx:Stroke id="box" color="black" weight="1" />

    <mx:Panel title="Magnifying glass Example" 
        height="100%" width="100%" layout="vertical">
        <mx:HBox width="100%" height="100%">
            <mx:LineChart id="column" 
                width="100%" height="100%" 
                showDataTips="true" 
                dataProvider="{medalsAC}">

                <mx:horizontalAxis>
                    <mx:CategoryAxis categoryField="Country" />
                </mx:horizontalAxis>

                <mx:annotationElements>
                    <chartClasses:BaseElement id="lineBaseElement" width="100%" height="100%"
                        maxDataNum="4" fieldName="Country" />
                </mx:annotationElements>    

                <mx:series>
                    <mx:LineSeries xField="Country" yField="Gold" 
                        displayName="Gold" fill="{sc1}" stroke="{s1}" />
                    <mx:LineSeries xField="Country" yField="Silver" 
                        displayName="Silver" fill="{sc2}" stroke="{s2}" />
                    <mx:LineSeries xField="Country" yField="Bronze" 
                        displayName="Bronze" fill="{sc3}" stroke="{s3}" />
                </mx:series>
            </mx:LineChart>

            <mx:LineChart id="detailLineChart" 
                width="100%" height="100%" 
                showDataTips="true" 
                dataProvider="{lineBaseElement.selectData}">

                <mx:horizontalAxis>
                    <mx:CategoryAxis categoryField="Country" />
                </mx:horizontalAxis>

                <mx:series>
                    <mx:LineSeries xField="Country" yField="Gold" 
                        displayName="Gold" fill="{sc1}" stroke="{s1}" />
                    <mx:LineSeries xField="Country" yField="Silver" 
                        displayName="Silver" fill="{sc2}" stroke="{s2}" />
                    <mx:LineSeries xField="Country" yField="Bronze" 
                        displayName="Bronze" fill="{sc3}" stroke="{s3}" />
                </mx:series>
            </mx:LineChart>
        </mx:HBox>
            
        <mx:HBox width="100%" height="100%">
            <mx:CandlestickChart id="candlestickchart" 
                width="100%" height="100%" 
                showDataTips="true" dataProvider="{expensesAC}">            

                <mx:annotationElements>
                    <chartClasses:BaseElement id="candlestickBaseElement" width="100%" height="100%"
                        maxDataNum="9" fieldName="Date" />
                </mx:annotationElements>

                <mx:verticalAxis>
                    <mx:LinearAxis id="vaxis1" baseAtZero="false" />
                </mx:verticalAxis>

                <mx:horizontalAxis>
                    <mx:CategoryAxis id="haxis1" categoryField="Date" />
                </mx:horizontalAxis>

                <mx:horizontalAxisRenderers>
                    <mx:AxisRenderer axis="{haxis1}" canDropLabels="true" />
                </mx:horizontalAxisRenderers>

                <mx:series>
                    <mx:CandlestickSeries openField="Open" highField="High" lowField="Low" closeField="Close"
                        fill="{up}" declineFill="{down}" stroke="{wick}" boxStroke="{box}" />
                </mx:series>
            </mx:CandlestickChart>

            <mx:CandlestickChart id="detailcandlestickchart" 
                width="100%" height="100%" 
                showDataTips="true"
                dataProvider="{candlestickBaseElement.selectData}">

                <mx:verticalAxis>
                    <mx:LinearAxis id="vaxis2" baseAtZero="false" />
                </mx:verticalAxis>

                <mx:horizontalAxis>
                    <mx:CategoryAxis id="haxis2" categoryField="Date" />
                </mx:horizontalAxis>

                <mx:horizontalAxisRenderers>
                    <mx:AxisRenderer axis="{haxis2}" canDropLabels="true" />
                </mx:horizontalAxisRenderers>

                <mx:series>
                    <mx:CandlestickSeries openField="Open" highField="High" lowField="Low" closeField="Close"
                        fill="{up}" declineFill="{down}" stroke="{wick}" boxStroke="{box}" />
                </mx:series>
            </mx:CandlestickChart>
        </mx:HBox>
    </mx:Panel>
</mx:Application>