Grid - Documentation

Usage (signatures)

board.create('grid', [a1opt, a2opt]);

Optional parent axes.

Parameters

Name	Type	Attributes	Description
`a1`	Axis	<optional>
`a2`	Axis	<optional>

Examples

// standard grid
var g = board.create('grid', [], {});

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

// extreme fancy grid
var grid = board.create('grid', [], {
    major: {
        face: 'regularPolygon',
        size: 8,
        strokeColor: 'blue',
        fillColor: 'orange',
        strokeOpacity: 1,
    },
    minor: {
        face: 'diamond',
        size: 4,
        strokeColor: 'green',
        fillColor: 'grey',
    },
    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'
    },
    minor: {
        face: 'point',
        size: 3
    },
    minorElements: 'auto',
    includeBoundaries: false,
});

Attributes

Own

drawZero

Description

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.

Type

Boolean | Object

Source

options.js, line 5683

face

Description

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.

Type

String

Source

options.js, line 5633

forceSquare

Description: 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.
Type: Boolean | String
Default Value: false
Source: options.js, line 5590

gridX

Description: Deprecated. Use Grid#majorStep instead.
Type: Number | String
Deprecated: Yes
Default Value: null
Source: options.js, line 5533

gridY

Description: Deprecated. Use Grid#majorStep instead.
Type: Number | String
Deprecated: Yes
Default Value: null
Source: options.js, line 5544

includeBoundaries

Description: To decide whether major or minor grid elements on boundaries of the boundingBox shall be shown, half-ones as well.
Type: Boolean
Default Value: false
Source: options.js, line 5602

major

Description

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

Type

Object

Default Value

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

Source

options.js, line 5719

majorStep

Description

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.

Type

Number | String | Array

Default Value

'auto'

See

JXG.Ticks#getDistanceMajorTicks

Source

options.js, line 5555

margin

Description

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.

Type

Number

Source

options.js, line 5667

minor

Description

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

Type

Object

Default Value

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

Source

options.js, line 5779

minorElements

Description

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.

Type

Number | String | Array

Default Value

Source

options.js, line 5574

polygonVertices

Description

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.

Type

Number

Source

options.js, line 5705

size

Description

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.

Type

Number | String | Array

Source

options.js, line 5612

themes

Description

Array of theme attributes. The index of the entry is the number of the theme.

Type

Array

Examples

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 },
});

Source

options.js, line 5867

Inherited

gradientSecondOpacity

highlightStrokeOpacity

highlightStrokeWidth

ignoreForLabelAutoposition

Members

Own

none

Inherited

Methods

Own

none

Inherited

addParentsFromJCFunctions

getTransformationSource

interpolationFunctionFromArray

Events

Own

none

Inherited

Throws

If the element cannot be constructed with the given parent objects an exception is thrown.
Type Error

Details

Type: JXG.Curve
Source: element/grid.js, line 44

Extends

JXG.Curve