# JSXGraph Reference

## JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

## Elements

## Classes

- _global_
- Angle
- Arc
- Arrow
- Arrowparallel
- Axis
- Bisector
- Bisectorlines
- Button
- Cardinalspline
- Checkbox
- Circle
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Conic
- Curve
- Derivative
- Ellipse
- Functiongraph
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Circle
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Dump
- JXG.EventEmitter
- JXG.GeometryElement
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Line
- JXG.Math
- JXG.Math.Geometry
- JXG.Math.Numerics
- JXG.Math.Poly
- JXG.Math.Poly.Monomial
- JXG.Math.Poly.Polynomial
- JXG.Math.Poly.Ring
- JXG.Math.Statistics
- JXG.Math.Symbolic
- JXG.NoRenderer
- JXG.Options
- JXG.Point
- JXG.Polygon
- JXG.Server
- JXG.Server.modules
- JXG.SVGRenderer
- JXG.Text
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.VMLRenderer
- JXG.XML
- Label
- Line
- Locus
- MajorArc
- MajorSector
- Midpoint
- MinorArc
- MinorSector
- Mirrorelement
- Mirrorpoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelpoint
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Point
- PolarLine
- PolePoint
- Polygon
- Quadtree
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopetriangle
- Spline
- Stepfunction
- Tangent
- Tapemeasure
- Text
- Ticks
- Tracecurve
- Transformation
- Turtle

# Class Group

JXG.Group
↳ Group

This element combines a given set of JXG.Point elements to a group. The elements of the group and dependent elements can be translated, rotated and scaled by dragging one of the group elements.
Defined in: group.js.
Extends JXG.Group.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| Group(board, parents, attributes)

Methods borrowed from class JXG.Group:
  _addActionPoint, _removeActionPoint, _setActionPoints, _update_apply_transformation, _update_centroid_center, _update_find_drag_type, addGroup, addParents, addPoint, addPoints, addRotationPoint, addScalePoint, addTranslationPoint, getParents, removePoint, removeRotationPoint, removeScalePoint, removeTranslationPoint, setParents, setProperty, setRotationCenter, setRotationPoints, setScaleCenter, setScalePoints, setTranslationPoints, ungroup, update

Class Detail
Group(board, parents, attributes)

Parameters:
{JXG.Board} board
  The board the points are on.
{Array} parents
  Array of points to group.
{Object} attributes
  Visual properties (unused).

Returns:
  {JXG.Group}

Examples:

     // Create some free points. e.g. A, B, C, D
     // Create a group

     var p, col, g;
     col = 'blue';
     p = [];
     p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));
     g = board.create('group', p);

     // Create some free points. e.g. A, B, C, D
     // Create a group
     // If the points define a polygon and the polygon has the attribute hasInnerPoints:true,
     // the polygon can be dragged around.

     var p, col, pol, g;
     col = 'blue';
     p = [];
     p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));

     pol = board.create('polygon', p, {hasInnerPoints: true});
     g = board.create('group', p);

     // Allow rotations:
     // Define a center of rotation and declare points of the group as "rotation points".

     var p, col, pol, g;
     col = 'blue';
     p = [];
     p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
     p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
     p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));

     pol = board.create('polygon', p, {hasInnerPoints: true});
     g = board.create('group', p);
     g.setRotationCenter(p[0]);
     g.setRotationPoints([p[1], p[2]]);

     // Allow rotations:
     // As rotation center, arbitrary points, coordinate arrays,
     // or functions returning coordinate arrays can be given.
     // Another possibility is to use the predefined string 'centroid'.

     // The methods to define the rotation points can be chained.

     var p, col, pol, g;
     col = 'blue';
     p = [];
     p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
     p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
     p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));

     pol = board.create('polygon', p, {hasInnerPoints: true});
     g = board.create('group', p).setRotationCenter('centroid').setRotationPoints([p[1], p[2]]);

     // Allow scaling:
     // As for rotation one can declare points of the group to trigger a scaling operation.
     // For this, one has to define a scaleCenter, in analogy to rotations.

     // Here, the yellow  point enables scaling, the red point a rotation.

     var p, col, pol, g;
     col = 'blue';
     p = [];
     p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'yellow', fillColor:'yellow'}));
     p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
     p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));

     pol = board.create('polygon', p, {hasInnerPoints: true});
     g = board.create('group', p).setRotationCenter('centroid').setRotationPoints([p[2]]);
     g.setScaleCenter(p[0]).setScalePoints(p[1]);

     // Allow Translations:
     // By default, every point of a group triggers a translation.
     // There may be situations, when this is not wanted.

     // In this example, E triggers nothing, but itself is rotation center
     // and is translated, if other points are moved around.

     var p, q, col, pol, g;
     col = 'blue';
     p = [];
     p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'yellow', fillColor:'yellow'}));
     p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
     p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));
     q = board.create('point',[0, 0], {size: 5, strokeColor:col, fillColor:col});

     pol = board.create('polygon', p, {hasInnerPoints: true});
     g = board.create('group', p.concat(q)).setRotationCenter('centroid').setRotationPoints([p[2]]);
     g.setScaleCenter(p[0]).setScalePoints(p[1]);
     g.removeTranslationPoint(q);