# 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
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Constants
- Curve
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- ForeignObject
- 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.Chart
- JXG.Circle
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Dump
- JXG.EventEmitter
- JXG.ForeignObject
- JXG.GeometryElement
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Legend
- JXG.Line
- JXG.Math
- JXG.Math.Clip
- JXG.Math.Extrapolate
- JXG.Math.Geometry
- JXG.Math.IntervalArithmetic
- JXG.Math.Metapost
- JXG.Math.Nlp
- JXG.Math.Numerics
- JXG.Math.Plot
- JXG.Math.Poly
- JXG.Math.Poly.Monomial
- JXG.Math.Poly.Polynomial
- JXG.Math.Poly.Ring
- JXG.Math.ProbFuncs
- JXG.Math.Quadtree
- 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
- Legend
- Line
- Locus
- MajorArc
- MajorSector
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- Mirrorelement
- Mirrorpoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelpoint
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Point
- PolarLine
- PolePoint
- Polygon
- PolygonalChain
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopetriangle
- Spline
- Stepfunction
- Tangent
- Tapemeasure
- Text
- Ticks
- Tracecurve
- Transformation
- Turtle

# Class JXG.Ticks

JXG.GeometryElement
↳ JXG.Ticks

Ticks provides methods for creation and management of ticks on an axis.
Defined in: ticks.js.
Extends JXG.GeometryElement.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| JXG.Ticks(line, ticks, attributes) Creates ticks for an axis.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, childElements, dash, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, quadraticform, rendNode, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, type, visible, visProp, visPropCalc, withLabel

Field Summary
Field Attributes | Field Name and Description
--- | ---
| board The board the ticks line is drawn on.
| equidistant Equidistant ticks.
| fixedTicks Array of fixed ticks.
| labelCounter To ensure the uniqueness of label ids this counter is used.
| labelData A list of labels which have to be displayed in updateRenderer.
| labels Array where the labels are saved.
| line The line the ticks belong to.
| minTicksDistance Least distance between two ticks, measured in pixels.
| ticks Stores the ticks coordinates
| ticksDelta Distance between two major ticks in user coordinates
| ticksFunction A function calculating ticks delta depending on the ticks number.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, childElements, dash, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, quadraticform, rendNode, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, type, visible, visProp, visPropCalc, withLabel

Method Summary
Method Attributes | Method Name and Description
--- | ---
<private> | _isInsideCanvas(x, y, m) Check if (parts of) the tick is inside the canvas.
<private> | adjustTickDistance(ticksDelta, coordsZero, deltas, bounds) Auxiliary method used by JXG.Ticks#generateEquidistantTicks to adjust the distance between two ticks depending on JXG.Ticks#minTicksDistance value
| beautifyScientificNotationLabel(labelText) Formats label texts to make labels displayed in scientific notation look beautiful.
<private> | calculateTicksCoordinates() (Re-)calculates the ticks coordinates.
<private> | createTickPath(coords, major)
<private> | formatLabelText(value) Format label texts.
<private> | generateEquidistantTicks(coordsZero, bounds) Creates ticks coordinates and labels automatically.
<private> | generateFixedTicks(coordsZero, bounds) Creates ticks coordinates and labels based on JXG.Ticks#fixedTicks and JXG.Ticks#labels.
<private> | generateLabelData(labelText, tick, tickNumber) Create a tick label data, i.e.
<private> | generateLabelText(tick, zero, value) Creates the label text for a given tick.
<private> | getDistanceFromZero(zero, point) Calculates the distance in user coordinates from zero to a given point including its sign.
<private> | getLowerAndUpperBounds(coordsZero, type) Calculate the lower and upper bounds for tick rendering If JXG.Ticks#includeBoundaries is false, the boundaries will exclude point1 and point2
<private> | getXandYdeltas() Calculates the x and y distance in pixel between two units in user space.
<private> | getZeroCoordinates() Returns the coordinates of the point zero of the line.
| hasPoint(x, y) Checks whether (x,y) is near the line.
<private> | makeTicksFunction(ticks) Ticks function: determines the distance (in user units) of two major ticks.
<private> | processTickPosition(coordsZero, tickPosition, ticksDelta, deltas) Auxiliary method used by JXG.Ticks#generateEquidistantTicks to create a tick in the line at the given tickPosition.
| setPositionDirectly(method, coords, oldcoords) Sets x and y coordinate of the tick.
<private> | setTicksSizeVariables(pos) Sets the variables used to set the height and slope of each tick.
| update() Recalculate the tick positions and the labels.
| updateRenderer() Uses the boards renderer to update the arc.
<private> | updateRendererLabels() Updates the label elements of the major ticks.

Methods borrowed from class JXG.GeometryElement:
  _set, addChild, addDescendants, addParents, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, labelColor, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setProperty, show, showElement, snapToPoints, updateVisibility

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

Class Detail
JXG.Ticks(line, ticks, attributes)
Creates ticks for an axis.

Parameters:
{JXG.Line} line
  Reference to the axis the ticks are drawn on.
{Number|Array} ticks
  Number defining the distance between two major ticks or an array defining static ticks.
{Object} attributes
  Properties

See:
  JXG.Line#addTicks

Field Detail
{JXG.Board} board
The board the ticks line is drawn on.

{Boolean} equidistant
Equidistant ticks. Distance is defined by ticksFunction

{Array} fixedTicks
Array of fixed ticks.

{number} labelCounter
To ensure the uniqueness of label ids this counter is used.

{Array} labelData
A list of labels which have to be displayed in updateRenderer.

{Array} labels
Array where the labels are saved. There is an array element for every tick, even for minor ticks which don't have labels. In this case the array element contains just `null`.

{JXG.Line} line
The line the ticks belong to.

{int} minTicksDistance
Least distance between two ticks, measured in pixels.

{Array} ticks
Stores the ticks coordinates

{Number} ticksDelta
Distance between two major ticks in user coordinates

{Function} ticksFunction
A function calculating ticks delta depending on the ticks number.
Method Detail
<private> {Boolean} _isInsideCanvas(x, y, m)
Check if (parts of) the tick is inside the canvas. The tick intersects the boundary at two positions: [x[0], y[0]] and [x[1], y[1]] in screen coordinates.

Parameters:
{Array} x
  Array of length two
{Array} y
  Array of length two
m

Returns:
  {Boolean} true if parts of the tick are inside of the canvas or on the boundary.

<private> adjustTickDistance(ticksDelta, coordsZero, deltas, bounds)
Auxiliary method used by JXG.Ticks#generateEquidistantTicks to adjust the distance between two ticks depending on JXG.Ticks#minTicksDistance value

Parameters:
{Number} ticksDelta
  distance between two major ticks in user coordinates
{JXG.Coords} coordsZero
  coordinates of the point considered zero
{Object} deltas
  x and y distance in pixel between two user units
{Object} bounds
  upper and lower bound of the tick positions in user units.

{String} beautifyScientificNotationLabel(labelText)
Formats label texts to make labels displayed in scientific notation look beautiful. For example, label 5.00e+6 will become 5•10⁶, label -1.00e-7 will become into -1•10⁻⁷

Parameters:
{String} labelText
  - The label that we want to convert

Returns:
  {String} If labelText was not in scientific notation, return labelText without modifications. Otherwise returns beautified labelText with proper superscript notation.

<private> calculateTicksCoordinates()
(Re-)calculates the ticks coordinates.

<private> {Array} createTickPath(coords, major)

Parameters:
{JXG.Coords} coords
  Coordinates of the tick on the line.
{Boolean} major
  True if tick is major tick.

Returns:
  {Array} Array of length 3 containing path coordinates in screen coordinates of the tick (arrays of length 2). 3rd entry is true if major tick otherwise false. If the tick is outside of the canvas, the return array is empty.

<private> {String} formatLabelText(value)
Format label texts. Show the desired number of digits and use utf-8 minus sign.

Parameters:
{Number} value
  Number to be displayed

Returns:
  {String} The value converted into a string.

<private> generateEquidistantTicks(coordsZero, bounds)
Creates ticks coordinates and labels automatically. The frequency of ticks is affected by the values of JXG.Ticks#insertTicks and JXG.Ticks#ticksDistance

Parameters:
{JXG.Coords} coordsZero
  coordinates of the point considered zero
{Object} bounds
  contains the lower and upper boundaries for ticks placement

<private> generateFixedTicks(coordsZero, bounds)
Creates ticks coordinates and labels based on JXG.Ticks#fixedTicks and JXG.Ticks#labels.

Parameters:
{JXG.Coords} coordsZero
  Coordinates of the point considered zero
{Object} bounds
  contains the lower and upper boundaries for ticks placement

<private> {Object} generateLabelData(labelText, tick, tickNumber)
Create a tick label data, i.e. text and coordinates

Parameters:
{String} labelText
{JXG.Coords} tick
{Number} tickNumber

Returns:
  {Object} with properties 'x', 'y', 't' (text), 'i' (tick number) or null in case of o label

<private> {String} generateLabelText(tick, zero, value)
Creates the label text for a given tick. A value for the text can be provided as a number or string

Parameters:
{JXG.Coords} tick
  The Coords-object of the tick to create a label for
{JXG.Coords} zero
  The Coords-object of line's zero
{Number|String} value
  A predefined value for this tick

Returns:
  {String}

<private> {Number} getDistanceFromZero(zero, point)
Calculates the distance in user coordinates from zero to a given point including its sign. Sign is positive, if the direction from zero to point is the same as the direction zero to point2 of the line.

Parameters:
{JXG.Coords} zero
  coordinates of the point considered zero
{JXG.Coords} point
  coordinates of the point to find out the distance

Returns:
  {Number} distance between zero and point, including its sign

<private> {String, Object} getLowerAndUpperBounds(coordsZero, type)
Calculate the lower and upper bounds for tick rendering If JXG.Ticks#includeBoundaries is false, the boundaries will exclude point1 and point2

Parameters:
{JXG.Coords} coordsZero
type

Returns:
  {String} type (Optional) If type=='ticksdistance' the bounds are the intersection of the line with the bounding box of the board. Otherwise, it is the projection of the corners of the bounding box to the line. The first case is needed to automatically generate ticks. The second case is for drawing of the ticks.
  {Object} contains the lower and upper bounds

<private> {Object} getXandYdeltas()
Calculates the x and y distance in pixel between two units in user space.

Returns:
  {Object}

<private> {JXG.Coords} getZeroCoordinates()
Returns the coordinates of the point zero of the line. If the line is an Axis, the coordinates of the projection of the board's zero point is returned Otherwise, the coordinates of the point that acts as zero are established depending on the value of JXG.Ticks#anchor

Returns:
  {JXG.Coords} Coords object for the zero point on the line

{Boolean} hasPoint(x, y)
Checks whether (x,y) is near the line. Only available for line elements, not for ticks on curves.

Parameters:
{Number} x
  Coordinate in x direction, screen coordinates.
{Number} y
  Coordinate in y direction, screen coordinates.

Returns:
  {Boolean} True if (x,y) is near the line, False otherwise.

<private> {Function} makeTicksFunction(ticks)
Ticks function: determines the distance (in user units) of two major ticks. See above in constructor and in @see JXG.GeometryElement#setAttribute

Parameters:
{Number} ticks
  Distance between two major ticks

Returns:
  {Function} returns method ticksFunction

<private> processTickPosition(coordsZero, tickPosition, ticksDelta, deltas)
Auxiliary method used by JXG.Ticks#generateEquidistantTicks to create a tick in the line at the given tickPosition.

Parameters:
{JXG.Coords} coordsZero
  coordinates of the point considered zero
{Number} tickPosition
  current tick position relative to zero
{Number} ticksDelta
  distance between two major ticks in user coordinates
{Object} deltas
  x and y distance between two major ticks

{JXG.Ticks} setPositionDirectly(method, coords, oldcoords)
Sets x and y coordinate of the tick.

Parameters:
{number} method
  The type of coordinates used here. Possible values are JXG.COORDS_BY_USER and JXG.COORDS_BY_SCREEN.
{Array} coords
  coordinates in screen/user units
{Array} oldcoords
  previous coordinates in screen/user units

Returns:
  {JXG.Ticks} this element

<private> setTicksSizeVariables(pos)
Sets the variables used to set the height and slope of each tick.

Parameters:
pos

{JXG.Ticks} update()
Recalculate the tick positions and the labels.

Returns:
  {JXG.Ticks}

{JXG.Ticks} updateRenderer()
Uses the boards renderer to update the arc.

Returns:
  {JXG.Ticks} Reference to the object.

<private> {JXG.Ticks} updateRendererLabels()
Updates the label elements of the major ticks.

Returns:
  {JXG.Ticks} Reference to the object.