FusionCharts for Flex > FusionWidgets and XML > 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 image annotation is as follows:

<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 chart is as follows: