FusionCharts for Flex > FusionWidgets and XML > Annotations > Polygon

 

Here we will discuss the polygon annotation and its properties. Here is how a polygon with 4 sides looks:

 
 
The XML to create the above polygon is:
 
<chart>
   ...
   <annotations>
      <annotationGroup id='Grp1' >
         <annotation type='polygon' sides='4' color='639ACE' x='200' y='200' radius='50'/>
      </annotationGroup>
   </annotations>
   ...
</chart>
 
As is evident from the code above, we need to set type as polygon, define the number of sides, color and the starting x and y co-ordinates in the <annotation> element to build our polygon.
 
Setting the number of sides
We can have polygons with any number of sides. A polygon with 6 sides would look as under:
 
 
Creating a gradient background
Now lets create a gradient background for the polygon. For that all we need to do is add more colors to the color attribute. Here we will set color='639ACE,FFFFFF' to get the following effect.
 
 
We can add as many colors as we want to the gradient. With color='639ACE,FFFFFF,FF5904', the polygon would look like:
 
 
Now lets change the gradient angle. The same can be done using fillAngle attribute. fillAngle='90' gives:
 
 
We can also set the ratio in which the constituent colors of the gradient would be divided using fillRatio attribute. Since we have 3 colors in the gradient here, we would need 3 values in fillRatio, which should sum upto 100. If you like orange, then fillRatio='20,10,70' would look good to you:
 
 
If you need to set the alpha (transparency) of the constituent colors of the gradient, then you have to use the fillAlpha attribute. Again this attribute should have as many values as there are colors in the gradient. For this gradient having 3 colors, one of the various combinations could be fillAlpha='50, 100, 50'.
 
 
Setting the start angle

When using polygons, many number of times we need to define the starting angle of the polygon. The same can be done using the startAngle attribute. Here we set startAngle='90' to get the following:

 
 
Customizing the polygon border
We can also add a border to the polygon by setting showBorder='1'. The polygon would look as under:
 
 
The border color and thickness can be customized using the borderColor and borderThickness attributes. Setting borderColor='333333' and borderThickness='4' would give the following output:
 
 
So the final XML for the above polygon would look as under:
<chart>
   ...
   <annotations>
      <annotationGroup id='Grp1' >
         <annotation type='polygon' sides='6' color='639ACE,FFFFFF' x='200' y='200' radius='50' startAngle='90' showBorder='1' borderColor='333333' borderThickness='4'/>
      </annotationGroup>
   </annotations>
   ...
</chart>
 
The various attributes for the polygon annotation using which it can be customized are:
 
Attribute Name Type / Range Description
type Rectangle, Circle, Polygon, Line, Arc, Text, Image Needs to be set to Polygon to create a polygon 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.
sides Number This attribute sets the number of sides that the required polygon would have. For example, to draw a triangle we need to set it to 3. Similarly, to draw a pentagon, you can set it as 5.
radius Number The radius of the polygon.
yRadius Number The y-radius of the polygon. Allows you to stretch or compress the annotation vertically.
color Hex Color (without the '#') A generic color for the annotation from which fill color and border color (whichever applies) will be derived automatically.
alpha Number(1-100) The alpha(transparency) of the annotation. By default, it would be set to 100.
startAngle Number (0-360) This attribute is used to set the starting angle for a circle, arc or polygon. For example, if you need to draw a semi-circle or a semi-circular arc, then set startAngle="0" and endAngle="180" for the respective annotation. Similarly for a polygon, if you need to draw a diamond shape, then set sides="4" and the startAngle="90".
 
Fill and Border properties
fillColor Hex code (separated by commas if there are multiple codes for a gradient) This attribute sets the background fill color for the annotation. You can set any hex color code as the value of this attribute. To specify a gradient as background color, separate the hex color codes of each color in the gradient using comma.
Example: FF5904,FFFFFF. Remember to remove # and any spaces in between. See the gradient specification page for more details.
fillAlpha Number (0-100) Sets the alpha (transparency) for the background fill. If you've opted for gradient background, you need to set a list of alpha(s) separated by comma. If the number of alpha values you have specified is lesser than the number of colors in the gradient, then the remaining colors would by default have an alpha of 100.
fillRatio Number (0-100) If you've opted for a gradient background fill, this attribute lets you set the ratio of each color constituent. Tha ratio for the colors should be separated by commas and the same must sum upto 100. For example, if you have 2 colors in your gradient, then fillRatio could be 80,20. There should be no spaces in between the values.
fillAngle Number (0-360) Angle of the background fill color, in case of a gradient. Evey color in the gradient can have a fill angle (which have to be separated by commas without any spaces in between). If the number of angle values is less than the number of colors in the gradient, then a default value of 0 is taken for the remaining colors. For example, fillAngle='90, 270' for a gradient having 2 colors.
fillPattern Radial/Linear The pattern of the gradient. It takes a default value of radial for circle.
showBorder Boolean (0/1) Whether to show a border for the annotation.
borderColor Hex code (without the '#') The border color of the annotation if showBorder='1'.
borderThickness Hex code (without the '#') The border thickness of the annotation if showBorder='1'.
borderAlpha Number (0-100) The border alpha(transparency) of the annotation if showBorder='1'.
 
« Circle | Line »