Annotations > Image

Let us take a look at the Image Annotation here. The Image Annotation allows you to display an image on the chart.

 
 
The XML to create the above is:
 
<chart>
   ...
   <annotations>
      <annotationGroup id='Grp1' >
         <annotation type='image' x='200' y='200' URL='logo.gif' />
      </annotationGroup>
   </annotations>
   ...
</chart>
 
As is very clear from the code above, we need to set the annotation type to image, specify the x and y co-ordinates where we want the image to be placed and finally provide the URL where the image is located. This URL has to lie in the same domain as the Flash movie.
 
Scaling Images
You can x-scale and y-scale images using the xScale and yScale attributes. Setting xScale='50' yScale='200' would reduce the image to half horizontally and double it vertically.
 
 
The various attributes using which the image annotation can be customized are:
 
Attribute Name Type / Range Description
type Rectangle, Circle, Polygon, Line, Arc, Text, Image Needs to be set to Rectangle to create a rectangle annotation type.
x Number The starting x co-ordinate for the annotation. This x co-ordinate is relative to the x co-ordinate of the annotation group in which the annotation is placed. For example, if you have set the x co-ordinate of the annotation group as 50 and the x co-ordinate of the annotation is 100, then th effective x co-ordinate of the annotation would be 150 w.r.t to the starting position of the chart.
y Number The starting y co-ordinate for the annotation. This again is relative to the starting y co-ordinate of the annotation group in which the annotation is placed.
url URL to image (.gif, ,jpeg, .swf, .png) The URL of the image to be used as annotation. It should be in the same domain as the chart.
xScale Number This attribute is used to scale the width of the image in percentage. For example, if we set this attribute as 50 then the image width will be halved whereas 200 will make its width to double the actual width.
yScale Number Similar to the xScale attribute, it is used to scale the height of the image in percentage.
 
Application
 
 
The XML for the above is:

<chart ...>
   ...
   <annotations origW='400' origH='200'>
      <annotationGroup id='Grp1' showBelow='1' autoScale='1'>
         <annotation type='rectangle' x='0' y='0' toX='400' toY='200' radius='10' fillColor='333333, 453269' fillAngle='180' />
         <annotation type='rectangle' x='5' y='5' toX='395' toY='195' radius='10' color='000000' fillAlpha='0' showBorder='1' borderColor='FFFFFF' borderThickness='3'/>
      </annotationGroup>
      <annotationGroup id='Grp2' showBelow='0' autoScale='0'>
         <annotation type='image' x='110' y='7' URL='logo.gif' />
      </annotationGroup>
   </annotations>
</chart>