Introduction

Annotations are graphical elements that can be created and positioned anywhere on a chart or a gauge. These elements can be configured in a number of ways and allow you to customise your chart in imaginative and useful ways. Using annotations you can

  1. Create shapes such as lines, circles, rectangles, polygons and paths anywhere on a chart or a gauge using very simple and intuitive JSON or XML.

  2. Customise the shape's cosmetics such as fill and border color, opacity, border thickness, etc.

  3. Load external images.

  4. Create labels or paragraphs of texts.

  5. Position the annotations anywhere on a chart or a gauge and even position them relative to other elements on a chart such as the legend, data-plots, gauge, etc.

  6. Create and control these annotations programmatically using JavaScript.

  7. Allow users to interact with annotations you've created using links and events.

FusionCharts should load here..

FusionCharts should load here..

These two charts have been customised using annotations. The first is a chart where we have placed icons depicting the store manager’s image under each x-axis label. The icons are actually image annotations positioned using macros. The second is an angular gauge, which uses annotations to add more context to the chart and is not possible otherwise.

Annotations are not supported on maps.

Let us now try out annotations in one of the charts. For this, we would pick up our first section that talks about getting started with your first gauge. We pick up the example gauge showing customer satisfaction score and modify the JSON data source to append the following subset of data.

"annotations": {
    "groups": [{
        "id": "transarc",
        "showBelow": "1",
        "items": [{
            "type": "arc",
            "radius": "200",
            "innerRadius": "165",
            "color": "#8CBB2C",
            "alpha": "90",
            "x": "200",
            "y": "235",
            "startAngle": "0",
            "endAngle": "45"
        }]
    }]
}

This addition to the original JSON data of the chart adds an extra arc around angular gauge, highlighting the green section of the gauge. The modified gauge and the final HTML after the modification to the data source would look as shown below:

FusionCharts should load here..

<html>
<head>
    <title>My first gauge using FusionWidgets XT</title>
    <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
    <script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
    <script type="text/javascript">
    FusionCharts.ready(function() {
        var csatGauge = new FusionCharts({
            "type": "angulargauge",
            "renderAt": "chart-container",
            "width": "400",
            "height": "250",
            "dataFormat": "json",
            "dataSource": {
                "chart": {
                    "caption": "Customer Satisfaction Score",
                    "subcaption": "Last week",
                    "lowerLimit": "0",
                    "upperLimit": "100",
                    "theme": "fint"
                },
                "colorRange": {
                    "color": [{
                        "minValue": "0",
                        "maxValue": "50",
                        "code": "#e44a00"
                    }, {
                        "minValue": "50",
                        "maxValue": "75",
                        "code": "#f8bd19"
                    }, {
                        "minValue": "75",
                        "maxValue": "100",
                        "code": "#6baa01"
                    }]
                },
                "dials": {
                    "dial": [{
                        "value": "67"
                    }]
                },
                "annotations": {
                    "groups": [{
                        "showBelow": "1",
                        "id": "transarc",
                        "items": [{
                            "type": "arc",
                            "radius": "200",
                            "innerRadius": "165",
                            "color": "#8CBB2C",
                            "alpha": "90",
                            "x": "200",
                            "y": "235",
                            "startAngle": "0",
                            "endAngle": "45"
                        }]
                    }]
                }
            }
        });
        csatGauge.render();
    });
    </script>
</head>
<body>
    <div id="chart-container">An angular guage will load here!</div>
</body>
</html>

You can directly head over to the API reference - FusionCharts~annotations, annotation data attribute reference - Attribute Reference for Annotations or read our next article that discusses in details on how to create annotations.

Creating Annotations on a Chart or Gauge