Element Grid

JXG.GeometryElement
↳ JXG.Curve
↳ Grid

A grid is a mesh consisting of vertical and horizontal lines or other geometrical objects.

Defined in: grid.js.
Extends JXG.Curve.

Element Summary
Constructor Attributes	Constructor Name and Description
	Grid A grid is a set of vertical and horizontal lines or other geometrical objects (faces) to support the user with element placement or to improve determination of position.

Attributes Summary
Field Attributes	Field Name and Description
	drawZero This attribute determines whether the grid elements located at `x=0`, `y=0` and (for major grid only) at `(0, 0)` are displayed.
	face Appearance of grid elements.
	forceSquare To print a quadratic grid with same distance of major grid elements in x- and y-direction.
	gridX Deprecated.
	gridY Deprecated.
	includeBoundaries To decide whether major or minor grid elements on boundaries of the boundingBox shall be shown, half-ones as well.
	major This object contains the attributes for major grid elements.
	majorStep Distance of major grid elements.
	margin This number (pixel value) controls where grid elements end at the canvas edge.
	minor This object contains the attributes for minor grid elements.
	minorElements Number of elements in minor grid between elements of the major grid.
	polygonVertices Number of vertices for face 'polygon'.
	size Size of grid elements.
<private>	themes Array of theme attributes.

Methods borrowed from class JXG.Curve:: addTransform, allocatePoints, generateTerm, getTransformationSource, hasPoint, interpolationFunctionFromArray, maxX, minX, moveTo, notifyParents, update, updateCurve, updateDataArray, updateRenderer, updateTransform, X, Y, Z
Methods borrowed from class JXG.GeometryElement:: _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale

Events borrowed from class JXG.GeometryElement:: attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

Element Detail

Grid

A grid is a set of vertical and horizontal lines or other geometrical objects (faces) to support the user with element placement or to improve determination of position. This method takes up to two facultative parent elements. These are used to set distance between grid elements in case of attribute majorStep or minorElements is set to 'auto'. Then the major/minor grid element distance is set to the ticks distance of parent axes. It is usually instantiated on the board's creation via the attribute grid set to true.

Possible parent array combinations are:
{JXG.Axis} a1 {JXG.Axis} a2: Optional parent axis.

Throws:
{Error}: If the element cannot be constructed with the given parent objects an exception is thrown.

Examples:

Attribute Detail

drawZero

This attribute determines whether the grid elements located at x=0, y=0 and (for major grid only) at (0, 0) are displayed. The main reason to set this attribute to "false", might be in combination with axes.

If false, then all these elements are hidden.
If true, all these elements are shown.
If an object of the following form is given, the three cases can be distinguished individually:
{x: true|false, y: true|false, origin: true|false}

This attribute can be set individually for major and minor grid as a sub-entry of Grid#major or Grid#minor, e.g. major: {drawZero: ...} For default values have a look there.

Defined in: options.js.

face

Appearance of grid elements. There are different styles which differ in appearance. Possible values are (comparing to Point#face):

Input	Output	Fillable by fillColor,...
point, .	.	no
line	−	no
cross, x	x	no
circle, o	o	yes
square, []	[]	yes
plus, +	+	no
minus, -	-	no
divide, \|	\|	no
diamond, <>	<>	yes
diamond2, <<>>	<> (bigger)	yes
triangleup, ^, a, A	^	no
triangledown, v	v	no
triangleleft, <	<	no
triangleright, >	>	no
regularPolygon, regpol	⬡	yes

This attribute can be set individually for major and minor grid as a sub-entry of Grid#major or Grid#minor, e.g. major: {face: ...} For default values have a look there.

Defined in: options.js.

forceSquare

To print a quadratic grid with same distance of major grid elements in x- and y-direction. 'min' or true will set both distances of major grid elements in x- and y-direction to the primarily lesser value, 'max' to the primarily greater value.
Defined in: options.js.

Default Value:: false

gridX

Deprecated. Use Grid#majorStep instead.
Defined in: options.js.

Default Value:: null

gridY

Deprecated. Use Grid#majorStep instead.
Defined in: options.js.

Default Value:: null

includeBoundaries

To decide whether major or minor grid elements on boundaries of the boundingBox shall be shown, half-ones as well.
Defined in: options.js.

Default Value:: false

major

This object contains the attributes for major grid elements. You can override the following grid attributes individually here:

Default values are:

{
     size: 5,
     face: 'line',
     margin: 0,
     drawZero: true,
     polygonVertices: 6
 }

Defined in: options.js.

majorStep

Distance of major grid elements. There are three possibilities:

If it is set to 'auto' the distance of the major grid equals the distance of majorTicks of the corresponding axis.
Numbers or strings which are numbers (e.g. '10') are interpreted as distance in usrCoords.
Strings with the unit 'px' are interpreted as distance in screen pixels.
Strings with the unit '%' or 'fr' are interpreted as a ratio to the width/height of the board. (e.g. 50% = 0.5fr)

Instead of one value you can provide two values as an array [x, y] here. These are used as distance in x- and y-direction.
Defined in: options.js.

See:: JXG.Ticks#getDistanceMajorTicks

Default Value:: 'auto'

margin

This number (pixel value) controls where grid elements end at the canvas edge. If zero, the line ends exactly at the end, if negative there is a margin to the inside, if positive the line ends outside of the canvas (which is invisible).

This attribute can be set individually for major and minor grid as a sub-entry of Grid#major or Grid#minor, e.g. major: {margin: ...} For default values have a look there.

Defined in: options.js.

minor

This object contains the attributes for minor grid elements. You can override the following grid attributes individually here:

Default values are:

{
     size: 3,
     face: 'point',
     margin: 0,
     drawZero: true,
     polygonVertices: 6
 }

Defined in: options.js.

minorElements

Number of elements in minor grid between elements of the major grid. There are three possibilities:

If set to 'auto', the number minor elements is equal to the number of minorTicks of the corresponding axis.
Numbers or strings which are numbers (e.g. '10') are interpreted as quantity.

Instead of one value you can provide two values as an array [x, y] here. These are used as number in x- and y-direction.
Defined in: options.js.

Default Value:: 0

polygonVertices

Number of vertices for face 'polygon'.

This attribute can be set individually for major and minor grid as a sub-entry of Grid#major or Grid#minor, e.g. major: {polygonVertices: ...} For default values have a look there.

Defined in: options.js.

size

Size of grid elements. There are the following possibilities:

Numbers or strings which are numbers (e.g. '10') are interpreted as size in pixels.
Strings with additional '%' (e.g. '95%') are interpreted as the ratio of used space for one element.

Unused for 'line' which will use the value of strokeWidth. Instead of one value you can provide two values as an array [x, y] here. These are used as size in x- and y-direction.

This attribute can be set individually for major and minor grid as a sub-entry of Grid#major or Grid#minor, e.g. major: {size: ...} For default values have a look there.

Defined in: options.js.

<private> themes

Array of theme attributes. The index of the entry is the number of the theme.
Defined in: options.js.

// Theme 1
// quadratic grid appearance with distance of major grid elements set to the primarily greater one

JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-4, 4, 4, -4], axis: true,
    defaultAxes: {
        x: { ticks: {majorHeight: 10} },
        y: { ticks: {majorHeight: 10} }
    },
    grid: { theme: 1 },
});

// Theme 2
// lines and points in between

JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-4, 4, 4, -4], axis: false,
    grid: { theme: 2 },
});

// Theme 3
// lines and thinner lines in between

JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-4, 4, 4, -4], axis: false,
    grid: { theme: 3 },
});

// Theme 4
// lines with grid of '+'s plotted in between

JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-4, 4, 4, -4], axis: false,
    grid: { theme: 4 },
});

// Theme 5
// grid of '+'s and points in between

JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-4, 4, 4, -4], axis: false,
    grid: { theme: 5 },
});

// Theme 6
// grid of circles with points in between

JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-4, 4, 4, -4], axis: false,
    grid: { theme: 6 },
});

Attributes borrowed from other Elements

Attributes borrowed from class JXG.Curve:: lineCap
Attributes borrowed from class JXG.GeometryElement:: aria, cssClass, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightCssClass, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, visible, withLabel

Fields borrowed from other Elements

Fields borrowed from class JXG.Curve:: dataX, dataY, numberPoints, qdt, ticks
Fields borrowed from class JXG.GeometryElement:: _org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc

Methods borrowed from other Elements

Methods borrowed from class JXG.Curve:: addTransform, allocatePoints, generateTerm, getTransformationSource, hasPoint, interpolationFunctionFromArray, maxX, minX, moveTo, notifyParents, update, updateCurve, updateDataArray, updateRenderer, updateTransform, X, Y, Z
Methods borrowed from class JXG.GeometryElement:: _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale

Events borrowed from other Elements

Events borrowed from class JXG.GeometryElement:: attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

JSXGraph 1.11.0beta2 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.

Element Grid