Drawing

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

Overview

This article describes methods that allows 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 our 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 for you, we created 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/products/anystock/overview/#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 Andrews' Pitchforks, Triangles, and Ellipses 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 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

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 to remove and select/unselect 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/Unselecting

To select or unselect 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);

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

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 on selection:

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