# JSXGraph 1.11.1 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

- Angle
- Arc
- Arrow
- Arrowparallel
- Axes3D
- Axis
- Axis3D
- Bisector
- Bisectorlines
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circle3D
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Curve
- Curve3D
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- Face3D
- ForeignObject
- Functiongraph
- Functiongraph3D
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- ImplicitCurve
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- IntersectionCircle3D
- IntersectionLine3D
- Label
- Legend
- Line
- Line3D
- MajorArc
- MajorSector
- Measurement
- Mesh3D
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- MirrorElement
- MirrorPoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelogram
- Parallelpoint
- ParametricSurface3D
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Plane3D
- Point
- Point3D
- PolarLine
- PolePoint
- Polygon
- Polygon3D
- PolygonalChain
- Polyhedron3D
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopefield
- Slopetriangle
- Smartlabel
- Sphere3D
- Spline
- Stepfunction
- Tangent
- TangentTo
- Tapemeasure
- Text
- Text3D
- Ticks
- Ticks3D
- Tracecurve
- Transformation
- Transformation3D
- Turtle
- Vectorfield
- Vectorfield3D
- View3D

Classes

- _global_
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.Board.infobox
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Chart
- JXG.Circle
- JXG.Circle3D
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Curve3D
- JXG.Dump
- JXG.EventEmitter
- JXG.Expect
- JXG.Face3D
- JXG.ForeignObject
- JXG.GeometryElement
- JXG.GeometryElement3D
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Legend
- JXG.Line
- JXG.Line3D
- JXG.Math
- JXG.Math.BoxQuadtree
- JXG.Math.Clip
- JXG.Math.Extrapolate
- JXG.Math.Geometry
- JXG.Math.ImplicitPlot
- 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.NoRenderer
- JXG.Options
- JXG.Plane3D
- JXG.Point
- JXG.Point3D
- JXG.Polygon
- JXG.Polygon3D
- JXG.PrefixParser
- JXG.Sphere3D
- JXG.Surface3D
- JXG.SVGRenderer
- JXG.Text
- JXG.Text3D
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.View3D
- JXG.VMLRenderer
- JXG.XML

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

Attributes Summary
Field Attributes | Field Name and Description
--- | ---
| lineCap Line endings (linecap) of a curve stroke.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, aria, baseElement, board, childElements, cssClass, dash, dashScale, descendants, draft, dragToTopOfLayer, dump, element3D, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlightCssClass, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isLabel, isReal, lastDragTime, layer, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, nonnegativeOnly, notExistingParents, numTraces, parents, precision, priv, quadraticform, rendNode, rotatable, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, transitionProperties, 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 quadtree 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, aria, baseElement, board, childElements, cssClass, dash, dashScale, descendants, draft, dragToTopOfLayer, dump, element3D, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlightCssClass, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isLabel, isReal, lastDragTime, layer, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, nonnegativeOnly, notExistingParents, numTraces, parents, precision, priv, quadraticform, rendNode, rotatable, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, transitionProperties, 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.
| getLabelPosition(pos, distance) Position a curve label according to the attributes "position" and distance.
<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, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale

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

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 function terms or the data points of the curve.
{Object} attributes
  Defines the visual appearance of the curve.

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

Attribute Detail
{String} lineCap
Line endings (linecap) of a curve stroke. Possible values are:

- 'butt',
- 'round',
- 'square'.

Defined in: options.js.

Default Value:
  'round'

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 quadtree if it is required. The quadtree 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(). If mi or ma are not supplied, default functions are set.

Parameters:
{String} varname
  Name of the parameter in xterm and yterm, e.g. 'x' or 't'
{String|Number|Function|Array} xterm
  Term for the x coordinate. Can also be an array consisting of discrete values.
{String|Number|Function|Array} yterm
  Term for the y coordinate. Can also be an array consisting of discrete values.
{String|Number|Function} mi Optional
  Lower bound on the parameter
{String|Number|Function} ma Optional
  Upper bound on the parameter

See:
  JXG.GeonextParser.geonext2JS

{JXG.Coords} getLabelPosition(pos, distance)
Position a curve label according to the attributes "position" and distance. This function is also used for angle, arc and sector.

Parameters:
{String} pos
{Number} distance

Returns:
  {JXG.Coords}

<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

Documentation generated by JsDoc Toolkit 2.4.0 on Fri Apr 04 2025 09:22:40 GMT+0200 (Mitteleuropäische Sommerzeit)