This article describes how annotations can be used in the following scenarios:
Adding a data callout label
Providing more information about the data plots
Customising Y Axis
Adding more context to the chart
Adding images for better visualization
Events triggering display of annotation items
Creating a collaborative dashboard
Adding a Data Callout Label
The above chart shows the usage of annotations to create a callout (using a rectangle, a polygon, and a text annotation, grouped together) above a column. The annotations are dynamically positioned using annotation macros. After the chart is rendered (when the renderComplete event is triggered), the quarter with the highest revenue is determined and the annotation group is positioned over the data plot representing that quarter.
The data structure for this chart is given below::
Providing More Information about Data Plots
The above chart compares the footfall at two stores, Bakersfield Central and Los Angeles Topanga.
When the mouse pointer is hovered over a data plot, it triggers the dataplotRollover event. Consequently, an annotation group (containing of a line, a label, and text annotation) that displays additional information about the data plot is shown. When the mouse pointer is hovered out of the data plot, it triggers the dataPlotRollOut event and the annotation group is hidden.
Macro sub-tokens are used to position the annotation group with respect to the axes and datasets. The hide() method is used to hide the group.
The data structure for this chart is given below:
Customizing the Y-axis
The above chart showcases annotations positioned dynamically, with respect to the y-axis, using macros. The annotations are used to mark three different ranges - low, moderate and high, with three different colors.
The data structure for this chart is given below:
Adding More Context to the Chart
The above gauge shows the customer satisfaction score with some significant data like, the state average and the national average, using annotation shapes and text elements.
The data structure for this chart is given below:
Annotation Images for Better visualization
In this chart, images of brands are shown instead of the conventional 2D column data plots. Using these annotations makes the chart more intuitive while also increasing its visual appeal. Imagine how easy it becomes for your audience to read data in a chart like this, especially if the data is for a large number of brands.
The data structure for this chart is given below:
Events Triggering Display of Annotation Items
The above chart shows how you can use events on annotation items. Hovering the mouse pointer on the Weekend zone that is represented by a green rectangle on the chart, triggers the events annotationRollOver and annotationRollOut, which show the total footfall on Saturday and Sunday.
The data structure for configuring events on annotation items is as follows:
Creating a Collaborative Dashboard
Click here to see a collaborative dashboard that is a complex and practical example of how annotations can be used to add more information to a chart.
Notice the callout that renders above the data plot for April. The callout is an annotation. When this callout is clicked, annotationClick event is triggered. This navigates the user to a view that shows the monthly sales analysis for April in the left pane and user comments on this analysis in the right pane. Every time a comment is added, the text annotation (showing the number of comments) alongside the callout is updated.
Annotations, thus, let you add more information to your charts, creatively.