Prerequisites:

• Creating a simple chart using FusionCharts Suite XT

• Introduction to Annotations

• Creating Annotations

Annotation groups are a number of annotation items consolidated and configured together as one item. Grouping annotations is useful when there are multiple annotations on a chart and common properties have to be configured for all of them.

This article describes the usefulness of creating and manipulating multiple annotations as a group than as individual items.

Creating Annotation Groups

Assume that you have a spline chart that shows the footfalls for each day of a week. A rectangle and a text annotation are grouped together to show the total number of footfalls.

Take a look at the spline chart shown below:

The label that shows the total number of footfalls for the week is created as an annotation group.

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.

The code snippet to create the above text and rectangle annotation, as a group, is given 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"
        }]
    }]
}
…

When the annotation group is rendered on the chart, annotation items will be layered in the order they are defined. Because you want to position the text annotation above the rectangle annotation, define the rectangle annotation before the text annotation.

When multiple annotations are grouped together, manipulating common functional and cosmetic properties and positioning annotations becomes easy. For example, assume that you had to change the position of the text and rectangle annotation from the spline chart above, you would have to first re-position the rectangle annotation and then re-position the text annotation.

Instead, if you manipulate them as a group, you will only have to change the group’s position.

The attributes that you can use to manipulate annotation groups are given below:

These attributes belong to the annotations → groups object array.

Manipulating Annotation Groups

Next, take a look at an example that shows how manipulating annotations as a group is easier than manipulating them as individual items.

For the above spline chart, this example will let the user control whether the total number of footfalls will be shown or hidden.

The chart thus rendered looks like this:

Selecting the Show total footfall radio button will show the annotation group, selecting the Hide total footfall radio button will hide it.

The complete data structure for this chart is given below:

• JSON
• XML