Published using Google Docs
Circle
Updated automatically every 5 minutes

Circle

Sample Display Properties:

<customObjects>

      <objectGroup xPos="100" yPos="100" >

                  <object type="circle" xPos="110" yPos="20" radius="50" fillColor="FF5904" />

      </objectGroup>

</customObjects>

As you can see in the XML above, you need to set the type attribute of the <object> element to circle to create a circle custom object. The various properties of the circle custom object can be customized using the following attributes of the <object> element:

You can define the properties of the circle like radius, start angle, end angle, background & border color etc.

General Properties

Attribute Name

Type

Range

Description

radius

Number

This attribute sets the radius of the circle.

startAngle

Number

0-360

This attribute is used to set the starting angle for the circle. For example, if you need to draw a semi-circle, then set startAngle="0" and endAngle="180". Default value: 0

endAngle

Number

0-360

This attribute is used to set the ending angle for the circle. Default value: 360

xPos

Number

This attribute sets the x-position of the circle with respect to the object group.

yPos

Number

This attribute sets the y-position of the circle with respect to the object group.

Background Properties

The circle custom shape can have either a solid background (one color fill) or it supports multi-color gradient fills. If you intend to specify just a single color for the background, you can simple use the attribute below:

Attribute Name

Type

Range

Description

fillColor

Color

Hex Color

This attribute sets the background color of the rectangle custom object. Default value: FF5904

fillAlpha

Number

0-100

This attribute would help you set the transparency of the solid fill.

Now, if you need gradient fill, you'll need to specify the following attributes:

Attribute Name

Type

Range

Description

fillAsGradient

Boolean

0/1

First of all, you need to set this attribute as 1. By default, this attribute is set to 0, indicating a solid fill.

fillColor

Color

Comma separated values

When using gradient fills, you'll need to list all your colors, which you intend to show in the gradient, separated by commas. For example, if you wanted to change our above rectangle from solid orange fill to a gradient orange fill (that ends in white), we'll use the following fillColor="FF5904,FFFFFF" where FFFFFF is the color code for white.

fillAlpha

Number

0-100

In this attribute, you need to define the alpha of each color that you're specifying in the gradient (fillColor). Like the colors, the alpha too needs to be separated by commas. Example: When this attribute is defined as fillAlpha="80,50" and is coupled with fillColor="FF5904,FFFFFF", the color FF5904 would be shown in 80% alpha while the color FFFFFF would be shown in 50% alpha.

Please note that when you use this attribute, you need to make sure that number of colors defined in fillColor is same as the number of alpha defined in fillAlpha. For example, if you are creating a gradient fill by specifying 2 colors, then you need to specify 2 alphas for this attribute as well, or else you may get unexpected results.

If you need 100% alpha for all the colors, it's best not to use this attribute at all.

fillRatio

Number

Comma separated values

This attribute sets the ratio of the space the colors would occupy in the gradient fill. Example: When this attribute is defined as fillRatio="80,20" and is coupled with fillColor="FF5904,FFFFFF", the color FF5904 would occupy 80% of the gradient fill while the color FFFFFF would get 20%. As in fillAlpha, there needs to be as many ratio values separated by commas as there are colors in fillColor. Also, the sum of all the ratio values should be 100. By default, FusionCharts splits all the colors in the list proportionally i.e. if you have 2 colors and don't define this attribute, then both the colors would have 50% fill ratio.

fillPattern

String

Radial or Linear

This attribute sets whether the gradient fill of the custom object would be radial or linear in nature. Default value: Linear

fillDegree

Number

0-360

This attribute is useful when the fill pattern is set as LINEAR and we want to get the gradient at an angle. Normally, if you fill a custom shape with gradient, you'll see that the gradient fill effect runs from left to right. If you wish to change that angle, you can specify the gradient angle (in degrees) in this attribute.

Border Properties  

Attribute Name

Type

Range

Description

borderColor

Color

Hex Code

This attribute sets the border color of the rectangle custom object. Default value: 000000

borderThickness

In Pixels

In Pixels

This attribute sets the border thickness of the rectangle custom object. Default value: 1

showBorder

Boolean

0/1

This attribute sets whether the border for the rectangle custom object would be displayed or not. Default value: 0

©2010 PlanetJ Corporation