# 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.Curve

JXG.GeometryElement
↳ JXG.Curve

Creates a new curve object. Do not use this constructor to create a curve. Use JXG.Board#create with type Curve, or Functiongraph instead.
Defined in: curve.js.
Extends JXG.GeometryElement.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| JXG.Curve(board, parents, attributes) Curves are the common object for function graphs, parametric curves, polar curves, and data plots.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, 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
--- | ---
| dataX Array holding the x-coordinates of a data plot.
| dataY Array holding the y-coordinates of a data plot.
| numberPoints Number of points on curves.
| qdt Stores a quad tree if it is required.
| ticks Array of ticks storing all the ticks on this curve.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, 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
--- | ---
| addTransform(transform) Add transformations to this curve.
| allocatePoints() Allocate points in the Coords array this.points
| generateTerm(varname, xterm, yterm, mi, ma) Converts the JavaScript/JessieCode/GEONExT syntax of the defining function term into JavaScript.
<private> | getTransformationSource() If the curve is the result of a transformation applied to a continuous curve, the glider projection has to be done on the original curve.
| hasPoint(x, y, start) Checks whether (x,y) is near the curve.
<private> | interpolationFunctionFromArray(which) Generate the method curve.X() in case curve.dataX is an array and generate the method curve.Y() in case curve.dataY is an array.
| maxX() Gives the default value of the right bound for the curve.
| minX() Gives the default value of the left bound for the curve.
| moveTo(where) Shift the curve by the vector 'where'.
| notifyParents(contentStr) Finds dependencies in a given term and notifies the parents by adding the dependent object to the found objects child elements.
| update() Computes for equidistant points on the x-axis the values of the function
| updateCurve() Computes the curve path
| updateDataArray() For dynamic dataplots updateCurve can be used to compute new entries for the arrays JXG.Curve#dataX and JXG.Curve#dataY.
| updateRenderer() Updates the visual contents of the curve.
| updateTransform(p) Applies the transformations of the curve to the given point `p`.
| X(t, suspendUpdate) The parametric function which defines the x-coordinate of the curve.
| Y(t, suspendUpdate) The parametric function which defines the y-coordinate of the curve.
| Z(t) Treat the curve as curve with homogeneous coordinates.

Methods borrowed from class JXG.GeometryElement:
  _set, addChild, addDescendants, addParents, addRotation, addTicks, 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, setPositionDirectly, 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.Curve(board, parents, attributes)
Curves are the common object for function graphs, parametric curves, polar curves, and data plots.

Parameters:
{String|JXG.Board} board
  The board the new curve is drawn on.
{Array} parents
  defining terms An array with the functon terms or the data points of the curve.
{Object} attributes
  Defines the visual appearance of the curve.

See:
  JXG.Board#generateName
  JXG.Board#addCurve

Field Detail
{array} dataX
Array holding the x-coordinates of a data plot. This array can be updated during run time by overwriting the method JXG.Curve#updateDataArray.

{array} dataY
Array holding the y-coordinates of a data plot. This array can be updated during run time by overwriting the method JXG.Curve#updateDataArray.

numberPoints
Number of points on curves. This value changes between numberPointsLow and numberPointsHigh. It is set in JXG.Curve#updateCurve.

{JXG.Math.Quadtree} qdt
Stores a quad tree if it is required. The quad tree is generated in the curve updates and can be used to speed up the hasPoint method.

{Array} ticks
Array of ticks storing all the ticks on this curve. Do not set this field directly and use JXG.Curve#addTicks and JXG.Curve#removeTicks to add and remove ticks to and from the curve.

See:
  JXG.Ticks

Method Detail
{JXG.Curve} addTransform(transform)
Add transformations to this curve.

Parameters:
{JXG.Transformation|Array} transform
  Either one JXG.Transformation or an array of JXG.Transformations.

Returns:
  {JXG.Curve} Reference to the curve object.

allocatePoints()
Allocate points in the Coords array this.points

generateTerm(varname, xterm, yterm, mi, ma)
Converts the JavaScript/JessieCode/GEONExT syntax of the defining function term into JavaScript. New methods X() and Y() for the Curve object are generated, further new methods for minX() and maxX().

Parameters:
varname
xterm
yterm
mi
ma

See:
  JXG.GeonextParser.geonext2JS.

<private> {Array} getTransformationSource()
If the curve is the result of a transformation applied to a continuous curve, the glider projection has to be done on the original curve. Otherwise there will be problems when changing between high and low precision plotting, since there number of points changes.

Returns:
  {Array} [Boolean, curve]: Array contining 'true' if curve is result of a transformation, and the source curve of the transformation.

{Boolean} hasPoint(x, y, start)
Checks whether (x,y) is near the curve.

Parameters:
{Number} x
  Coordinate in x direction, screen coordinates.
{Number} y
  Coordinate in y direction, screen coordinates.
{Number} start
  Optional start index for search on data plots.

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

<private> {function} interpolationFunctionFromArray(which)
Generate the method curve.X() in case curve.dataX is an array and generate the method curve.Y() in case curve.dataY is an array.

Parameters:
{String} which
  Either 'X' or 'Y'

Returns:
  {function}

{Number} maxX()
Gives the default value of the right bound for the curve. May be overwritten in JXG.Curve#generateTerm.

Returns:
  {Number} Right bound for the curve.

{Number} minX()
Gives the default value of the left bound for the curve. May be overwritten in JXG.Curve#generateTerm.

Returns:
  {Number} Left bound for the curve.

{JXG.Curve} moveTo(where)
Shift the curve by the vector 'where'.

Parameters:
{Array} where
  Array containing the x and y coordinate of the target location.

Returns:
  {JXG.Curve} Reference to itself.

notifyParents(contentStr)
Finds dependencies in a given term and notifies the parents by adding the dependent object to the found objects child elements.

Parameters:
{String} contentStr
  String containing dependencies for the given object.

{JXG.Curve} update()
Computes for equidistant points on the x-axis the values of the function

Returns:
  {JXG.Curve} Reference to the curve object.

See:
  JXG.Curve#updateCurve

{JXG.Curve} updateCurve()
Computes the curve path

Returns:
  {JXG.Curve} Reference to the curve object.

See:
  JXG.Curve#update

updateDataArray()
For dynamic dataplots updateCurve can be used to compute new entries for the arrays JXG.Curve#dataX and JXG.Curve#dataY. It is used in JXG.Curve#updateCurve. Default is an empty method, can be overwritten by the user.

Examples:

    // This example overwrites the updateDataArray method.
    // There, new values for the arrays JXG.Curve.dataX and JXG.Curve.dataY
    // are computed from the value of the slider N

    var N = board.create('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});
    var circ = board.create('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2,
    		fillColor:'#0055ff13'});

    var c = board.create('curve', [[0],[0]],{strokecolor:'red', strokeWidth:2});
    c.updateDataArray = function() {
            var r = 1, n = Math.floor(N.Value()),
                x = [0], y = [0],
                phi = Math.PI/n,
                h = r*Math.cos(phi),
                s = r*Math.sin(phi),
                i, j,
                px = 0, py = 0, sgn = 1,
                d = 16,
                dt = phi/d,
                pt;

            for (i = 0; i < n; i++) {
                for (j = -d; j <= d; j++) {
                    pt = dt*j;
                    x.push(px + r*Math.sin(pt));
                    y.push(sgn*r*Math.cos(pt) - (sgn-1)*h*0.5);
                }
                px += s;
                sgn *= (-1);
            }
            x.push((n - 1)*s);
            y.push(h + (sgn - 1)*h*0.5);
            this.dataX = x;
            this.dataY = y;
        }

    var c2 = board.create('curve', [[0],[0]],{strokecolor:'red', strokeWidth:1});
    c2.updateDataArray = function() {
            var r = 1, n = Math.floor(N.Value()),
                px = circ.midpoint.X(), py = circ.midpoint.Y(),
                x = [px], y = [py],
                phi = Math.PI/n,
                s = r*Math.sin(phi),
                i, j,
                d = 16,
                dt = phi/d,
                pt = Math.PI*0.5+phi;

            for (i = 0; i < n; i++) {
                for (j= -d; j <= d; j++) {
                    x.push(px + r*Math.cos(pt));
                    y.push(py + r*Math.sin(pt));
                    pt -= dt;
                }
                x.push(px);
                y.push(py);
                pt += dt;
            }
            this.dataX = x;
            this.dataY = y;
        }
        board.update();

    // This is an example which overwrites updateDataArray and produces
    // a Bezier curve of degree three.
    var A = board.create('point', [-3,3]);
    var B = board.create('point', [3,-2]);
    var line = board.create('segment', [A,B]);

    var height = 0.5; // height of the curly brace

    // Curly brace
    var crl = board.create('curve', [[0],[0]], {strokeWidth:1, strokeColor:'black'});
    crl.bezierDegree = 3;
    crl.updateDataArray = function() {
        var d = [B.X()-A.X(), B.Y()-A.Y()],
            dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
            mid = [(A.X()+B.X())*0.5, (A.Y()+B.Y())*0.5];

        d[0] *= height/dl;
        d[1] *= height/dl;

        this.dataX = [ A.X(), A.X()-d[1], mid[0], mid[0]-d[1], mid[0], B.X()-d[1], B.X() ];
        this.dataY = [ A.Y(), A.Y()+d[0], mid[1], mid[1]+d[0], mid[1], B.Y()+d[0], B.Y() ];
    };

    // Text
    var txt = board.create('text', [
                        function() {
                            var d = [B.X()-A.X(), B.Y()-A.Y()],
                                dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
                                mid = (A.X()+B.X())*0.5;

                            d[1] *= height/dl;
                            return mid-d[1]+0.1;
                        },
                        function() {
                            var d = [B.X()-A.X(), B.Y()-A.Y()],
                                dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
                                mid = (A.Y()+B.Y())*0.5;

                            d[0] *= height/dl;
                            return mid+d[0]+0.1;
                        },
                        function() { return "length=" + JXG.toFixed(B.Dist(A), 2); }
                    ]);

    board.update(); // This update is necessary to call updateDataArray the first time.

{JXG.Curve} updateRenderer()
Updates the visual contents of the curve.

Returns:
  {JXG.Curve} Reference to the curve object.

{JXG.Point} updateTransform(p)
Applies the transformations of the curve to the given point `p`. Before using it, JXG.Curve#updateTransformMatrix has to be called.

Parameters:
{JXG.Point} p

Returns:
  {JXG.Point} The given point.

{Number} X(t, suspendUpdate)
The parametric function which defines the x-coordinate of the curve.

Parameters:
{Number} t
  A number between JXG.Curve#minX and JXG.Curve#maxX.
{Boolean} suspendUpdate
  A boolean flag which is false for the first call of the function during a fresh plot of the curve and true for all subsequent calls of the function. This may be used to speed up the plotting of the curve, if the e.g. the curve depends on some input elements.

Returns:
  {Number} x-coordinate of the curve at t.

{Number} Y(t, suspendUpdate)
The parametric function which defines the y-coordinate of the curve.

Parameters:
{Number} t
  A number between JXG.Curve#minX and JXG.Curve#maxX.
{Boolean} suspendUpdate
  A boolean flag which is false for the first call of the function during a fresh plot of the curve and true for all subsequent calls of the function. This may be used to speed up the plotting of the curve, if the e.g. the curve depends on some input elements.

Returns:
  {Number} y-coordinate of the curve at t.

{Number} Z(t)
Treat the curve as curve with homogeneous coordinates.

Parameters:
{Number} t
  A number between JXG.Curve#minX and JXG.Curve#maxX.

Returns:
  {Number} Always 1.0