Working with annotations

• Overview
• Adding annotation on client side
• Getting config of added annotation
• Getting a list of all added annotations
• Adding annotation programmatically
• Altering and update of existing annotation
• Removing annotations
• Event handling
• Using context menu

Overview

AnyChart Stock doesn't have a full-featured GUI for adding, editing, removing and other operations with annotations, but, at the same time, provides a large API, that can be used to create an interface you need for your application.

This article describes how to work with annotations in HTML using methods, properties or events from AnyChart Stock: JavaScript Library.

Before you start reading this article we recommend to study the basics about annotations in Drawing Tools and Annotations article and play around with this online demo: Online Demos: Drawing Tools and Annotations.

Adding annotation on client side

As we have already said in overview, AnyChart Stock doesn't have any GUI for adding annotations, because interfaces vary greatly from application to application we have decided to give developer an ability to control the process of adding annotations and give one an ability to implement whatever is needed.

To add annotation into a chart you need to initiate a special mode, in which user can add an annotation in interactive mode. To initiate this mode you need to launch startDrawingAnnotation() method, which you can bind to some button or menu.

Sample code below shows how to launch adding Line annotation mode:

As you can see, you should always specify what type of annotation is added and also you can provide a second parameter with settings to be applied to the annotation added. Full list of annotations and ways to provide settings can be found at AnyChart Stock JavaScript API: startDrawingAnnotation() method.

Live sample below demonstrates this method:

Getting config of added annotation

If you want to obtain configuration of any annotation in the chart you can use two special methods:

• getAnnotationAsJSON() - get config in JSON format.
• getAnnotationAsXML() - get config in XML format.

Live sample below shows how to obtain the config of annotation:

Getting a list of all added annotations

If you want to obtain a list of all annotations in the chart you can use two special methods:

• getAnnotationListAsJSON() - get list of annotations as JSON array.
• getAnnotationListAsXML() - get list of annotations in XML format.

Live sample below shows how to obtain the list of annotations:

Adding annotation programmatically

If you want to add annotation to the chart programmatically you can use addAnnotation() method, which accepts annotation config both in XML or JSON formats, like that:

or like that:

Note: You always have to specify id of the chart to which annotation should be added; you can omit id of annotation: it will be generated automatically in such case; you can invoke addAnnotation() only after onChartDraw is fired.

Live sample below shows how to add annotations programmatically:

Altering and update of existing annotation

If you want to alter an existing annotation programmatically you can use updateAnnotation() method, which accepts annotation config both in XML or JSON formats, like that:

updateAnnotation method updates annotation by the given id, which should be somehow obtained. In the sample above getSelectedAnnotationId() is used for that.

Live sample below shows how to update annotations using updateAnnotation method:

Removing annotations

To remove annotation from a chart you can use the following methods and mechanism:

• removeAnnotation() - remove any annotation by its id. You can call it from context menu as it is described at Using context menu.
• removeAllAnnotations() - remove all annotations from the chart. Can be also called from context menu.
• User can delete selected annotation using Delete key on keyboard, onAnnotationRemove happens when user does so. Note: If you use Mac system you have to use Fn + Backspace key combination in order to remove selected annotation.

Live sample which shows how to remove annotations:

Event handling

Handling events with annotations is the same as handling all other AnyStock events. If you are new to AnyStock, please study Working with charts in HTML: Events Handling article, which described events handling basics.

The following events can be used, when you work with annotations:

• onAnnotationDrawingStart - is dispatched when startDrawingAnnotation() method is invoked, this event receives generated id of annotation.
• onAnnotationDrawingFinish - is dispatched when annotation is added and all required points are positioned by user.
• onAnnotationSelect - is dispatched when annotation is selected.
• onAnnotationDeselect - is dispatched when annotation looses focus. This event happens when user selects another annotation or clicks another part of the chart.
• onAnnotationRemove - is dispatched when user deletes annotation using Delete key, this event receives an id of deleted annotation.
• onAnnotationEditingStart - is dispatched when the user has started to edit an annotation.
• onAnnotationEditingFinish - is dispatched when the user has finished to edit an annotation.

Live sample below shows how to handle annotation events:

Using context menu

AnyChart Stock gives developer an ability to add custom items into Flash-player context menu, you can read about this at Working with charts in HTML: Context Menu.

Context menu can be used to work with annotations without creating any GUI at all, you just need to add several commands into menu. Live sample below shows how this can be done: