Drawing

• Overview
• Sample Application
• Initiating Drawing
• Canceling Drawing
• Forbidding Drawing
• Forbidding Editing
• Handling Events
• Managing Annotations
  • Removing
• Selecting / Deselecting
  • Saving

Overview

This article describes methods that allow users to draw annotations on AnyStock plots.

Please note: when working with annotations, you can use methods of either the plot or the chart (see the PlotController and ChartController sections in AnyChart API). Of course, if there is only one plot on your chart, there is no significant difference between these two options.

Sample Application

To make the integration process easier, there is a sample web application with open source, demonstrating how AnyStock Stock Drawing Tools can be implemented.

You can see the application live at https://www.anychart.com/solutions/drawing-tools/.

To download its source (or simply fork it), visit this page: GitHub: AnyStock - Drawing Tools and Annotations Demo.

Initiating Drawing

To initiate drawing, call the PlotController startDrawing() method or ChartController startDrawing() method and specify the annotation type by choosing one of the Annotation Types enums. Use object notation to configure annotations:

plot.annotations().startDrawing("triangle");
plot.annotations().startDrawing({type: "triangle", color: "red"});

Here is a basic sample, demonstrating how the Drawing feature is used. Users can draw annotations of all types or remove all annotations from the plot (to learn more about removing annotations, see the Removing subsection below):

Canceling Drawing

To cancel the drawing process, call the PlotController cancelDrawing() method or ChartController cancelDrawing() method:

plot.annotations().cancelDrawing()

For example, you have to set 3 points to draw Andrews' Pitchfork and Triangle annotations and may want to cancel drawing after setting 2 points. In the following sample, when you set 2 points and click on any of the buttons that initiate drawing, the drawing process is canceled, and the points disappear:

Forbidding Drawing

To forbid drawing annotations on some of the plots, use the enabled() method:

// create a stock chart
chart = anychart.stock();

// create two plots
chart.plot(0).ohlc(mapping);
chart.plot(1).line(mapping);

// allow drawing on the first plot
chart.plot(0).annotations().enabled(true);

// forbid drawing on the second plot
chart.plot(1).annotations().enabled(false);

// start drawing the annotation.
chart.annotations().startDrawing("triangle");

In this sample, annotations can be drawn only on the first (OHLC) plot:

Forbidding Editing

To forbid or allow editing an annotation, use the allowEdit() method. You can find more information in this article: General Settings

Handling Events

When working with annotations, the following events can be handled:

Please note that you should attach listeners to the chart object.

In the sample below, a listener is used to change the visual settings of annotations and the chart title when annotations are selected:

// create an event listener for the annotationSelect event
chart.listen("annotationSelect", function(e){
    var selectedAnnotation = e.annotation;
    // change the annotation stroke
    selectedAnnotation.selectStroke("#FF0000", 3, "5 2", "round");
    // change the chart title
    chart.title("The " + selectedAnnotation.getType() + " annotation is selected.");
});

Managing Annotations

There are several methods that allow you to manage annotations:

• getAnnotationAt()
• getSelectedAnnotation()
• getAnnotationsCount()
• removeAnnotation()
• removeAnnotationAt()
• removeAllAnnotations()
• select()
• unselect()

The getAnnotationAt(), getSelectedAnnotation(), and getAnnotationsCount() methods are used get an annotation with a certain index, a selected annotation, or the total number of annotations. The rest of the methods, combined with these 3, allow removing and selecting / deselecting annotations.

Removing

The removeAnnotation() and removeAnnotationAt() methods are used to remove a single annotation, and removeAllAnnotations() removes all annotations.

In the following sample, there are buttons allowing to remove all annotations, the last drawn annotation, and a selected one:

// remove all annotations
plot.annotations().removeAllAnnotations();

// get the number of annotations
var annotationsCount = plot.annotations().getAnnotationsCount();

// remove the last annotation
plot.annotations().removeAnnotationAt(annotationsCount - 1);

// get the selected annotation
var selectedAnnotation = plot.annotations().getSelectedAnnotation(); 

// remove the selected annotation
plot.annotations().removeAnnotation(selectedAnnotation);

Selecting / Deselecting

To select or deselect an annotation, use the select() and unselect() methods:

// get the first annotation
var firstAnnotation = plot.annotations().getAnnotationAt(0);

// select the first annotation
plot.annotations().select(firstAnnotation);

// deselect a selected annotation
plot.annotations().unselect();

Saving

There are a lot of ways to save annotations to a server or to load them. Below you can find a basic sample that shows how to do it with special events and methods AnyChart provides.

• onDocumentReady() - this method is called when the document is ready. The external content might not been loaded for this moment, though.
• annotationDrawingFinish - this event can be used to track newly created (or changed) annotations and sending the list of annotations (or the new one) to a server. See information about annotation events in the Handling events section.

The following methods are of a great help:

• the toJson() method is used for deserialization the list of annotations,
• the fromJson() method is used for serialization the list of annotations.

In the following code sample, custom functions sendAnnotationsToServer() and getAnnotationsFromServer() used, which act like placeholders for functions that would send and receive the annotations from a server.

// save all annotations
sendAnnotationsToServer(chart.plot().annotations().toJson(true));

// load all saved annotations
var annotations = getAnnotationsFromServer();
chart.plot().annotations().fromJson(annotations);