1 Reply Latest reply on Dec 13, 2010 12:10 PM by chukcha14

    Prevent Image inside <mx:annotationElements> from "expanding" (Flex Charting)

    chukcha14

      Hi all,

       

      I added an image inside the annotationElements which is inside the BubbleChart. Like this:

       

      <mx:BubbleChart ...............>

      .......

      .......

      .......

      <mx:annotationElements>
                <mx:Image id="directionArrow" source="{arrowIconClass}" />
      </mx:annotationElements>

       

      </BubbleChart>

       

      When I run the application the Image was expanded or "zoomed in" and covered most of the chart. (The image's original dimentions where very small

      20x20pix)

      All I'm trying to do is to place a small arrow image on top of the chart and place it in certain coordinates.

       

      Why does the Image gets "zoomed in" by default and how can I prevent it from zooming in? How can I control where the image is going to be placed at.

       

      Thanks in advance,

      David

        • 1. Re: Prevent Image inside <mx:annotationElements> from "expanding" (Flex Charting)
          chukcha14 Level 1

          Ok looks like I figured it out by myself.

           

          The thing is you cannot add an Image tag directly inside the annotationElements. Instead, you have to add a tag called  CartesianDataCanvas and dinamically attach stuff to it at runtime. Like so:

           

          [Embed (source="/images/arrow.png")]
          public var arrowIcon:Class;
          private var arrowImage:Image;

           

          private function addArrowImageToCanvas(left:String, top:String):void {
              arrowCanvas.removeAllChildren();
              var imgObj:BitmapAsset = new arrowIcon() as BitmapAsset;
             
             
              if(arrowImage == null) {
                  arrowImage = new Image();
              }
              else {
                  arrowImage.unloadAndStop();
              }
              arrowImage.source = imgObj;
             
              if(model.isIncreasing) {
                  //rotate image
              }

               //left and top are the coordinates taken from the dataProvider. They are NOT the actual x,y screen coordinates on the Chart.

               // you have to figure out where you want to place the image and then use the points in the dataProvider to actually place it there.

           

               arrowCanvas.addDataChild(arrowImage, left, top);
                 
          }

           

          .

          .

          <mx:BubbleChart dataProvider="{[]}" updateComplete="addArrowImageToCanvas()" >

          .

          .

          .

          .

           

          <mx:annotationElements>
                   <mx:CartesianDataCanvas id="arrowCanvas" />
          </mx:annotationElements>

          <mx:Bubblechart>

          So, as you can see the first step is to figure out were you want to place your image, then use the data in the  dataProvider to actually place the image in the right spot. The actual Screen x,y coordinates are not applicable here. That is what threw me off a number of times.Once the image is attached to this canvas class it is rendered normaly and it is not "expanded or zoomed in".

           

          Google CartesianDataCanvas for more info.

           

          David Simonov