Another useful features available from KGJS is the angle marker, used to draw angles on graphs.

Here is a basic way to draw an angle at the origin:

layout:
OneGraph:
graph:
xAxis: {min: 0, max: 5}
yAxis: {min: 0, max: 5}
objects:
- AngleMarker:
measure: 45

As you can see, the `measure`

of the angle marker is simply the measurement of the angle in degrees, starting from the positive x-axis.

You can also move an angle marker to a different coordinate, for example to show the angle between the two segments below:

layout:
OneGraph:
graph:
objects:
- Segment:
a: [2,2]
b: [8,8]
- Segment:
a: [2,2]
b: [8,2]
- AngleMarker:
measure: 45
coordinates: [2,2]

You can also create angles using three points:

layout:
OneGraph:
graph:
objects:
- Angle:
pointA:
coordinates: [8, 5]
label: {text: A, position: tl}
pointB:
coordinates: [2, 5]
label: {text: B, position: l}
pointC:
coordinates: [8, 8]
label: {text: C}
showSegments: true

Notice a couple of things above:

`showSegments: true`

shows the segments in between the points making up the angle between them.- Remember that the position of the labels on the points can be specified. Check out the
**Point**documentation for more information.

Angles can be used in fun ways with draggable features. Letâ€™s take a look at a long example below:

params:
- {name: ax, value: 8, round: 0.01}
- {name: ay, value: 5, round: 0.01}
- {name: bx, value: 2, round: 0.01}
- {name: by, value: 5, round: 0.01}
- {name: cx, value: 8, round: 0.01}
- {name: cy, value: 8, round: 0.01}
layout:
OneGraph:
graph:
objects:
- Angle:
pointA:
coordinates: [params.ax, params.ay]
draggable: true
label: {text: A, position: tl}
pointB:
coordinates: [params.bx, params.by]
draggable: true
label: {text: B, position: l}
pointC:
coordinates: [params.cx, params.cy]
draggable: true
label: {text: C}
showSegments: true

Here, the `draggable: true`

attribute of the points allows them to be dragged along whatever parameters it uses. Here, both the x- and y-coordinates of each point are parameters, so the points can be dragged in the x- and y-direction. The angle will adjust as the points move around!

KGJS

KineticGraphs.org

Getting Started

Graphs & Layouts

Graph Objects

User Interactions

Economics