Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Annotations let you create your own custom objects within charts. One can create various shapes like polygons, rectangles, circles, arcs, etc., render annotation text at required positions, load external images and much more.

Events

annotationClick

Fired when an annotation is clicked

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

annotationId

: string

[+]

Specifies the Id of the annotation (if provided during annotation creation).

annotationOptions

: object

[+]

contains all the options that are set on the annotations.

groupId

: string

[+]

Specifies the Id of the annotation group (if provided during annotation creation) within which the annotation exists.

groupOptions

: object

[+]

contains all the options that are set on the annotation group.

annotationRollOver

Fired when the pointer moves over an annotation

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

annotationId

: string

[+]

Specifies the Id of the annotation (if provided during annotation creation).

annotationOptions

: object

[+]

contains all the options that are set on the annotations.

groupId

: string

[+]

Specifies the Id of the annotation group (if provided during annotation creation) within which the annotation exists.

groupOptions

: object

[+]

contains all the options that are set on the annotation group.

annotationRollOut

Fired when the pointer moves out of an annotation

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

annotationId

: string

[+]

Specifies the Id of the annotation (if provided during annotation creation).

annotationOptions

: object

[+]

contains all the options that are set on the annotations.

groupId

: string

[+]

Specifies the Id of the annotation group (if provided during annotation creation) within which the annotation exists.

groupOptions

: object

[+]

contains all the options that are set on the annotation group.

Methods

addGroup

Adds a group in the annotations that acts as a container for the shapes that have to be drawn within the group. The shapes drawn within a group generally share some properties or characteristics.

Parameters

options

: object

[+]

The options that pertain to the new group element to be added.

addItem

Adds an item to either a specific group or creates a new group and adds the item to it.

Parameters

groupId

: string

[+]

If the item has to be added to a particular group then, the id of that group is required.

options

: object

[+]

The options that have to used to create the item.

drawImmediate

: boolean

[+]

Specifies if the annotation item created has to be drawn immediately or not. Default value is false and does not draw the item immediately.

clear

Clears all groups and the contained shapes that belong to the annotation object.

hide

Hides the item (group or shape) with the given id.

Parameters

id

: string

show

Shows the item (group or shape) with the given id.

Parameters

id

: string

update

Method to dynamically update a shape or group with an id.

Parameters

id

: string

[+]

The id of the annotation shape or group.

key

: string or object

[+]

The option that is to be updated.

value

: string

[+]

The new value to be assigned to the option.

destroy

Destros a particular item (group or shape) with the given id.

Parameters

id

: string

Properties

this.groups static member

The list of all the groups that have been rendered using the given instance of the annotations class.

  • Events
  • annotationClick
  • annotationRollOver
  • annotationRollOut
  • Methods
  • addGroup
  • addItem
  • clear
  • hide
  • show
  • update
  • destroy
  • Properties
  • this.groups static
Top