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.

Every command available in JSXGraph is 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.



 

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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
conic Every equation of the form $Ax^2 + Bxy + Cy^2 + Dx + Ey + F = 0$
graphs as a conic section (possibly degenerate) in the $xy$ plane.
The expression $B^2 - 4AC$ determines the type of conic section:
  • $B^2 - 4AC > 0$ yields a hyperbola
  • $B^2 - 4AC = 0$ yields a parabola
  • $B^2 - 4AC < 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

Matrix representation of the Conic Equation

By multiplying out, you can verify that the equation $\,Ax^2 + Bxy + Cy^2 + Dx + Ey + F = 0\,$ can be written in matrix form as: $$ \begin{bmatrix} x & y & 1 \end{bmatrix} \cdot \overbrace{ \begin{bmatrix} A & B/2 & D/2 \cr B/2 & C & E/2 \cr D/2 & E/2 & F \cr \end{bmatrix}}^{:= M} \cdot \begin{bmatrix} x \cr y \cr 1 \end{bmatrix} = 0 $$ Since the matrix $\,M\,$ is symmetric, it is uniquely defined by $$ \begin{gather} a_{11} = A\cr a_{22} = C\cr a_{33} = F\cr a_{21} = B/2\cr a_{31} = D/2\cr a_{32} = E/2 \end{gather} $$ and these six matrix entries (in this order) can be used to create a conic:
board.create('conic',[$a_{11}$,$a_{22}$,$a_{33}$,$a_{21}$,$a_{31}$,$a_{32}$]);
Example:
board.create('conic',[9,4,-11,0,-9,-8]);
The ellipse $$\frac{(x-1)^2}{4} + \frac{(y-2)^2}{9} = 1$$ multiplies out to $$9x^2 + 4y^2 - 18x - 16y - 11 = 0$$ so that $$A = 9,\ B = 0,\ C = 4,\ D = -18,\ E = -16,\ F = -11\ .$$
yields
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 $\,(3\cos t,3\sin t)\,$, for $t\in [0,\frac{\pi}2]$
board.create('curve', 
  [function(t){return 3*Math.cos(t);}, 
  function(t){ return 3*Math.sin(t);},
  0,Math.PI/2]);
yields
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


POLAR CURVES:
In a polar coordinate system, the position of each point is determined by its distance $\,r\,$ from an ‘origin’,
and its angle $\,\theta\,$ (counterclockwise, measured in radians) from the horizontal-right direction.
Use the following syntax for a polar curve $\,r = f(\theta)\,$:
board.create('curve',[functionOfTheta,[xOrigin,yOrigin],optBegValTheta,optEndValTheta]);
The first argument is a function term $\,r(\theta)\,$ 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 $\,\theta\,$; the defaults values are $\,0\,$ and $\,2\pi\,$.

Example:
the green curve is $\,r=\theta\,$, for $\,\theta\in [0,2\pi]$
the purple curve is $\,r=\theta\,$, with origin $\,(-5,-5)\,$, for $\,\theta\in [0,\pi]$
the blue curve is $\,r=\theta\,$, with origin $\,(5,5)\,$, for $\,\theta\in [-\pi,\pi]$
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 $\theta$.
yields


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
The JSXGraph Reference lists all possible attributes and methods for this element.