Using Chart Annotation Element

Question

I have a rather strange issue which I just can't get my head around. Basically I have a function which looks like the below - This simply draws a box around half of the data canvas.
private function draw():void
                canvas.clear();
                canvas.beginFill(0x62dce1);
                var canvasWidth:Number = canvas.width;
                var canvasHeight:Number = canvas.height;
                var minPt:Array = canvas.localToData(new Point(0, 0));
                var maxPt:Array = canvas.localToData(new Point(canvasWidth/2,canvasHeight));
                canvas.drawRect(minPt[0]-1, maxPt[1], maxPt[0]-1, minPt[1]);
                canvas.endFill();
This works perfectly well when using data that is loaded locally - i.e. data that is stored within an array collection with the MXML file. However, the momeny I use a HTTP:Service to pull in the data, once the button is click to draw the rectangle - NOTHING appears on the data canvas.
Does anyone know why this might be happening? Im assuming its something to do with the data canvas updating as soon as the chart is loaded and isn't waiting for the asyncronose HTTP service?
Any ideas would be greatly appreciated.
Thanks
Full Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="getGoogleData.send()">
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.collections.ArrayCollection;
            import mx.containers.HBox;
              import mx.charts.LinearAxis;
              import mx.containers.Box;
            import mx.collections.ArrayCollection;
               import mx.charts.series.items.ColumnSeriesItem;
            import mx.charts.ChartItem;
            import mx.charts.chartClasses.CartesianCanvasValue;
            import mx.charts.chartClasses.CartesianTransform;
             [Bindable]
             public var profits:ArrayCollection = new ArrayCollection([
        {Month:1, Profit:1300},
        {Month:2, Profit:750},
        {Month:3, Profit:1100},
        {Month:4, Profit:1000},
        {Month:5, Profit:980},
        {Month:6, Profit:1500},
        {Month:7, Profit:2060},
        {Month:8, Profit:1700},
        {Month:9, Profit:1690},
        {Month:10, Profit:2200},
        {Month:11, Profit:2550},
        {Month:12, Profit:3000}
            [Bindable]
            private var summaryGoogleData:ArrayCollection = new ArrayCollection;
            [Bindable]
            public var folderLocation:String = "http://79.99.65.19/VISA/PHP";
            import mx.rpc.events.ResultEvent;
            private function recieveGoogleData(evt:ResultEvent):void
                var tmpArray:Object = new Object;
                tmpArray = evt.result.data.graphdata;
                for each (var o : Object in tmpArray)
                    if (o.pagepath == "/bbva")
                        summaryGoogleData.addItem(o);
                test.dataProvider = summaryGoogleData;
            public var drawnOnChart:Boolean = false;
            private function drawOnChart(evt:Event):void
                if (drawnOnChart == false)
                    var p:Point = canvas.dataToLocal(10,600);
                    if (isNaN(p.x) || isNaN(p.y))
                        trace ("Nan");
                    else
                        trace ("Not NaN");
                        var x:Number = p.x;
                          var y:Number = p.y;
                          //drawSquareBox();       
            //updateComplete="drawOnChart(event)"
             private function draw():void
                canvas.clear();
                canvas.beginFill(0x62dce1);
                var canvasWidth:Number = canvas.width;
                var canvasHeight:Number = canvas.height;
                var minPt:Array = canvas.localToData(new Point(0, 0));
                var maxPt:Array = canvas.localToData(new Point(canvasWidth/2,canvasHeight));
                canvas.drawRect(minPt[0]-1, maxPt[1], maxPt[0]-1, minPt[1]);
                canvas.endFill();
        ]]>
    </mx:Script>
    <!-- GET THE SUMMARY OF VISITS (GOOGLE) -->
    <mx:HTTPService id="getGoogleData" showBusyCursor="true" result="recieveGoogleData(event)" fault="getGoogleData.send()" method="GET" url="{folderLocation}/get_summaryGoogleData.php" useProxy="false"/>
    <mx:Legend dataProvider="{linechart1}" x="755" y="10"/>
    <mx:DataGrid x="357" y="315" id="test">
    </mx:DataGrid>
    <mx:Button x="52" y="323" label="Button" click="draw()"/>
    <mx:Panel x="10" y="10" width="830" height="265" layout="absolute">
        <mx:LineChart x="0" y="0" id="linechart1" height="222" width="800" dataProvider="{profits}">
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Month"/>
            </mx:horizontalAxis>
            <mx:series>
                <mx:LineSeries displayName="Series 1" yField="Profit"/>
            </mx:series>
            <mx:annotationElements>
                <mx:CartesianDataCanvas alpha=".25" id="canvas" includeInRanges="true"  />
            </mx:annotationElements>
        </mx:LineChart>
    </mx:Panel>
</mx:Application>

Answer 1

I have a rather strange issue which I just can't get my head around. Basically I have a function which looks like the below - This simply draws a box around half of the data canvas.
private function draw():void
                canvas.clear();
                canvas.beginFill(0x62dce1);
                var canvasWidth:Number = canvas.width;
                var canvasHeight:Number = canvas.height;
                var minPt:Array = canvas.localToData(new Point(0, 0));
                var maxPt:Array = canvas.localToData(new Point(canvasWidth/2,canvasHeight));
                canvas.drawRect(minPt[0]-1, maxPt[1], maxPt[0]-1, minPt[1]);
                canvas.endFill();
This works perfectly well when using data that is loaded locally - i.e. data that is stored within an array collection with the MXML file. However, the momeny I use a HTTP:Service to pull in the data, once the button is click to draw the rectangle - NOTHING appears on the data canvas.
Does anyone know why this might be happening? Im assuming its something to do with the data canvas updating as soon as the chart is loaded and isn't waiting for the asyncronose HTTP service?
Any ideas would be greatly appreciated.
Thanks
Full Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="getGoogleData.send()">
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.collections.ArrayCollection;
            import mx.containers.HBox;
              import mx.charts.LinearAxis;
              import mx.containers.Box;
            import mx.collections.ArrayCollection;
               import mx.charts.series.items.ColumnSeriesItem;
            import mx.charts.ChartItem;
            import mx.charts.chartClasses.CartesianCanvasValue;
            import mx.charts.chartClasses.CartesianTransform;
             [Bindable]
             public var profits:ArrayCollection = new ArrayCollection([
        {Month:1, Profit:1300},
        {Month:2, Profit:750},
        {Month:3, Profit:1100},
        {Month:4, Profit:1000},
        {Month:5, Profit:980},
        {Month:6, Profit:1500},
        {Month:7, Profit:2060},
        {Month:8, Profit:1700},
        {Month:9, Profit:1690},
        {Month:10, Profit:2200},
        {Month:11, Profit:2550},
        {Month:12, Profit:3000}
            [Bindable]
            private var summaryGoogleData:ArrayCollection = new ArrayCollection;
            [Bindable]
            public var folderLocation:String = "http://79.99.65.19/VISA/PHP";
            import mx.rpc.events.ResultEvent;
            private function recieveGoogleData(evt:ResultEvent):void
                var tmpArray:Object = new Object;
                tmpArray = evt.result.data.graphdata;
                for each (var o : Object in tmpArray)
                    if (o.pagepath == "/bbva")
                        summaryGoogleData.addItem(o);
                test.dataProvider = summaryGoogleData;
            public var drawnOnChart:Boolean = false;
            private function drawOnChart(evt:Event):void
                if (drawnOnChart == false)
                    var p:Point = canvas.dataToLocal(10,600);
                    if (isNaN(p.x) || isNaN(p.y))
                        trace ("Nan");
                    else
                        trace ("Not NaN");
                        var x:Number = p.x;
                          var y:Number = p.y;
                          //drawSquareBox();       
            //updateComplete="drawOnChart(event)"
             private function draw():void
                canvas.clear();
                canvas.beginFill(0x62dce1);
                var canvasWidth:Number = canvas.width;
                var canvasHeight:Number = canvas.height;
                var minPt:Array = canvas.localToData(new Point(0, 0));
                var maxPt:Array = canvas.localToData(new Point(canvasWidth/2,canvasHeight));
                canvas.drawRect(minPt[0]-1, maxPt[1], maxPt[0]-1, minPt[1]);
                canvas.endFill();
        ]]>
    </mx:Script>
    <!-- GET THE SUMMARY OF VISITS (GOOGLE) -->
    <mx:HTTPService id="getGoogleData" showBusyCursor="true" result="recieveGoogleData(event)" fault="getGoogleData.send()" method="GET" url="{folderLocation}/get_summaryGoogleData.php" useProxy="false"/>
    <mx:Legend dataProvider="{linechart1}" x="755" y="10"/>
    <mx:DataGrid x="357" y="315" id="test">
    </mx:DataGrid>
    <mx:Button x="52" y="323" label="Button" click="draw()"/>
    <mx:Panel x="10" y="10" width="830" height="265" layout="absolute">
        <mx:LineChart x="0" y="0" id="linechart1" height="222" width="800" dataProvider="{profits}">
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Month"/>
            </mx:horizontalAxis>
            <mx:series>
                <mx:LineSeries displayName="Series 1" yField="Profit"/>
            </mx:series>
            <mx:annotationElements>
                <mx:CartesianDataCanvas alpha=".25" id="canvas" includeInRanges="true"  />
            </mx:annotationElements>
        </mx:LineChart>
    </mx:Panel>
</mx:Application>