Loading [MathJax]/jax/output/CommonHTML/jax.js
 

JSXGraph Commands

Jump to the alphabetical list of commands

JSXGraph fills all my dynamic graphing needs.
This document is my attempt to thoroughly understand all its capabilities;
it is similar to my TeX Commands Available in MathJax document (JSXGraph and MathJax co-exist beautifully).

These web pages document version 0.83.
There may be differences with newer versions.

JSXGraph commands are listed alphabetically on these pages, each with a brief description and example.
The examples are typically high-school level mathematics;
some are contrived to illustrate particular features, and may not represent typical usage.
I have had to split this document into several pages; I obtained errors when there were too many boards on the same page.
This page contains commands A through D.

GETTING STARTED:

See the results of this sample code (and variations) by clicking the buttons below.
Be sure to ‘erase’ the board each time!
Additionally, you are encouraged to view the source code of this web page to see how things work.

board = JXG.JSXGraph.freeBoard(board);
board = JXG.JSXGraph.initBoard('box',{originX:50, originY:250, unitX:50, unitY:10, axis:true}); board.create('point',[1,5]);
board = JXG.JSXGraph.initBoard('box',{originX:50, originY:250, unitX:50, unitY:10}); board.create('point',[1,5]);
board = JXG.JSXGraph.initBoard('box',{originX:300, originY:150, unitX:100, unitY:1, axis:true}); board.create('point',[1,5]);

Click the buttons above to try out different sample codes.
Or, type in your own sample code below.
Each time, be sure to erase the board first.

JSXGraph v0.82rc12 Copyright (C) see http://jsxgraph.org
 –  o  +  ←  ↑  ↓  → 


 

Alphabetical List of JSXGraph Commands

A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z
Also see:
Board Attributes
General JSXGraph Attributes

Unless otherwise indicated, all JSXGraph examples below use the following box and board:

<div id="box" style="width:200px; height:200px;"></div>

JXG.JSXGraph.initBoard('box',{originX:25, originY:175, unitX:25, unitY:25, axis:true, showNavigation:false, showCopyright:false});

A
angle an angle defined by three points;
visually gives a sector with radius optionally defined by the   radius   attribute (see example);
default value of radius is 1
board.create('angle',[point1,point2,point3]);
The angle is drawn counterclockwise:
from   point1   to   point2 (vertex)   to   point3

Examples:
p1 = board.create('point',[5,1],{name:'p1'});
p2 = board.create('point',[2,3],{name:'p2'});
p3 = board.create('point',[6,6],{name:'p3'});
board.create('angle',[p1,p2,p3],{name:''});
Note that the sector has radius 1 (the default value).

Note: Different  <script type="text/javascript">  containers on the same web page all draw on the same variable space, so you should use unique variable names for each JSXGraph construction.
For simplicity, however, I use the same simple names for all sample code in this document.
yields
-10
-5
5
-10
-5
5
p1
p2
p3
p1 = board.create('point',[5,1],{name:'p1'});
p2 = board.create('point',[2,3],{name:'p2'});
p3 = board.create('point',[6,6],{name:'p3'});
sector = board.create('angle',[p3,p2,p1],{name:''});
board.create('text',[0.5,1,
  'radius of circle<br />is '+sector.Radius().toFixed(1)]);
Note that the angle is drawn counterclockwise.
yields
-10
-5
5
-10
-5
5
p1
p2
p3
radius of circle
is 1.0
p1 = board.create('point',[5,1],{name:'p1'});
p2 = board.create('point',[2,3],{name:'p2'});
p3 = board.create('point',[6,6],{name:'p3'});
board.create('angle',[p1,p2,p3],{radius:3, fillColor:'green', name:''});
yields
-10
-5
5
-10
-5
5
p1
p2
p3
The JSXGraph Reference lists all possible attributes and methods for this element.

see also:   sector
arc a segment of the circumference of a circle;
defined by three points:
  • the center of a circle (centerOfCirclePoint)
  • a point that defines the radius of the circle (radiusPoint)
  • a point that defines the angle of the arc (anglePoint)
board.create('arc',[centerOfCirclePoint,radiusPoint,anglePoint]);
The arc is constructed as follows:
  • start at   radiusPoint   on the circle with center   centerOfCirclePoint
  • draw the arc counterclockwise, ending at   anglePoint
Examples:
p1 = board.create('point',[3,3],{name:'p1'});
p2 = board.create('point',[1,3],{name:'p2'});
p3 = board.create('point',[5,3],{name:'p3'});
board.create('arc',[p1,p2,p3]);
Note that the arc is drawn counterclockwise from  p2  to  p3.
yields
-10
-5
5
-10
-5
5
p1
p2
p3
p1 = board.create('point',[3,3],{name:'p1'});
p2 = board.create('point',[1,3],{name:'p2'});
p3 = board.create('point',[5,3],{name:'p3'});
board.create('arc', [p1, p3, p2]).setDash(2);
Note that the arc is drawn counterclockwise from  p3  to  p2.

This example illustrates how a method can be applied to an object
at the same time it is created.
yields
-10
-5
5
-10
-5
5
p1
p2
p3
p1 = board.create('point',[3,3],{name:'p1'});
p2 = board.create('point',[1,3],{name:'p2'});
p3 = board.create('point',[5,1],{name:'p3'});
board.create('arc',[p1,p2,p3],
  {strokeColor:'green',firstArrow:true,lastArrow:true});
Note:   If   anglePoint   does not lie on the circle defined by
centerOfCirclePoint   and   radiusPoint  ,
then the arc ends at the intersection of:
  • the circle
  • the line segment between   centerOfCirclePoint   and   anglePoint
Note also how you can add arrows to the beginning and/or end of an arc.
yields
-10
-5
5
-10
-5
5
p1
p2
p3
The JSXGraph Reference lists all possible attributes and methods for this element.
arrow an arrow from   startPoint   to   endPoint
board.create('arrow',[startPoint,endPoint]);
Examples:
p1 = board.create('point',[0,0],{visible:false});
p2 = board.create('point',[5,5],{visible:false});
theArrow = board.create('arrow',[p1,p2]);
theSlope = theArrow.getSlope();
boardArrow.create('text',[2,1,'the slope is '+theSlope]);
or, equivalently (more compactly):
theArrow = board.create('arrow',[[0,0],[5,5]]);
board.create('text',[2,1,'the slope is '+theArrow.getSlope()]);
yields
-10
-5
5
-10
-5
5
the slope is 1
board.create('arrow',[[0,1],[6,1]],{dash:1});
board.create('arrow',[[0,2],[6,2]],{dash:2});
board.create('arrow',[[0,3],[6,3]],{dash:3});
board.create('arrow',[[0,4],[6,4]],{dash:4});
board.create('arrow',[[0,5],[6,5]],{dash:5});
board.create('arrow',[[0,6],[6,6]],{dash:6, strokeColor:'red'});
Different dot/dash styles are available;
dash:0   is a solid line (the default).
yields
-10
-5
5
-10
-5
5
board.create('arrow',[[1,0],[1,5]],{strokeWidth:1});
board.create('arrow',[[2,0],[2,5]],{strokeWidth:2});
board.create('arrow',[[3,0],[3,5]],{strokeWidth:3});
board.create('arrow',[[4,0],[4,5]],{strokeWidth:4});
board.create('arrow',[[5,0],[5,5]],{strokeWidth:5});
board.create('arrow',[[6,0],[6,5]],{strokeWidth:6});
Different stroke widths are available;
note how the arrow size differs with the stroke width.
yields
-10
-5
5
-10
-5
5
The JSXGraph Reference lists all possible attributes and methods for this element.
arrowparallel an arrow through a given point, parallel to a given line
board.create('arrowparallel',[line,point]);
When   line   is created by
board.create('line',[p1,p2]);
then the direction of the parallel arrow is from  p1  to  p2,
and the length is the distance from  p1  to  p2.

Examples:
p1 = board.create('point',[1,2],{name:'p1'});
p2 = board.create('point',[3,4],{name:'p2'});
line = board.create('line',[p1,p2]);
point = board.create('point',[3,2],{name:'point'});
board.create('arrowparallel',[line,point]);
Note that the direction of the parallel arrow is from  p1  to  p2,
and the length is the distance from  p1  to  p2.
yields
-10
-5
5
-10
-5
5
p1
p2
point
p1 = board.create('point',[1,2],{name:'p1'});
p2 = board.create('point',[3,4],{name:'p2'});
line = board.create('line',[p2,p1]);
point = board.create('point',[3,2],{name:'point'});
arrow = board.create('arrowparallel',[line,point]);
board.create('text',[3,1,function(){
  return 'slope = '+arrow.getSlope().toFixed(2)}]);
Note that the direction of the parallel arrow is from  p2  to  p1.
Information (like the slope) that is to be updated dynamically
must be put inside an anonymous function, as shown in this example.
yields
-10
-5
5
-10
-5
5
p1
p2
point
slope = 1.00
The JSXGraph Reference lists all possible attributes and methods for this element.
axis an axis through two point with default ticks;
the first point becomes the origin of the axis
board.create('axis',[point1,point2]);

Examples:
p1 = board.create('point',[1,1],{name:'p1'});
p2 = board.create('point',[4,6],{name:'p2'});
board.create('axis',[p1,p2]);
Note that the first point becomes the origin (the zero value) of the axis.
yields
-10
-5
5
-10
-5
5
p1
p2
-10
-5
5
board = JXG.JSXGraph.initBoard('boxAxis',
  {originX:25, originY:175, unitX:1, unitY:25,
   axis:true, showNavigation:false, showCopyright:false});
board.create('axis',[[0,0],[50,2]],{strokeColor:'red'});
board.create('axis',[[0,0],[50,1]],{strokeColor:'blue'});
When the points are given as arrays, then the points are invisible.
The ticks are ‘inherited’ from the horizontal axis.
yields
-100
-50
50
100
150
-10
-5
5
-100
-50
50
100
150
-100
-50
50
100
150
theAxis = board.create('axis',[[0,3],[1,3]],{drawLabels:false});
theAxis.removeAllTicks();
The default ticks and labels can be removed, if desired.
Labels are removed by setting the  drawLabels  attribute to  false .
Ticks are removed by using the  removeAllTicks()  method.
yields
-10
-5
5
-10
-5
5
JXG.JSXGraph.initBoard('box',{originX:25, originY:175, unitX:25, unitY:25,
  axis:true, showNavigation:false, showCopyright:false});
theAxis = board.create('axis',[[0,3],[1,3]],{drawLabels:false});
theAxis.removeAllTicks();
board.createElement('ticks',[theAxis,10],
  {minorTicks:9, majorTickHeight:20, minorTickHeight:8});
Once ticks and labels are removed, you can add new ones by creating a ticks element.
In the example above:
  • each unit of the board axis (25 pixels) becomes 10 units on  theAxis
  • there are 9 minor ticks between major ticks
  • the major tick height is 20 pixels
  • the minor tick height is 8 pixels
yields
-10
-5
5
-10
-5
5
-100
-50
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
The JSXGraph Reference lists all possible attributes and methods for this element.
B
bisector a half-line which divides an angle into two equal angles;
it starts at the vertex and is inside the angle
board.create('bisector',[point1,vertexPoint,point2]);
The angle to be bisected is drawn counterclockwise:
from   point1   to   vertexPoint   to   point2

Examples:
p1 = board.create('point',[4,0],{name:'p1'});
vertex = board.create('point',[0,0],{name:'vertex'});
p2 = board.create('point',[0,4],{name:'p2'});
angleBisector = board.create('bisector',[p1,vertex,p2]);
board.create('text',[1,3,
  function(){return 'slope is '+angleBisector.getSlope().toFixed(2)}]);
yields
-10
-5
5
-10
-5
5
p1
vertex
p2
slope is 1.00
The JSXGraph Reference lists all possible attributes and methods for this element.
bisectorlines given two intersecting lines,
 bisectorlines  creates another pair of intersecting lines that bisect the given lines
board.create('bisectorlines',[line1,line2]);
Examples:
board = JXG.JSXGraph.initBoard('box',{originX:100, originY:100,
  unitX:25, unitY:25, axis:true,
  showNavigation:false, showCopyright:false});
line1 = board.create('line',[[0,0],[0,1]],{color:'green'});
line2 = board.create('line',[[0,0],[1,0]],{color:'red'});
board.create('bisectorlines',[line1,line2],
  {color:'purple', strokeWidth:3});
yields
-10
-5
-10
-5
The JSXGraph Reference lists all possible attributes and methods for this element.
C
circle the set of all points that are equidistant from a fixed point, called the center;
can be constructed in four ways:
board.create('circle',[centerPoint,pointOnCircle]);
board.create('circle',[centerPoint,radiusOfCircle]);
board.create('circle',[centerPoint,circleWithDesiredRadius]);
board.create('circle',[point1,point2,point3]);
In the first three cases:
  • the first argument is the center of the circle;
  • the second argument can be: a point on the circle; the radius of the circle; another circle that has the desired radius
In the fourth case, you can provide three noncollinear points, which uniquely determine the circle.
Examples:
center = board.create('point',[3,3],{name:'center'});
ptOnCir = board.create('point',[4,5],{name:'ptOnCir'});
board.create('circle',[center,ptOnCir]);
yields
-10
-5
5
-10
-5
5
center
ptOnCir
theCircle = board.create('circle',[[3,3],[4,5]]);
board.create('text',[1,6.5,'the radius is '+theCircle.Radius()]);
When the points are given as arrays, then they are invisible.
yields
-10
-5
5
-10
-5
5
the radius is 2.23606797749979
center = board.create('point',[3,3],
  {name:'',face:'cross',color:'black'});
theCircle = board.create('circle',[center,1],
  {fillColor:'purple',strokeColor:'green',strokeWidth:4});
When the second argument is a number, then it is interpreted as the radius.
A name that (would be) automatically generated is suppressed
by setting  name  to an empty string.
yields
-10
-5
5
-10
-5
5
circle1 = board.create('circle',[[3,3],[4,3]],{color:'purple'});
circle2 = board.create('circle',[[5,3],circle1],
  {fillcolor:'yellow',strokeColor:'green'});
When the second argument is a circle, then its radius is used for the circle being created.
Note that the  color  attribute sets both the fill and stroke color simultaneously.
yields
-10
-5
5
-10
-5
5
p1 = board.create('point',[2,1],{name:'p1',size:2});
p2 = board.create('point',[2,5],{name:'p2',size:2});
p3 = board.create('point',[4,3],{name:'p3',size:2});
board.create('circle',[p1,p2,p3],
  {strokeColor:'purple'});
You can drag  p1,  p2, or  p3,
and see the circle change dynamically.
yields
-10
-5
5
-10
-5
5
p1
p2
p3
The JSXGraph Reference lists all possible attributes and methods for this element.
circumcenter given three noncollinear points,
creates the center of the unique circle that passes through the three points;
the center of the circle that circumscribes a triangle
board.create('circumcenter',[point1,point2,point3]);
Examples:
p1 = board.create('point',[2,1],{name:'',size:1});
p2 = board.create('point',[2,5],{name:'',size:1});
p3 = board.create('point',[4,3],{name:'',size:1});
board.create('polygon',[p1,p2,p3]);
board.create('circle',[p1,p2,p3]);
board.create('circumcenter',[p1,p2,p3],
  {trace:true, name:'', color:'green'});
You can drag  p1,  p2, or  p3,
and see the circle and circumcenter change dynamically.
Note how the circumcenter is traced.
yields
-10
-5
5
-10
-5
5
The JSXGraph Reference lists all possible attributes and methods for this element.
circumcirclesector three noncollinear points uniquely determine a circle;
circumcirclesector  yields the sector of that circle generated by:
  • starting at  point1
  • passing through  point2
  • ending at  point3
board.create('circumcirclesector',[point1,point2,point3]);
Examples:
p1 = board.create('point',[2,1],{name:'p1'});
p2 = board.create('point',[2,5],{name:'p2'});
p3 = board.create('point',[4,3],{name:'p3'});
board.create('circumcirclesector',[p1,p2,p3]);
yields
-10
-5
5
-10
-5
5
p1
p2
p3
p1 = board.create('point',[2,1],{name:'p1'});
p2 = board.create('point',[2,5],{name:'p2'});
p3 = board.create('point',[4,3],{name:'p3'});
board.create('circumcirclesector',[p2,p1,p3]);
yields
-10
-5
5
-10
-5
5
p1
p2
p3
p1 = board.create('point',[2,1],{name:'p1'});
p2 = board.create('point',[2,5],{name:'p2'});
p3 = board.create('point',[4,3],{name:'p3'});
center = board.create('circumcenter',[p1,p2,p3],{name:'center'});
board.create('arc',[center,p2,p3]);
circumcirclearc  doesn't seem to work;
to create the arc, first find  circumcenter  and then use  arc 
yields
-10
-5
5
-10
-5
5
p1
p2
p3
center
conic Every equation of the form Ax2+Bxy+Cy2+Dx+Ey+F=0
graphs as a conic section (possibly degenerate) in the xy plane.
The expression B24AC determines the type of conic section:
  • B24AC>0 yields a hyperbola
  • B24AC=0 yields a parabola
  • B24AC<0 yields an ellipse
Note: a degenerate form of a conic section may result.
For example, if A=B=C=0 then the resulting equation is a line, which is a degenerate form of a parabola.
Five points, no three of which are collinear, uniquely determine a nondegenerate conic.
board.create('conic',[point1,point2,point3,point4,point5]);
Example:
p1 = board.create('point',[0,0],{name:'p1'});
p2 = board.create('point',[1,1],{name:'p2'});
board.create('line',[p1,p2],{strokeWidth:1, color:'yellow'});
p3 = board.create('point',[2,3],{name:'p3'});
p4 = board.create('point',[3,4],{name:'p4'});
p5 = board.create('point',[4,1],{name:'p5'});
board.create('conic',[p1,p2,p3,p4,p5],
  {strokeWidth:4,strokeColor:'green'});
Drag the points around to see the curves that result.
Note that if three or more points lie on the yellow line, then the conic disappears.
yields
-10
-5
5
-10
-5
5
p1
p2
p3
p4
p5

Matrix representation of the Conic Equation

By multiplying out, you can verify that the equation Ax2+Bxy+Cy2+Dx+Ey+F=0 can be written in matrix form as: [xy1]:=M[AB/2D/2B/2CE/2D/2E/2F][xy1]=0 Since the matrix M is symmetric, it is uniquely defined by a11=Aa22=Ca33=Fa21=B/2a31=D/2a32=E/2 and these six matrix entries (in this order) can be used to create a conic:
board.create('conic',[a11,a22,a33,a21,a31,a32]);
Example:
board.create('conic',[9,4,-11,0,-9,-8]);
The ellipse (x1)24+(y2)29=1 multiplies out to 9x2+4y218x16y11=0 so that A=9, B=0, C=4, D=18, E=16, F=11 .
yields
-10
-5
5
-10
-5
5
The JSXGraph Reference lists all possible attributes and methods for this element.
curve This command can be used to create parametric curves, polar curves, and piecewise-linear data graphs.

PARAMETRIC CURVES:
A parametric curve is a curve swept out in time; the point at time t is (x(t),y(t)).
board.create('curve',[x,y,a,b]);
The coordinates x=x(t) and y=y(t) are given as functions terms.
The graph is drawn for t in the interval [a,b], with default values a=10 and b=10.

Examples:
the curve (3cost,3sint), for t[0,π2]
board.create('curve', 
  [function(t){return 3*Math.cos(t);}, 
  function(t){ return 3*Math.sin(t);},
  0,Math.PI/2]);
yields
-10
-5
5
-10
-5
5
To create a function of one variable, y=f(x),
just make the first function term the identity function.
(Alternately, use the functiongraph command.)
board.create('point',[0,1],{color:'black',name:'',size:3});
board.create('point',[2,1],
  {color:'black',name:'',size:3,fillColor:'white'});
board.create('curve', 
  [function(x){return x;}, 
  function(x){ return 1;},
  0,2]);
board.create('point',[5,3],{color:'black',name:'',size:3});
board.create('curve',
  [function(x){return x;}, 
  function(x){ return (-2/9)*(x-5)*(x-5)+3;},
  2,5]);
yields
-10
-5
5
-10
-5
5


POLAR CURVES:
In a polar coordinate system, the position of each point is determined by its distance r from an ‘origin’,
and its angle θ (counterclockwise, measured in radians) from the horizontal-right direction.
Use the following syntax for a polar curve r=f(θ):
board.create('curve',[functionOfTheta,[xOrigin,yOrigin],optBegValTheta,optEndValTheta]);
The first argument is a function term r(θ) describing the polar curve.
The second argument is the (cartesian coordinate) origin of the curve; use [0,0] for no offset.
The remaining two arguments give the beginning and end values for θ; the defaults values are 0 and 2π.

Example:
the green curve is r=θ, for θ[0,2π]
the purple curve is r=θ, with origin (5,5), for θ[0,π]
the blue curve is r=θ, with origin (5,5), for θ[π,π]
board.create('curve', 
  [function(theta){return theta;},
  [-5,-5],0,Math.PI],{strokeColor:'purple'});
board.create('curve', 
  [function(theta){return theta;},
  [0,0]],{strokeColor:'green'});
board.create('curve', 
  [function(theta){return theta;},
  [5,5],-Math.PI,Math.PI]);
In the green curve, the default values are used for the beginning and end values of θ.
yields
-30
-20
-10
10
-30
-20
-10
10


PIECEWISE-LINEAR DATA GRAPHS:
A collection of cartesian-coordinate points are connected with line segments;
the x-values and y-values are held in separate arrays.
board.create('curve',[xArray,yArray]);
Example:
/* want points (0,0), (1,2), (2,1), (3,4), (5,0) */
x = [0,1,2,3,5];
y = [0,2,1,4,0];
board.create('curve',[x,y],
  {dash:1,firstArrow:true,lastArrow:true}); 
JavaScript comments can be included between  /*  and  */ .
Different line styles can be used to connect the points; the default is a solid line.
Arrows can be added at the beginning and/or end of a curve.
yields
-10
-5
5
-10
-5
5
The JSXGraph Reference lists all possible attributes and methods for this element.
last modified
03/06/2023 18:04:12
copyright 2004–2022
Dr. Carol JVF Burns

Powered by MathJax and JSXGraphCreative Commons License
Please read my
TERMS OF USE