0 Replies Latest reply on Mar 4, 2010 7:58 AM by MrFork

    Using Chart Annotation Element

    MrFork

      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>