JXG.Board

Own

animationDelay

Description

Time (in msec) between two animation steps. Used in JXG.CoordsElement#moveAlong, JXG.CoordsElement#moveTo and JXG.CoordsElement#visit.

Type

Number

Default Value

35

See

• JXG.CoordsElement#moveAlong
• JXG.CoordsElement#moveTo
• JXG.CoordsElement#visit

Source

options.js, line 65

axis

Description

Show default axis. If shown, the horizontal axis can be accessed via JXG.Board.defaultAxes.x, the vertical axis can be accessed via JXG.Board.defaultAxes.y. Both axes have a sub-element "defaultTicks".

Value can be Boolean or an object containing axis attributes.

Type

Boolean

Default Value

false

Source

options.js, line 80

boundingBox

Description

Bounding box of the visible area in user coordinates. It is an array consisting of four values: [x₁, y₁, x₂, y₂]

The canvas will be spanned from the upper left corner (x₁, y₁) to the lower right corner (x₂, y₂).

Type

Array

Default Value

[-5, 5, 5, -5]

See

• JXG.Board#maxBoundingBox
• JXG.Board#keepAspectRatio

Example

var board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-5, 5, 5, -5],
        axis: true
    });

Source

options.js, line 95

browserPan

Description

Enable browser scrolling on touch interfaces if the user double taps into an empty region of the board. In turn, browser scrolling is deactivated as soon as a JSXGraph element is dragged.

• Implemented for pointer touch devices - not with mouse, pen or old iOS touch.
• It only works if browserPan:true
• One finger action by the settings "pan.enabled:true" and "pan.needTwoFingers:false" has priority.

Type

Boolean

Default Value

false

See

• JXG.Board#pan

Example

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-5, 5, 5, -5], axis: true,
    pan: {
        enabled: true,
        needTwoFingers: true,
    },
    browserPan: true,
    zoom: {
        enabled: false
    }
});

var p1 = board.create('point', [1, -1]);
var p2 = board.create('point', [2.5, -2]);
var li1 = board.create('line', [p1, p2]);

Source

options.js, line 118

clickDelay

Description

Maximum time delay (in msec) between two clicks to be considered as double click. This attribute is used together with JXG.Board#dblClickSuppressClick. The JavaScript standard is that a click event is preceded by two click events, see https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event. In case of JXG.Board#dblClickSuppressClick being true, the JavaScript standard is ignored and this time delay is used to suppress the two click events if they are followed by a double click event.

In case of JXG.Board#dblClickSuppressClick being false, this attribute is used to clear the list of clicked elements after the time specified by this attribute.

Recommendation: if JXG.Board#dblClickSuppressClick is true, use a value of approx. 300, otherwise stay with the default 600.

Type

Number

Default Value

600

See

• JXG.Board#dblClickSuppressClick

Source

options.js, line 177

cssStyle

Description

CSS attributes for the JSXGraph div element.

Type

String

Default Value

''

Source

options.js, line 201

dblClickSuppressClick

Description

If false (default), JSXGraph follows the JavaScript standard and fires before a dblclick event two click events.

If true, the click events are suppressed if there is a dblclick event. The consequence is that in this case any click event is fired with a delay specified by JXG.Board#clickDelay.

Type

Boolean

Default Value

false

See

• JXG.Board#clickDelay

Source

options.js, line 211

defaultAxes

Description

Attributes for the default axes in case of the attribute axis:true in JXG.JSXGraph#initBoard.

Type

Object

Default Value

{x: {name:'x'}, y: {name: 'y'}}

Examples

const board = JXG.JSXGraph.initBoard('id', {
    boundingbox: [-5, 5, 5, -5], axis:true,
    defaultAxes: {
        x: {
          name: 'Distance (mi)',
          withLabel: true,
          label: {
            position: 'rt',
            offset: [-5, 15],
            anchorX: 'right'
          }
        },
        y: {
          withLabel: true,
          name: 'Y',
          label: {
            position: 'rt',
            offset: [-20, -5],
            anchorY: 'top'
          }
        }
    }
});

Display ticks labels as fractions

 var board = JXG.JSXGraph.initBoard('jxgbox', {
     boundingbox: [-1.2, 2.3, 1.2, -2.3],
     axis: true,
     defaultAxes: {
         x: {
             ticks: {
                 label: {
                     useMathJax: true,
                     display: 'html',
                     toFraction: true
                 }
             }
         },
         y: {
             ticks: {
                 label: {
                     useMathJax: true,
                     display: 'html',
                     toFraction: true
                 }
             }
         }
     }
 });

Source

options.js, line 228

document

Description

Supply the document object (DOM object). Defaults to window.document

Type

Object

Default Value

false (meaning window.document)

Source

options.js, line 392

drag

Description

Control the possibilities for dragging objects.

Possible sub-attributes with default values are:

drag: {
  enabled: true   // Allow dragging
}

Type

Object

Default Value

{enabled: true}

Source

options.js, line 402

fullscreen

Description

Attribute(s) to control the fullscreen icon. The attribute "showFullscreen" controls if the icon is shown. The following attribute(s) can be set:

• symbol (String): Unicode symbol which is shown in the navigation bar. Default: svg code for '\u26f6', other possibilities are the unicode symbols '\u26f6' and '\u25a1'. However, '\u26f6' is not supported by MacOS and iOS.
• scale (number between 0 and 1): Relative size of the larger side of the JSXGraph board in the fullscreen window. 1.0 gives full width or height. Default value is 0.85.
• id (String): Id of the HTML element which is brought to full screen or null if the JSXgraph div is taken. It may be an outer div element, e.g. if the old aspect ratio trick is used. Default: null, i.e. use the JSXGraph div.

Type

Object

Default Value

svg code

See

• JXG.Board#showFullscreen
• JXG.AbstractRenderer#drawNavigationBar

Example

var board = JXG.JSXGraph.initBoard('35bec5a2-fd4d-11e8-ab14-901b0e1b8723',
            {boundingbox: [-8, 8, 8,-8], axis: true,
            showcopyright: false,
            showFullscreen: true,
            fullscreen: {
                 symbol: '\u22c7',
                 scale: 0.95
             }
            });
var pol = board.create('polygon', [[0, 1], [3,4], [1,-4]], {fillColor: 'yellow'});

Source

options.js, line 421

ignoreLabels

Description

If set true and hasPoint() is true for both an element and it's label, the element (and not the label) is taken as drag element.

If set false and hasPoint() is true for both an element and it's label, the label is taken (if it is on a higher layer than the element)

Meanwhile, this feature might be irrelevant.

Type

Booelan

Default Value

true

Source

options.js, line 476

intl

Description

Support for internationalization of number formatting. This affects

• axis labels
• infobox
• texts consisting of numbers only
• smartlabel elements
• slider labels
• tapemeasure elements
• integral element labels

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat for an overview on the possibilities and the options.

User generated texts consisting of texts AND numbers have to be internationalized by the user, see Text#intl. Language locale and options can be individually controlled for each element by its intl attribute. If no locale is set, the default language of the browser is used.

Type

Object

Default Value

{enabled: false}

See

• Integral#label
• Slider#intl
• Text#intl
• Ticks#intl
• JXG.Board.infobox

Examples

Set the board-wide locale and use individual options for a text

const board = JXG.JSXGraph.initBoard(BOARDID, {
    axis: true,
    intl: {
        enabled: true,
        locale: 'de-DE'
    },
    boundingbox:[-0.5, 0.5, 0.5, -0.5]
});

var t = board.create('text', [0.05, 0.2, -Math.PI*100], {
        formatNumber: true,
        digits: 2,
        intl: {
                enabled: true,
                options: {
                    style: 'unit',
                    unit: 'celsius'
                }
            }
    });

Here, locale is disabled in general, but enabled for the horizontal axis and the infobox

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-0.5, 0.5, 0.5, -0.5],
    intl: {
        enabled: false,
        locale: 'de-DE'
    },
    keepaspectratio: true,
    axis: true,
    defaultAxes: {
        x: {
            ticks: {
                intl: {
                        enabled: true,
                        options: {
                            style: 'unit',
                            unit: 'kilometer-per-hour',
                            unitDisplay: 'narrow'
                        }
                }
            }
        },
        y: {
            ticks: {
            }
        }
    },
    infobox: {
        fontSize: 12,
        intl: {
            enabled: true,
            options: {
                minimumFractionDigits: 4,
                maximumFractionDigits: 5
            }
        }
    }
});

var p = board.create('point', [0.1, 0.1], {});

Source

options.js, line 492

jxgbox

Description

Attributes for the div containing the JSXGraph board - in case the board has been constructed by JXG.initAppBox

Type

Object

Default Value

{
  id: 'jxgbox',
  outerbox: null,
  cssStyle: 'width: 500px;  aspect-ratio: 1/1; overflow: visible',
  cssClass: 'jxgbox'
}

Source

options.js, line 663

keepAspectRatio

Description

If set to true, the ratio between horizontal and vertical unit sizes stays constant - independent of size changes of the hosting HTML div element.

If the aspect ration of the hosting div changes, JSXGraphs will change the user supplied bounding box accordingly. This is necessary if circles should look like circles and not like ellipses. It is recommended to set keepAspectRatio = true for geometric applets.

For function plotting keepAspectRatio = false might be the better choice.

Type

Boolean

Default Value

false

See

• JXG.Board#boundingBox
• JXG.Board#maxBoundingBox
• JXG.Board#setBoundingBox

Source

options.js, line 683

keyboard

Description

Control using the keyboard to change the construction.

• enabled: true / false
• dx: horizontal shift amount per key press
• dy: vertical shift amount per key press
• panShift: zoom if shift key is pressed
• panCtrl: zoom if ctrl key is pressed

Type

Object

Default Value

{enabled: true, dx: 10, dy:10, panShift: true, panCtrl: false}

See

• JXG.Board#keyDownListener
• JXG.Board#keyFocusInListener
• JXG.Board#keyFocusOutListener

Example

var board = JXG.JSXGraph.initBoard("jxgbox", {boundingbox: [-5,5,5,-5],
    axis: true,
    showCopyright:true,
    showNavigation:true,
    keyboard: {
        enabled: true,
        dy: 30,
        panShift: true,
        panCtrl: false
    }
});

Source

options.js, line 706

logging

Description

If enabled, user activities are logged in array "board.userLog".

Type

Object

Default Value

{enabled: false}

See

• JXG.Board#userLog

Example

var board = JXG.JSXGraph.initBoard(BOARDID,
         {
             boundingbox: [-8, 8, 8,-8],
             axis: true,
             logging: {enabled: true},
             showcopyright: false,
             shownavigation: false
         });
var A = board.create('point', [-4, 0], { name: 'A' });
var B = board.create('point', [1, 2], { name: 'B' });
var showUserLog = function() {
    var txt = '';

    for (let i = 0; i < board.userLog.length; i++) {
        txt += JSON.stringify(board.userLog[i]) + '\n';
    }
    alert(txt);
};
var but = board.create('button', [4, 4, 'Show user log', showUserLog]);

Source

options.js, line 766

maxBoundingBox

Description

Maximal bounding box of the visible area in user coordinates. It is an array consisting of four values: [x₁, y₁, x₂, y₂]

The bounding box of the canvas must be inside of this maximal bounding box.

Type

Array

Default Value

[-Infinity, Infinity, Infinity, -Infinity]

See

• JXG.Board#boundingBox

Example

var board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingBox: [-5, 5, 5, -5],
        maxBoundingBox: [-8, 8, 8, -8],
        pan: {enabled: true},
        axis: true
    });

Source

options.js, line 848

maxFrameRate

Description

Maximum frame rate of the board, i.e. maximum number of updates per second triggered by move events.

Type

Number

Default Value

40

Source

options.js, line 888

maxNameLength

Description

Maximum number of digits in automatic label generation. For example, if set to 1 automatic point labels end at "Z". If set to 2, point labels end at "ZZ".

Type

Number

Default Value

1

See

• JXG.Board#generateName

Source

options.js, line 899

minimizeReflow

Description

Change redraw strategy in SVG rendering engine.

This optimization seems to be obsolete in newer browsers (from 2021 on, at least) and even slow down the constructions. Therefore, the default is set to 'none' since v1.2.4.

If set to 'svg', before every redrawing of the JSXGraph construction the SVG sub-tree of the DOM tree is taken out of the DOM.

If set to 'all', before every redrawing of the JSXGraph construction the complete DOM tree is taken out of the DOM. If set to 'none' the redrawing is done in-place.

Using 'svg' or 'all' speeds up the update process considerably. The risk is that if there is an exception, only a white div or window is left.

Type

String

Default Value

'none'

Source

options.js, line 824

moveTarget

Description

Element which listens to move events of the pointing device. This allows to drag elements of a JSXGraph construction outside of the board. Especially, on mobile devices this enhances the user experience. However, it is recommended to allow dragging outside of the JSXGraph board only in certain constructions where users may not "loose" points outside of the board. In such a case, points may become unreachable.

A situation where dragging outside of the board is uncritical is for example if only sliders are used to interact with the construction.

Possible values for this attributes are:

• an element specified by document.getElementById('some id');
• null: to use the JSXGraph container div element
• document

Since the introduction of this attribute "moveTarget", the value "document" has become sort of default on touch devices like smartphones. However, it is no longer the case that the document listens to move events, but there is the new feature "setPointerCapture", which is also implicitly enabled on certain devices. In future versions, JSXGraph may adopt this new standard and distinguish only two cases:

• null: no pointerCapture
• document: use pointerCapture

This attribute is immutable. It can be changed as follows:

Type

Object

Default Value

null

Examples

board.setAttribute({moveTarget: null});
board.removeEventHandlers();
board.addEventHandlers();

var board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-5,5,5,-5],
        axis: true,
        moveTarget: document
    });

Source

options.js, line 912

offsetX

Description

A number that will be added to the absolute position of the board used in mouse coordinate calculations in JXG.Board#getCoordsTopLeftCorner.

Type

Number

Default Value

0

See

• JXG.Board#offsetY

Source

options.js, line 974

offsetY

Description

A number that will be added to the absolute position of the board used in mouse coordinate calculations in JXG.Board#getCoordsTopLeftCorner.

Type

Number

Default Value

0

See

• JXG.Board#offsetX

Source

options.js, line 986

pan

Description

Control the possibilities for panning interaction (i.e. moving the origin).

Possible sub-attributes with default values are:

pan: {
  enabled: true   // Allow panning
  needTwoFingers: false, // panning is done with two fingers on touch devices
  needShift: true, // mouse panning needs pressing of the shift key
}

Type

Object

See

• JXG.Board#browserPan

Source

options.js, line 998

renderer

Description

Default rendering engine. Possible values are 'svg', 'canvas', 'vml', 'no', or 'auto'. If the rendering engine is not available JSXGraph tries to detect a different engine.

In case of 'canvas' it is advisable to call 'board.update()' after all elements have been constructed. This ensures that all elements are drawn with their intended visual appearance.

This attribute is immutable.

Type

String

Default Value

'auto'

Source

options.js, line 1094

resize

Description

Control if JSXGraph reacts to resizing of the JSXGraph container element by the user / browser. The attribute "throttle" determines the minimal time in msec between to resize calls.

Attention: if the JSXGraph container has no CSS property like width or height and max-width or max-height set, but has a property like box-sizing:content-box, then the interplay between CSS and the resize attribute may result in an infinite loop with ever increasing JSXGraph container.

Type

Object

Default Value

{enabled: true, throttle: 10}

See

• JXG.Board#startResizeObserver
• JXG.Board#resizeListener

Example

var board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-5,5,5,-5],
    keepAspectRatio: true,
    axis: true,
    resize: {enabled: true, throttle: 200}
});

Source

options.js, line 1112

screenshot

Description

Attributes to control the screenshot function. The following attributes can be set:

• scale: scaling factor (default=1.0)
• type: format of the screenshot image. Default: png
• symbol: Unicode symbol which is shown in the navigation bar. Default: '\u2318'
• css: CSS rules to format the div element containing the screen shot image
• cssButton: CSS rules to format the close button of the div element containing the screen shot image

The screenshot will fail if the board contains text elements or foreign objects containing SVG again.

Type

Object

Source

options.js, line 1159

selection

Description

Control the possibilities for a selection rectangle. Starting a selection event triggers the "startselecting" event. When the mouse pointer is released, the "stopselecting" event is fired. The "stopselecting" event is supplied by the user.

So far it works in SVG renderer only.

Possible sub-attributes with default values are:

selection: {
  enabled: false,
  name: 'selectionPolygon',
  needShift: false,  // mouse selection needs pressing of the shift key
  needCtrl: true,    // mouse selection needs pressing of the shift key
  fillColor: '#ffff00'
}

Board events triggered by selection manipulation: 'startselecting', 'stopselecting', 'mousestartselecting', 'mousestopselecting', 'pointerstartselecting', 'pointerstopselecting', 'touchstartselecting', 'touchstopselecting'.

Type

Object

See

• JXG.Board#startSelectionMode
• JXG.Board#stopSelectionMode

Example

board.on('stopselecting', function(){
    var box = board.stopSelectionMode(),
    // bbox has the coordinates of the selectionr rectangle.
    // Attention: box[i].usrCoords have the form [1, x, y], i.e.
    // are homogeneous coordinates.
    bbox = box[0].usrCoords.slice(1).concat(box[1].usrCoords.slice(1));
    // Set a new bounding box
    board.setBoundingBox(bbox, false);
});

Source

options.js, line 1184

showClearTraces

Description

Show a button which allows to clear all traces of a board. This button can be accessed by JavaScript or CSS with the ID "{board_id}_navigation_button_cleartraces" or by the CSS classes JXG_navigation_button" or JXG_navigation_button_cleartraces".

Type

Boolean

Default Value

false

See

• JXG.AbstractRenderer#drawNavigationBar

Source

options.js, line 1261

showCopyright

Description

Show copyright string and logo in the top left corner of the board.

Type

Boolean

Default Value

true

See

• JXG.Board#showLogo

Source

options.js, line 1276

showFullscreen

Description

Show a button in the navigation bar to start fullscreen mode. This button can be accessed by JavaScript or CSS with the ID "{board_id}_navigation_button_fullscreen" or by the CSS classes JXG_navigation_button" or JXG_navigation_button_fullscreen".

Type

Boolean

Default Value

false

See

• JXG.Board#fullscreen
• JXG.AbstractRenderer#drawNavigationBar
• JXG.AbstractRenderer#drawNavigationBar

Source

options.js, line 1287

showInfobox

Description

If true, the infobox is shown on mouse/pen over for all points which have set their attribute showInfobox to 'inherit'. If a point has set its attribute showInfobox to false or true, that value will have priority over this value.

Type

Boolean

Default Value

true

See

• Point#showInfobox

Source

options.js, line 1304

showLogo

Description

The JSXGraph logo in the top left corner of the board is shown as soon as JXG.Board#showCopyright is true.

If JXG.Board#showCopyright is false, the logo can be shown anyhow by setting showLogo to true.

Type

Boolean

Default Value

false

See

• JXG.Board#showCopyright

Source

options.js, line 1318

showNavigation

Description

Display of navigation arrows and zoom buttons in the navigation bar.

The navigation bar has the the ID "{board_id}_navigation" and the CSS class JXG_navigation". The individual buttons can be accessed by JavaScript or CSS with the ID "{board_id}_navigation_button_{type}" or by the CSS classes JXG_navigation_button" or JXG_navigation_button_{type}", where {type} is one of left, right, or up, down, in, 100, or out, fullscreen, screenshot, cleartraces, reload.

Type

Boolean

Default Value

true

See

• JXG.AbstractRenderer#drawNavigationBar

Source

options.js, line 1333

showReload

Description

Show a button in the navigation bar to force reload of a construction. Works only with the JessieCode tag. This button can be accessed by JavaScript or CSS with the ID "{board_id}_navigation_button_reload" or by the CSS classes JXG_navigation_button" or JXG_navigation_button_reload".

Type

Boolean

Default Value

false

See

• JXG.AbstractRenderer#drawNavigationBar

Source

options.js, line 1355

showScreenshot

Description

Show a button in the navigation bar to enable screenshots. This button can be accessed by JavaScript or CSS with the ID "{board_id}_navigation_button_screenshot" or by the CSS classes JXG_navigation_button" or JXG_navigation_button_screenshot".

Type

Boolean

Default Value

false

See

• JXG.AbstractRenderer#drawNavigationBar

Source

options.js, line 1371

showZoom

Description

Display of zoom buttons in the navigation bar. To show zoom buttons, additionally showNavigation has to be set to true.

The individual buttons can be accessed by JavaScript or CSS with the ID "{board_id}_navigation_button_{type}" or by the CSS classes JXG_navigation_button" or JXG_navigation_button_{type}", where {type} is in, 100, or out.

Type

Boolean

Default Value

true

See

• JXG.AbstractRenderer#drawNavigationBar

Source

options.js, line 1386

sketches

Description

Control the sketchcurves for pointer device or first and second finger.

Type

Object

Default Value

{
  enabled: false,
  0: {visible: true},
  1: {visible: true}
}

See

• SketchCurve

Source

options.js, line 1242

takeFirst

Description

If true the first element of the set JXG.board.objects having hasPoint==true is taken as drag element.

Type

Boolean

Default Value

false

Source

options.js, line 1404

takeSizeFromFile

Description

If true, when read from a file or string - the size of the div can be changed by the construction text.

Type

Boolean

Default Value

false

Source

options.js, line 1414

theme

Description

Set a visual theme for a board. At the moment this attribute is immutable. Available themes are

• 'default'
• 'mono_thin': a black / white theme using thin strokes. Restricted to 2D.

Type

String

Default Value

'default'

Example

const board = JXG.JSXGraph.initBoard('jxgbox', {
     boundingbox: [-5, 5, 5, -5], axis: true,
     theme: 'mono_thin'
 });

 var a = board.create('slider', [[1, 4], [3, 4], [-10, 1, 10]]);
 var p1 = board.create('point', [1, 2]);
 var ci1 = board.create('circle', [p1, 0.7]);
 var cu = board.create('functiongraph', ['x^2']);
 var l1 = board.create('line', [2, 3, -1]);
 var l2 = board.create('line', [-5, -3, -1], { dash: 2 });
 var i1 = board.create('intersection', [l1, l2]);
 var pol = board.create('polygon', [[1, 0], [4, 0], [3.5, 1]]);
 var an = board.create('angle', [pol.vertices[1], pol.vertices[0], pol.vertices[2]]);
 var se = board.create('sector', [pol.vertices[1], pol.vertices[2], pol.vertices[0]]);
 var ci1 = board.create('circle', [[-3, -3], 0.7], { center: { visible: true } });

Source

options.js, line 1424

title

Description

Title string for the board. Primarily used in an invisible text element for assistive technologies. The title is implemented with the attribute 'aria-label' in the JSXGraph container.

Content should be accessible to all users, not just to those with screen readers. Consider instead adding a text element with the title and add the attribute aria:{enable:true,label:"Your Title"}

Type

String

Default Value

''

Source

options.js, line 1479

zoom

Description

Control the possibilities for zoom interaction.

Possible sub-attributes with default values are:

zoom: {
  enabled: true,  // turns off zooming completely, if set to false.
  factorX: 1.25,  // horizontal zoom factor (multiplied to JXG.Board#zoomX)
  factorY: 1.25,  // vertical zoom factor (multiplied to JXG.Board#zoomY)
  wheel: true,    // allow zooming by mouse wheel
  needShift: true,  // mouse wheel zooming needs pressing of the shift key
  min: 0.001,       // minimal values of JXG.Board#zoomX and JXG.Board#zoomY, limits zoomOut
  max: 1000.0,      // maximal values of JXG.Board#zoomX and JXG.Board#zoomY, limits zoomIn
  center: 'auto',   // 'auto': the center of zoom is at the position of the mouse or at the midpoint of two fingers
                    // 'board': the center of zoom is at the board's center
  pinch: true,      // pinch-to-zoom gesture for proportional zoom
  pinchHorizontal: true, // Horizontal pinch-to-zoom zooms horizontal axis. Only available if keepaspectratio:false
  pinchVertical: true,   // Vertical pinch-to-zoom zooms vertical axis only. Only available if keepaspectratio:false
  pinchSensitivity: 7    // Sensitivity (in degrees) for recognizing horizontal or vertical pinch-to-zoom gestures.
}

If the zoom buttons are visible, zooming by clicking the buttons is still possible, regardless of zoom.enabled:true/false. If this should be prevented, set showZoom:false.

Deprecated: zoom.eps which is superseded by zoom.min

Type

Object

Default Value

See above

See

• JXG.Board#showZoom

Source

options.js, line 1496

zoomX

Description

Zoom factor in horizontal direction.

Type

Number

Default Value

1.0

See

• JXG.Board#zoomY

Source

options.js, line 1555

zoomY

Description

Zoom factor in vertical direction.

Type

Number

Default Value

1.0

See

• JXG.Board#zoomX

Source

options.js, line 1566

registerEvents

Description

Allow user interaction by registering pointer events (including mouse and touch events), fullscreen, keyboard, resize, and zoom events. The latter events are essentially mouse wheel events. Decide if JSXGraph listens to these events.

Using a Boolean value turns on all events (or not), supplying an object of the form

 {
    fullscreen: true / false,
    keyboard: true / false,
    pointer: true / false,
    resize: true / false,
    wheel: true / false
 }

activates individual event handlers. If an event is NOT given, it will be activated.

This attribute is immutable. Please use JXG.Board#addEventHandlers() and JXG.Board#removeEventHandlers() directly.

Type

Boolean

Default Value

true

See

• JXG.Board#keyboard

Source

options.js, line 1023

Inherited

Own

(constant) BOARD_MODE_DRAG : Number

Description

Board is in drag mode, objects aren't highlighted on mouse over and the object referenced in JXG.Board#mouse is updated on mouse movement.

Type

Number

Source

base/board.js, line 98

(constant) BOARD_MODE_MOVE_ORIGIN : Number

Description

In this mode a mouse move changes the origin's screen coordinates.

Type

Number

Source

base/board.js, line 105

(constant) BOARD_MODE_NONE : Number

Description

Board is in no special mode, objects are highlighted on mouse over and objects may be clicked to start drag&drop.

Type

Number

Source

base/board.js, line 90

(constant) BOARD_MODE_ZOOM : Number

Description

This mode is active when the user zooms

Type

Number

Source

base/board.js, line 112

(constant) BOARD_QUALITY_HIGH : Number

Description

Update is made with high quality, e.g. graphs are evaluated at much more points.

Type

Number

See

• JXG.Board#updateQuality

Source

base/board.js, line 128

(constant) BOARD_QUALITY_LOW : Number

Description

Update is made with low quality, e.g. graphs are evaluated at a lesser amount of points.

Type

Number

See

• JXG.Board#updateQuality

Source

base/board.js, line 120

(private) _board_touches : Array

Description

Keeps a list of pointer devices which are currently touching the screen.

Type

Array

Source

base/board.js, line 597

(private) _change3DView : Boolean

Description

A flag which tells us if the update is triggered by a change of the 3D view. In that case we only have to update the projection of the 3D elements and can avoid a full board update.

Type

Boolean

Default Value

false

Source

base/board.js, line 640

(private) _drag_offset : Array

Description

Offset for large coords elements like images

Type

Array

Default Value

[0, 0]

Source

base/board.js, line 582

(private) _inputDevice : String

Description

Stores the input device used in the last down or move event.

Type

String

Default Value

'mouse'

Source

base/board.js, line 590

(private) _isResizing : Boolean

Description

A flag which tells us if a resize is in process

Type

Boolean

Default Value

false

See

• JXG.Board#resizeListener

Source

base/board.js, line 629

(private) _isScrolling : Boolean

Description

A flag which tells us if the user is scrolling the viewport

Type

Boolean

Default Value

false

See

• JXG.Board#scrollListener

Source

base/board.js, line 620

addEvent

Description

Alias of JXG.Board.on.

Source

base/board.js, line 6124

animationObjects : Object

Description

Stores all the objects that are currently running an animation.

Type

Object

Source

base/board.js, line 340

attr : Object

Description

Board attributes

Type

Object

Source

base/board.js, line 217

cPos : Array

Description

Cached result of getCoordsTopLeftCorner for touch/mouseMove-Events to save some DOM operations.

Type

Array

Source

base/board.js, line 439

(private) canvasHeight : Number

Description

Canvas Height

Type

Number

Source

base/board.js, line 297

(private) canvasWidth : Number

Description

Canvas width.

Type

Number

Source

base/board.js, line 290

container : String

Description

The html-id of the html element containing the board.

Type

String

Source

base/board.js, line 144

containerObj : Object

Description

Pointer to the html element containing the board.

Type

Object

Source

base/board.js, line 156

currentCBDef

Description

The current color blindness deficiency is stored in this property. If color blindness is not emulated at the moment, it's value is 'none'.

Source

base/board.js, line 503

dependentBoards : Array

Description

An array containing all other boards that are updated after this board has been updated.

Type

Array

See

• JXG.Board#addChild
• JXG.Board#removeChild

Source

base/board.js, line 309

dimension : Number

Description

Dimension of the board.

Type

Number

Default Value

2

Source

base/board.js, line 228

downObjects : Array

Description

Collects all elements that triggered a mouse down event.

Type

Array

Source

base/board.js, line 465

drag_dx : Number

Description

The distance from the mouse to the dragged object in x direction when the user clicked the mouse button.

Type

Number

See

• JXG.Board#drag_dy

Source

base/board.js, line 398

drag_dy : Number

Description

The distance from the mouse to the dragged object in y direction when the user clicked the mouse button.

Type

Number

See

• JXG.Board#drag_dx

Source

base/board.js, line 405

drag_position : Array

Description

The last position where a drag event has been fired.

Type

Array

See

• JXG.Board#moveObject

Source

base/board.js, line 412

elementsByName : Object

Description

An associative array / dictionary to store the objects of the board by name. The name of the object is the key and value is a reference to the object.

Type

Object

Source

base/board.js, line 358

focusObjects : Array

Description

Collects all elements that have keyboard focus. Should be either one or no element. Elements are stored with their id.

Type

Array

Source

base/board.js, line 473

geonextCompatibilityMode : Boolean

Description

If GEONExT constructions are displayed, then this property should be set to true. At the moment there should be no difference. But this may change.

Type

Boolean

Default Value

false

Source

base/board.js, line 512

(private) grids : Array

Description

Grids keeps track of all grids attached to this board.

Type

Array

Source

base/board.js, line 205

groups : Object

Description

An associative array containing all groups belonging to the board. Key is the id of the group and value is a reference to the object.

Type

Object

Source

base/board.js, line 334

hasMouseHandlers : Boolean

Description

A flag which tells if the board registers mouse events.

Type

Boolean

Default Value

false

Source

base/board.js, line 525

hasMouseUp : Boolean

Description

A flag which tells if the board the JXG.Board#mouseUpListener is currently registered.

Type

Boolean

Default Value

false

Source

base/board.js, line 553

hasPointerHandlers : Boolean

Description

A flag which stores if the board registered pointer events.

Type

Boolean

Default Value

false

Source

base/board.js, line 539

hasPointerUp : Boolean

Description

A flag which tells us if the board has a pointerUp event registered at the moment.

Type

Boolean

Default Value

false

Source

base/board.js, line 567

hasTouchEnd : Boolean

Description

A flag which tells if the board the JXG.Board#touchEndListener is currently registered.

Type

Boolean

Default Value

false

Source

base/board.js, line 560

hasTouchHandlers : Boolean

Description

A flag which tells if the board registers touch events.

Type

Boolean

Default Value

false

Source

base/board.js, line 532

hasWheelHandlers : Boolean

Description

A flag which stores if the board registered zoom events, i.e. mouse wheel scroll events.

Type

Boolean

Default Value

false

Source

base/board.js, line 546

highlightedObjects : Object

Description

An associative array containing all highlighted elements belonging to the board.

Type

Object

Source

base/board.js, line 346

id : String

Description

ID of the board

Type

String

Source

base/board.js, line 150

inUpdate : Boolean

Description

During the update process this is set to false to prevent an endless loop.

Type

Boolean

Default Value

false

Source

base/board.js, line 316

isSelecting : Boolean

Description

A flag which tells us if the user is selecting

Type

Boolean

Default Value

false

Source

base/board.js, line 611

isSketching : Array

Description

Array of length two of Boolean flags indicating if a pointer device (finger, mouse, pen) is adding points to board.sketches[i] (i=0,1). i=1 is only used for multi-touch with fingers.

User-supplied events might use this flag to test if sketching is active. Usually, this flag is true starting with a down event and ends with the up event.

Type

Array

See

• JXG.Board#sketches

Source

base/board.js, line 737

isSuspendedRedraw : Boolean

Description

If true updates are skipped.

Type

Boolean

Source

base/board.js, line 389

(private) keepaspectratio : Boolean

Description

Keep aspect ratio if bounding box is set and the width/height ratio differs from the width/height ratio of the canvas.

Type

Boolean

Source

base/board.js, line 283

mathLib

Source

base/board.js, line 742

mathLibJXG

Source

base/board.js, line 747

mode : Number

Description

The board mode the board is currently in. Possible values are

• JXG.Board.BOARD_MODE_NONE
• JXG.Board.BOARD_MODE_DRAG
• JXG.Board.BOARD_MODE_MOVE_ORIGIN

Type

Number

Source

base/board.js, line 369

mouse : JXG.GeometryElement

Description

References to the object that is dragged with the mouse on the board.

Type

JXG.GeometryElement

See

• JXG.Board#touches

Source

base/board.js, line 419

needsFullUpdate : Boolean

Description

Full updates are needed after zoom and axis translates. This saves some time during an update.

Type

Boolean

Default Value

false

Source

base/board.js, line 488

numObjects : Number

Description

Number of objects ever created on this board. This includes every object, even invisible and deleted ones.

Type

Number

Source

base/board.js, line 352

objects : Object

Description

An associative array containing all geometric objects belonging to the board. Key is the id of the object and value is a reference to the object.

Type

Object

Source

base/board.js, line 322

objectsList : Array

Description

An array containing all geometric objects on the board in the order of construction.

Type

Array

Source

base/board.js, line 328

options : JXG.Options

Description

Copy of the default options

Type

JXG.Options

Source

base/board.js, line 211

(private) origin : Object

Description

Coordinates of the boards origin. This a object with the two properties usrCoords and scrCoords. usrCoords always equals [1, 0, 0] and scrCoords stores the boards origin in homogeneous screen coordinates.

Type

Object

Source

base/board.js, line 239

positionAccessLast : Number

Description

Contains the last time (epoch, msec) since the last getCoordsTopLeftCorner call which was not thrown away.

Type

Number

Source

base/board.js, line 459

reducedUpdate : Boolean

Description

If reducedUpdate is set to true then only the dragged element and few (e.g. 2) following elements are updated during mouse move. On mouse up the whole construction is updated. This enables us to be fast even on very slow devices.

Type

Boolean

Default Value

false

Source

base/board.js, line 497

removeEvent

Description

Alias of JXG.Board.off.

Source

base/board.js, line 6145

resizeHandlers : Array

Description

Array containing the events related to resizing that have event listeners.

Type

Array

Default Value

[]

Source

base/board.js, line 574

selectingBox : Array

Description

A bounding box for the selection

Type

Array

Default Value

[ [0,0], [0,0] ]

Source

base/board.js, line 647

selectingMode : Boolean

Description

A flag which tells us if the board is in the selecting mode

Type

Boolean

Default Value

false

Source

base/board.js, line 604

sketch : JXG.Curve

Description

Alias for the first sketchcurve, i.e. for board.sketches[0].

Type

JXG.Curve

See

• JXG.Board#sketches

Source

base/board.js, line 725

sketches : Array

Description

Array of length two containing sketchcurves of the board. In case of mouse or pen only the first entry is used. In case of finger input, sketchcurves for the first and second finger are possible.

Type

Array

See

• SketchCurve
• JXG.Board#sketch

Example

const board = JXG.JSXGraph.initBoard('jxgbox', {
     boundingbox: [-10, 10, 10, -10],
     axis: true,
     sketches: {
         enabled: true,
         0: {strokeWidth: 2, visible: true, maxLength: 20},
         1: {strokeWidth: 3, visible: true}
     }
 });

 // Use event handler to access the actual curve
 board.on('move', function(evt) {
   console.log('JSXGraph example: move', this.sketches[0].dataX.length);
 });

 // Use event handler to access the actual curve
 board.on('up', function(evt) {
   console.log('JSXGraph example: up', this.sketches[0].dataX.length);
 });

Source

base/board.js, line 718

touchMoveLast : Number

Description

Contains the last time (epoch, msec) since the last touchMove event which was not thrown away or since touchStart because Android's Webkit browser fires too much of them.

Type

Number

Source

base/board.js, line 446

touchMoveLastId : Number

Description

Contains the pointerId of the last touchMove event which was not thrown away or since touchStart because Android's Webkit browser fires too much of them.

Type

Number

Source

base/board.js, line 453

touches : Array

Description

Keeps track on touched elements, like JXG.Board#mouse does for mouse events.

Type

Array

See

• JXG.Board#mouse

Source

base/board.js, line 426

(private) unitX : Number

Description

The number of pixels which represent one unit in user-coordinates in x direction.

Type

Number

Source

base/board.js, line 268

(private) unitY : Number

Description

The number of pixels which represent one unit in user-coordinates in y direction.

Type

Number

Source

base/board.js, line 275

updateQuality : Number

Description

The update quality of the board. In most cases this is set to JXG.Board#BOARD_QUALITY_HIGH. If JXG.Board#mode equals JXG.Board#BOARD_MODE_DRAG this is set to JXG.Board#BOARD_QUALITY_LOW to speed up the update process by e.g. reducing the number of evaluation points when plotting functions. Possible values are

• BOARD_QUALITY_LOW
• BOARD_QUALITY_HIGH

Type

Number

See

• JXG.Board#mode

Source

base/board.js, line 383

userLog : Array

Description

Array to log user activity. Entries are objects of the form '{type, id, start, end}' notifying the start time as well as the last time of a single event of type 'type' on a JSXGraph element of id 'id'. 'start' and 'end' contain the amount of milliseconds elapsed between 1 January 1970 00:00:00 UTC and the time the event happened.

For the time being (i.e. v1.5.0) the only supported type is 'drag'.

Type

Array

Source

base/board.js, line 660

xmlString : String

Description

A string containing the XML text of the construction. Only useful if a construction is read from a GEONExT-, Intergeo-, Geogebra-, or Cinderella-File.

Type

String

Source

base/board.js, line 433

Inherited

Own

// Line which will be the floor to roll upon.
var line = board.create('curve', [function (t) { return t;}, function (t){ return 1;}], {strokeWidth:6});
// Center of the rolling circle
var C = board.create('point',[0,2],{name:'C'});
// Starting point of the rolling circle
var P = board.create('point',[0,1],{name:'P', trace:true});
// Circle defined as a curve. The circle 'starts' at P, i.e. circle(0) = P
var circle = board.create('curve',[
          function (t){var d = P.Dist(C),
                          beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
                      t += beta;
                      return C.X()+d*Math.cos(t);
          },
          function (t){var d = P.Dist(C),
                          beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
                      t += beta;
                      return C.Y()+d*Math.sin(t);
          },
          0,2*Math.PI],
          {strokeWidth:6, strokeColor:'green'});

// Point on circle
var B = board.create('glider',[0,2,circle],{name:'B', color:'blue',trace:false});
var roll = board.createRoulette(line, circle, 0, Math.PI/20, 1, 100, [C,P,B]);
roll.start() // Start the rolling, to be stopped by roll.stop()

var point1, point2, point3, point4, margin,
            p1Location, p2Location, p3Location, p4Location,
            helppoint1, helppoint2, helppoint3, helppoint4;

     // margin to make the boundingBox virtually smaller
     margin = [2,2,2,2];

     // Points which are seen on screen
     point1 = board.create('point', [0,0]);
     point2 = board.create('point', [0,7]);
     point3 = board.create('point', [7,7]);
     point4 = board.create('point', [-7,-5]);

     p1Location = board.getPointLoc(point1.coords.usrCoords, margin);
     p2Location = board.getPointLoc(point2.coords.usrCoords, margin);
     p3Location = board.getPointLoc(point3.coords.usrCoords, margin);
     p4Location = board.getPointLoc(point4.coords.usrCoords, margin);

     // Text seen on screen
     board.create('text', [1,-1, "getPointLoc(A): " + "[" + p1Location + "]"])
     board.create('text', [1,-2, "getPointLoc(B): " + "[" + p2Location + "]"])
     board.create('text', [1,-3, "getPointLoc(C): " + "[" + p3Location + "]"])
     board.create('text', [1,-4, "getPointLoc(D): " + "[" + p4Location + "]"])


     // Helping points that are used to create the helping lines
     helppoint1 = board.create('point', [(function (){
         var bbx = board.getBoundingBox();
         return [bbx[2] - 2, bbx[1] -2];
     })], {
         visible: false,
     })

     helppoint2 = board.create('point', [(function (){
         var bbx = board.getBoundingBox();
         return [bbx[0] + 2, bbx[1] -2];
     })], {
         visible: false,
     })

     helppoint3 = board.create('point', [(function (){
         var bbx = board.getBoundingBox();
         return [bbx[0]+ 2, bbx[3] + 2];
     })],{
         visible: false,
     })

     helppoint4 = board.create('point', [(function (){
         var bbx = board.getBoundingBox();
         return [bbx[2] -2, bbx[3] + 2];
     })], {
         visible: false,
     })

     // Helping lines to visualize the 9 sectors and the margin
     board.create('line', [helppoint1, helppoint2]);
     board.create('line', [helppoint2, helppoint3]);
     board.create('line', [helppoint3, helppoint4]);
     board.create('line', [helppoint4, helppoint1]);

    v    u > |   -1    |    0   |    1   |
------------------------------------------
    1        | [-1,1]  |  [0,1] |  [1,1] |
------------------------------------------
    0        | [-1,0]  |  Board |  [1,0] |
------------------------------------------
   -1        | [-1,-1] | [0,-1] | [1,-1] |

board.on('up', function (evt) {
        var a = board.getUsrCoordsOfMouse(evt),
            x = a[0],
            y = a[1],
            somePoint = board.create('point', [x,y], {name:'SomePoint',size:4});
            // Shorter version:
            //somePoint = board.create('point', a, {name:'SomePoint',size:4});
        });

// select the element with name A
board.select('A');

// select all elements with strokecolor set to 'red' (but not '#ff0000')
board.select({
  strokeColor: 'red'
});

// select all points on or below the x axis and make them black.
board.select({
  elementClass: JXG.OBJECT_CLASS_POINT,
  Y: function (v) {
    return v <= 0;
  }
}).setAttribute({color: 'black'});

// select all elements
board.select(function (el) {
  return true;
});

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-5, 5, 5, -5],
    keepAspectRatio: false,
    axis:true,
    showFullscreen: true,
    showScreenshot: true,
    showCopyright: false
});

board.setAttribute({
    animationDelay: 10,
    boundingbox: [-10, 5, 10, -5],
    defaultAxes: {
        x: { strokeColor: 'blue', ticks: { strokeColor: 'blue'}}
    },
    description: 'test',
    fullscreen: {
        scale: 0.5
    },
    intl: {
        enabled: true,
        locale: 'de-DE'
    }
});

board.setAttribute({
    selection: {
        enabled: true,
        fillColor: 'blue'
    },
    showInfobox: false,
    zoomX: 0.5,
    zoomY: 2,
    fullscreen: { symbol: 'x' },
    screenshot: { symbol: 'y' },
    showCopyright: true,
    showFullscreen: false,
    showScreenshot: false,
    showZoom: false,
    showNavigation: false
});
board.setAttribute('showCopyright:false');

var p = board.create('point', [1, 1], {size: 10,
    label: {
        fontSize: 24,
        highlightStrokeOpacity: 0.1,
        offset: [5, 0]
    }
});

	<button onclick='board.startSelectionMode()'>Start</button>

//
// Set a new bounding box from the selection rectangle
//
var board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingBox:[-3,2,3,-2],
        keepAspectRatio: false,
        axis:true,
        selection: {
            enabled: true,
            needShift: false,
            needCtrl: true,
            withLines: false,
            vertices: {
                visible: false
            },
            fillColor: '#ffff00',
        }
     });

var f = function f(x) { return Math.cos(x); },
    curve = board.create('functiongraph', [f]);

board.on('stopselecting', function(){
    var box = board.stopSelectionMode(),

        // bbox has the coordinates of the selection rectangle.
        // Attention: box[i].usrCoords have the form [1, x, y], i.e.
        // are homogeneous coordinates.
        bbox = box[0].usrCoords.slice(1).concat(box[1].usrCoords.slice(1));

        // Set a new bounding box
        board.setBoundingBox(bbox, false);
 });

<div id='jxgbox' class='jxgbox' style='width:500px; height:200px;'></div>
<button onClick='board.toFullscreen()'>Fullscreen</button>

<script language='Javascript' type='text/javascript'>
var board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});
var p = board.create('point', [0, 1]);
</script>

<div id='outer' style='max-width: 500px; margin: 0 auto;'>
<div id='jxgbox' class='jxgbox' style='height: 0; padding-bottom: 100%'></div>
</div>
<button onClick='board.toFullscreen('outer')'>Fullscreen</button>

<script language='Javascript' type='text/javascript'>
var board = JXG.JSXGraph.initBoard('jxgbox', {
    axis:true,
    boundingbox:[-5,5,5,-5],
    fullscreen: { id: 'outer' },
    showFullscreen: true
});
var p = board.create('point', [-2, 3], {});
</script>

Inherited

Own