You are viewing documentation for an older version. For current documentation - click here.
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/JSON to create the above is:
  
<chart>
         ...
         <annotations>
            <annotationGroup id='Grp1' >
               <annotation type='image' x='125' y='5' URL='logo.gif' />
            </annotationGroup>
         </annotations>
         ...
</chart>
{
  "chart": {},
  ...
  "annotations": {
    "groups": [
      {
        "id": "Grp1",
        "items": [
          {
            "type": "image",
            "x": "125",
            "y": "5",
            "url": "logo.gif"
          }
        ]
      }
    ]
    ...
  }
}

See it live!
 
As it 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 URL of the chart.
 
Scaling Images
 
You can x-scale and y-scale images using the xScale and yScale attributes. Setting xScale='50' yScale='200' will reduce the image to half horizontally and double it vertically.
 


See it live!
 
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 the effective x co-ordinate of the annotation will 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
 


See it live!
 
The XML/JSON 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='125' y='5' URL='logo.gif' />
      </annotationGroup>
   </annotations>
</chart>
{
  "chart": {...},
  ...
  "annotations": {
    "origw": "400",
    "origh": "200",
    "groups": [
      {
        "id": "Grp1",
        "showbelow": "1",
        "autoscale": "1",
        "items": [
          {
            "type": "rectangle",
            "x": "0",
            "y": "0",
            "tox": "400",
            "toy": "200",
            "radius": "10",
            "fillcolor": "333333, 453269",
            "fillangle": "180"
          },
          {
            "type": "rectangle",
            "x": "5",
            "y": "5",
            "tox": "395",
            "toy": "195",
            "radius": "10",
            "color": "000000",
            "fillalpha": "0",
            "showborder": "1",
            "bordercolor": "FFFFFF",
            "borderthickness": "3"
          }
        ]
      },
      {
        "id": "Grp2",
        "showbelow": "0",
        "autoscale": "0",
        "items": [
          {
            "type": "image",
            "x": "85",
            "y": "7",
            "url": "logo.png"
          }
        ]
      }
    ]
  }
}