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

Element Grid

JXG.GeometryElement
   ↳ JXG.Curve
         ↳ Grid

Creates a grid to support the user with element placement or to improve determination of position.

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

Element Summary
Constructor Attributes Constructor Name and Description
 
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
 
To print a quadratic grid with same distance of major grid elements in x- and y-direction.
 
Deprecated.
 
Deprecated.
 
To decide whether major or minor grid elements on boundaries of the boundingBox shall be shown, half-ones as well.
 
This object contains the attributes for major grid elements.
 
This attribute determines whether the grid elements located at x=0, y=0 and especially at (0, 0) are displayed.
 
Appearance of major grid element.
 
This number (pixel value) controls where infinite lines end at the canvas border.
 
Number of vertices for face 'polygon'.
 
Size of major grid elements.
 
Distance of major grid elements.
 
This object contains the attributes for minor grid elements.
 
This attribute determines whether the minor grid elements located at x=0 and y=0 are displayed.
 
Appearance of minor grid elements.
 
This number (pixel value) controls where infinite lines end at the canvas border.
 
Number of vertices for face 'polygon'.
 
Size of minor grid elements.
 
Number of elements in minor grid between elements of the major grid.
<private>  
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, 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.
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "grid".

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:
// standard grid
var g = board.create('grid', [], {
    drawZero: true,
});

				
				
// more fancy grid
var g = board.create('grid', [], {
    major: {
        face: 'plus',
        size: 10,
        strokeColor: '#080050',
        strokeOpacity: 1,
    },
    minor: {
        size: 3
    },
    drawZero: true,
    minorElements: 4,
});

				
				
// extreme fancy grid
var grid = board.create('grid', [], {
    major: {
        face: 'regularPolygon',
        size: 10,
        strokeColor: 'blue',
        fillColor: 'orange',
        strokeOpacity: 1,
        drawZero: true,
    },
    minor: {
        face: 'diamond',
        size: 3,
        strokeColor: 'green',
        fillColor: 'grey',
        drawZero: true,
    },
    minorElements: 1,
    includeBoundaries: false,
});

				
				
// grid with parent axes
var axis1 = board.create('axis', [[-1, -2.5], [1, -2.5]], {
    ticks: {
        strokeColor: 'green',
        strokeWidth: 2,
        minorticks: 2,
        majorHeight: 10,
        drawZero: true
    }
});
var axis2 = board.create('axis', [[3, 0], [3, 2]], {
    ticks: {
        strokeColor: 'red',
        strokeWidth: 2,
        minorticks: 3,
        majorHeight: 10,
        drawZero: true
    }
});
var grid = board.create('grid', [axis1, axis2], {
    major: {
        face: 'line',
        drawZero: true
    },
    minor: {
        face: 'point',
        size: 3
    },
    minorElements: 'auto',
    includeBoundaries: false,
});

				
                
Attribute Detail
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

{Object} major
This object contains the attributes for major grid elements.
Defined in: options.js.
See:
Grid#major_size
Grid#major_face
Grid#major_margin
Grid#major_drawZero
Grid#major_polygonVertices

major_drawZero
This attribute determines whether the grid elements located at x=0, y=0 and especially at (0, 0) are displayed.
This attribute is a sub-entry of Grid#major: major: {drawZero: ...}

Defined in: options.js.
Default Value:
false

major_face
Appearance of major grid element. There are different styles which differ in appearance. Possible values are (comparing to Point#face)
InputOutputFillable by fillColor,...
point, ..no
lineno
cross, xxno
circle, ooyes
square, [][]yes
plus, ++no
minus, --no
divide, ||no
diamond, <><>yes
diamond2, <<>><> (bigger)yes
triangleup, ^, a, A^no
triangledown, vvno
triangleleft, < <no
triangleright, >>no
regularPolygon, regpolyes

This attribute is a sub-entry of Grid#major: major: {face: ...}

Defined in: options.js.
Default Value:
'line'

{Number} major_margin
This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line ends exactly at the border, if negative there is a margin to the inside, if positive the line ends outside of the canvas (which is invisible).

This attribute is a sub-entry of Grid#major: major: {margin: ...}

Defined in: options.js.
Default Value:
0

major_polygonVertices
Number of vertices for face 'polygon'.

This attribute is a sub-entry of Grid#major: major: {polygonVertices: ...}

Defined in: options.js.
Default Value:
6

major_size
Size of major grid elements. There are the following possibilities: Unused for 'line' and 'point', 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 is a sub-entry of Grid#major: major: {size: ...}

Defined in: options.js.
Default Value:
5

majorStep
Distance of major grid elements. There are three possibilities: 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'

{Object} minor
This object contains the attributes for minor grid elements.
Defined in: options.js.
See:
Grid#minor_size
Grid#minor_face
Grid#minor_margin
Grid#minor_drawZero
Grid#minor_polygonVertices

minor_drawZero
This attribute determines whether the minor grid elements located at x=0 and y=0 are displayed.
This attribute is a sub-entry of Grid#minor: minor: {drawZero: ...}

Defined in: options.js.
Default Value:
false

minor_face
Appearance of minor grid elements. Same options as for major grid elements.

This attribute is a sub-entry of Grid#minor: minor: {face: ...}

Defined in: options.js.
See:
Grid#major_face
Default Value:
'point'

{Number} minor_margin
This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line ends exactly at the border, if negative there is a margin to the inside, if positive the line ends outside of the canvas (which is invisible).

This attribute is a sub-entry of Grid#minor: minor: {margin: ...}

Defined in: options.js.
Default Value:
0

minor_polygonVertices
Number of vertices for face 'polygon'.

This attribute is a sub-entry of Grid#minor: minor: {polygonVertices: ...}

Defined in: options.js.
Default Value:
6

minor_size
Size of minor grid elements. There are the following possibilities: Unused for 'line' and 'point', 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 is a sub-entry of Grid#minor: minor: {size: ...}

Defined in: options.js.
Default Value:
5

minorElements
Number of elements in minor grid between elements of the major grid. There are three possibilities: 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

<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

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

					
					
// Theme 2
// lines and subtile points in between

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-4, 4, 4, -4], axis: false,
    grid: { theme: 2, minorElements: 4, color: 'grey' },
});

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

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-4, 4, 4, -4], axis: false,
    grid: { theme: 4, minorElements: 4, color: 'grey' },
});

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

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-4, 4, 4, -4], axis: false,
    grid: { theme: 5, minorElements: 4, color: 'grey' },
});

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

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-4, 4, 4, -4], axis: false,
    grid: { theme: 6, minorElements: 4, color: 'grey' },
});

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

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-4, 4, 4, -4], axis: false,
    grid: { theme: 3, minorElements: 4, strokeColor: 'grey' },
});

					
					
// Theme 7
// lines and subtile points in between, also plotted on axes

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-4, 4, 4, -4], axis: false,
    grid: { theme: 7, minorElements: 4, color: 'grey' },
});

					
					

						
						
						
						

					
				
			


			


			


			

			
Attributes borrowed from other Elements
Attributes borrowed from class JXG.Curve:
lineCap
Attributes borrowed from class JXG.GeometryElement:
dash, dashScale, draft, dragToTopOfLayer, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, needsRegularUpdate, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, viewport, 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, 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
Documentation generated by JsDoc Toolkit 2.4.0 on Fri Mar 08 2024 12:21:00 GMT+0100 (Mitteleuropäische Normalzeit)