Controlling Annotations Dynamically

Prerequisites:

FusionCharts Suite XT lets you control annotations dynamically using the FusionCharts API. These methods let you create, update, set the visibility of, and delete annotation groups and items at run-time.

Dynamic control of annotations is specifically helpful when you want to augment your charts with context sensitive information. For instance, you can show, hide, or update the color for an annotation group or item using the respective methods.

This article describes the API methods that let you create, manipulate, and delete annotations dynamically.

A spline chart that demonstrates how annotations can be controlled dynamically is shown below:

FusionCharts will load here..

The API methods to control annotations dynamically are:

Method Name	Method Description	Parameter Description
`addGroup(options)`	Adds a group that can hold multiple annotation items within it.	`options` defines the characteristics of the group to be added. For instance, `id` defines the unique identification string for the group.
`addItem(groupId, options, drawImmediate)`	Adds an annotation item to the specified group. If the groupId is not specified, a new group is created and the annotation item is added to it.	`groupId` lets you specify the id of the group that to which the annotation item will be added. `options` defines the characteristics of the annotation item to be added `drawImmediate` is a boolean value that specifies if the annotation item has to be drawn immediately or not. The default value is `false` that does not draw the item immediately.
`show(id)`	Shows the specified annotation group or item on the chart.	`id` parameter lets you specify the identification string of the group or item to be shown.
`hide(id)`	Hides the specified annotation group or item from the chart.	`id` parameter lets you specify the identification string of the group to be hidden.
`update(id,{key:value})`	Updates the properties of the specified annotation group or an individual item in the specified group.	`id` lets you specify the identification string of the annotation group or item to be updated. `key` lets you specify the property of the annotation group or item that has to be updated. `value` lets you specify the new value for the property of the annotation group or item to be updated.
`destroy(id)`	Removes the group or an annotation item based on the id specified.	`id` lets you specify the identification string of the group or annotation item to be removed.
`clear()`	Removes all the annotation groups and items within the groups.

The complete data structure for the spline chart is given below:

JSON
XML

{ "chart": { "caption": "Total footfall in Bakersfield Central", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "No. of Visitors", "showValues": "1", "theme": "fint" }, "annotations": { "origw": "400", "origh": "300", "autoscale": "1" }, "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" } ] }

{
    "chart": {
        "caption": "Total footfall in Bakersfield Central",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "No. of Visitors",
        "showValues": "1",
        "theme": "fint"
    },
    "annotations": {
        "origw": "400",
        "origh": "300",
        "autoscale": "1"
    },
    "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"
        }
    ]
}