<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" backgroundGradientColors="[#ffffff, #ffffff]" backgroundColor="#ffffff" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;
            import com.adobe.viewsource.ViewSource;
        
            [Bindable]
            private var tickStroke:Stroke = new Stroke(0xCDCF19,1);    
            [Bindable]
            private var chartStroke:Stroke = new Stroke(0xCDCF19,2);
            private var monthArrayShort:Array = ['jan ','feb ', 'mrt ', 'apr ', 'mei ', 'jun ','jul ','aug ', 'sep ','okt ','nov ','dec '];
            private var dayArray:Array = [];
            
            private function init():void{
                //ViewSource.addMenuItem(this,"http://blog.arnomanders.nl/upload/TimeDateAxis/srcview/index.html");

                this.dayArray = [];
                for (var i:int = 0; i <73; i++)
                {
                    this.dayArray.push(Math.random()* 50+ 20);
                }
                this.lineChart.dataProvider = this.dayArray;
            }
                
            private function createDate(s:String):Date{
                var date:Date = new Date();
                date.fullYear = 2009;
                date.month = 0;
                date.date = 0 + (int(s)* 5);
                return date;
            }
            
            private function horizontalLabelFunction(item:Object, value:Object):String{
                var labelArray:Array =  value.split('/');
                return ""+monthArrayShort[labelArray[0] -1];
            }
        ]]>
    </mx:Script>
    <mx:SeriesSlide id="slideIn" duration="1" direction="up" easingFunction="Bounce.easeOut"/>
    <mx:SeriesSlide id="slideOut" duration="1" direction="down" easingFunction="Bounce.easeOut"/>
    <mx:LineChart x="10" y="19" id="lineChart" width="95%" height="150" showDataTips="true" 
        showAllDataTips="false" dataTipRenderer="lineChartDataTip" seriesFilters="[]">
        <mx:series>
                <mx:LineSeries
                    yField="" lineStroke="{this.chartStroke}" stroke="{this.chartStroke}"
                    showDataEffect="{slideIn}" hideDataEffect="{slideOut}">
                    <mx:itemRenderer>
                        <mx:Component>
                                <mx:CircleItemRenderer/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:LineSeries>
            </mx:series>
        <mx:verticalAxis>
            <mx:LinearAxis minimum="0" />
        </mx:verticalAxis>
        <mx:horizontalAxis>
            <mx:DateTimeAxis dataUnits="months" parseFunction="createDate"/>
        </mx:horizontalAxis>
        <mx:horizontalAxisRenderer>
            <mx:AxisRenderer color="#CDCF19" labelFunction="horizontalLabelFunction"
                tickLength="8" canDropLabels="true" tickPlacement="outside" tickStroke="{this.tickStroke}">
                <mx:axisStroke>
                    <mx:Stroke weight="1" color="#96C4AB"/>
                </mx:axisStroke>
            </mx:AxisRenderer>
        </mx:horizontalAxisRenderer>
        <mx:backgroundElements>
            <mx:GridLines direction="horizontal">
                <mx:horizontalStroke>
                    <mx:Stroke color="#96C4AB" weight="1"/>
                </mx:horizontalStroke>
            </mx:GridLines>
        </mx:backgroundElements>
        <mx:verticalAxisRenderer>
            <mx:AxisRenderer color="#CDCF19" tickLength="8" tickStroke="{this.tickStroke}">
                <mx:axisStroke>
                    <mx:Stroke weight="3" color="#96C4AB"/>
                </mx:axisStroke>
                
            </mx:AxisRenderer>
            
        </mx:verticalAxisRenderer>

    </mx:LineChart>
    <mx:Button label="new data in chart" click="{init();}"/>
    
</mx:Application>