Grouping Annotations
Prerequisites
- Create a simple chart using FusionCharts Suite XT
- Introduction to Annotations
- Creating simple annotations
You can group a number of annotation items together as one item. This is useful when there are multiple annotations on a chart and you have to configure common properties for all of them.
Create Annotation Groups
To create an annotation group, all you have to do is create each annotation item as an object within the same groups → items
object array. When you group multiple annotations together, you can easily manipulate common functional and cosmetic properties, as well as position them, using the following attributes:
Specify a unique identification string for the annotation group, using the
id
attribute.Specify the x coordinate of the starting position of the group with respect to the leftmost position (taken as 0) of the chart, using the
x
attribute. Note that if you also configure it individually for the annotation item(s) within the group, then the value of thex
attribute for the item will be relative to the value of thex
attribute for the group.Specify the y coordinate of the starting position of the group with respect to the topmost position (taken as 0) of the chart, using the
y
attribute. Note that if you also configure it individually for the annotation item(s) within the group, then the value of they
attribute for the item will be relative to the value of they
attribute for the group.Set the value of the
autoScale
attribute to1
, to automatically scale the annotation group, if you resize a chart.Set the value of the
scaleText
attribute to1
, to automatically scale text annotations in the annotation group, if you resize a chart.Set the value of the
scaleImages
attribute to1
, to automatically scale image annotations in the annotation group, if you resize a chart.Set the value of the
constrainedScale
attribute to1
, to retain the aspect ratio (height:width) of annotations, even when they are scaled.Set the value of the
showBelow
attribute to1
, to prevent annotations in the group from overlapping the data plots. The annotations will then be shown below the data plots.Specify the original width of the chart (in which the annotation renders as intended), using the
origW
attribute. Note that this value is used as the reference width while automatically scaling annotations, if you resize a chart.Specify the original height of the chart (in which the annotation renders as intended), using the
origH
attribute. Note that this value is used as the reference width while automatically scaling annotations, if you resize a chart.Specify the value to be added to the x coordinate position value of the final annotation items on the x-axis, using the
xShift
attribute. Note that if you place an annotation at 100 pixels left and set the value ofxShift
to 50, then the effective value of the x coordinate for the annotation will add up to 150 pixels. Also, whenever you apply scaling, the value of this attribute is included within the scale factor.Specify the value to be added to the y coordinate position value of the final annotation items on the y-axis, using the
yShift
attribute. Note that if you place an annotation at 100 pixels from the top and set the value ofyShift
to 50, then the effective value of the y coordinate for the annotation will add up to 150 pixels. Also, whenever you apply scaling, the value of this attribute is included within the scale factor.Specify the value to be added to all annotation groups along the x coordinate, using the
grpXShift
attribute. The difference betweenxShift
and this attribute is that, during scaling,xShift
is included within the scale factor whereasgrpXShift
is excluded.Specify the value to be added to all annotation groups along the y coordinate, using the
grpYShift
attribute. The difference betweenyShift
and this attribute is that, during scaling,yShift
is included within the scale factor whereasgrpYShift
is excluded.Specify the transparency (between
0
for transparent and100
for opaque) for the group of annotations, using thealpha
attribute.Set the value of the
visible
attribute of a group of annotations to0
, to hide the group.Set the value of the
showShadow
attribute to1
, to show a shadow effect for the annotation group.Specify the hex color code for the annotation group, using the
color
attribute.Specify the font family for all the text annotation(s) in the annotation group, using the
font
attribute.Specify the font size for all the text annotation(s) in the annotation group, using the
fontSize
attribute.Specify the horizontal alignment for all text annotation(s), using the
textAlign
attribute.Specify the vertical alignment for all text annotation(s), using the
textVAlign
attribute.Specify whether text annotation(s) are to be rotated, using the
rotateText
attribute. Note that this attribute takes0
(default),1
,left
, andright
, as values.Set the value of the
wrapText
attribute to1
, to automatically wrap words that are too long to fit in a line, to the next one.Specify the URL to which you will be redirected if you click the annotation group, using the
link
attribute.Specify the tooltip for the annotation group using the
toolText
attribute.Specify a list of hex color codes, if the group has to be rendered with a gradient effect, using the
fillColor
attribute.Specify the fill color ratio for an annotation group, if the group has to be rendered with a gradient effect, using the
fillRatio
attribute. Note that this attribute is useful only if you specify multiple colors using thefillColor
attribute. It is a comma-separated list of numbers that lie between 0 and 100. The number of values you provide for this attribute should be the same as that for thefillColor
attribute. In case the number of ratio values is less than the number of colors you provide, the last of the comma-separated values is repeated for the remaining colors. The summation of these values should not exceed 100.
These attributes belong to the annotations → groups object array.
Refer to the code below:
{
"annotations": {
"origw": "400",
"origh": "300",
"autoscale": "1",
"groups": [{
"items": [{
"id": "dyn-labelBG",
"type": "rectangle",
"radius": "3",
"x": "$canvasEndX - 100",
"y": "$canvasStartY",
"tox": "$canvasEndX",
"toy": "$canvasStartY + 30",
"color": "#0075c2",
"alpha": "70"
}, {
"id": "dyn-label",
"type": "text",
"text": "Total: 119,507",
"fillcolor": "#ffffff",
"fontsize": "10",
"x": "$canvasEndX - 50",
"y": "$canvasStartY + 15"
}]
}]
}
}
The chart looks like as shown below:
Click here to edit the above chart.
In the spline chart given above, you can see the total number of footfalls for each week created as an annotation group. A rectangle and a text annotation are grouped together to show the total number of footfalls. Note that if you have to change the position of the text and rectangle annotation from the spline chart above, you would have to first reposition the rectangle annotation and then re-position the text annotation. Instead, if you manipulate them as a group, you only have to change the group's position.
When an annotation group is rendered on a chart, annotation items are layered in the order they are defined. In the above chart, you can position the text annotation above the rectangle annotation, by defining the rectangle annotation before the text annotation.
Manipulate Annotation Groups
In the example given below, you can see how manipulating annotations as a group is easier than manipulating them as individual items.
Refer to the code below:
{
"chart": {
"caption": "Bakersfield Central - Total footfalls",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"showTooltip": "0",
"formatNumberScale": "0",
"theme": "fusion"
},
"annotations": {
"origw": "400",
"origh": "300",
"autoscale": "1",
"groups": [{
"id": "total-footfall",
"items": [{
"id": "dyn-labelBG",
"type": "rectangle",
"radius": "3",
"x": "$canvasEndX - 100",
"y": "$canvasStartY",
"tox": "$canvasEndX",
"toy": "$canvasStartY + 30",
"color": "#0075c2",
"alpha": "70"
}, {
"id": "dyn-label",
"type": "text",
"text": "Total: 119,507",
"fillcolor": "#ffffff",
"fontsize": "10",
"x": "$canvasEndX - 50",
"y": "$canvasStartY + 15"
}]
}]
},
"data": [{
"label": "Mon",
"value": "15123"
}, {
"label": "Tue",
"value": "14233"
}, {
"label": "Wed",
"value": "25507"
}, {
"label": "Thu",
"value": "9110"
}, {
"label": "Fri",
"value": "15529"
}, {
"label": "Sat",
"value": "20803"
}, {
"label": "Sun",
"value": "19202"
}]
}
The chart will look as shown below:
Click here to edit the above chart.
In the above spline chart, you can control whether the total number of footfalls will be shown or hidden, by manipulating attributes as a group.