WARNING:
MathJax requires JavaScript to process the mathematics on this page.
Please be sure that it is enabled.

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:

This ‘Getting Started’ information is summarized from How to Include JSXGraph into Web Pages.
You need two files, which are available from the JSXGraph web site (top of the page).
Click on each link; select and copy the entire file; paste into a text document; save with the same name.

To load these two files, insert the following code into the head of your HTML document, changing the file path as needed:

<head>
<link rel="stylesheet" type="text/css" href="jsxgraph.css" />
<script type="text/javascript" src="jsxgraphcore.js"></script>
</head>

Making a JSXGraph construction appear in a web page typically has three parts.
The coloring should help to show related parts of the code:
1. Create a div element with an identifying id at the desired location in the HTML document;
  this will hold the JSXGraph construction.
  For example:
```
<div id="box" class="jxgbox" style="width:600px; height:300px;"></div>
```
  Different div elements will have different IDs; you can have as many as needed (e.g., box1, box2, box3)
  Set the height and width of the bounding box; add additional style information, as desired.
2. Create a JavaScript variable that initializes the construction with the desired axes, and tells where to put it:
```
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box',{originX:50, originY:250, unitX:50, unitY:10, axis:true});
</script>
```
  This JavaScript code is placed in the HTML body, anywhere after the div that it loads into.
  ‘originX’ is measured in pixels from the left edge of bounding box;
  ‘originY’ is measured in pixels from the top edge of bounding box.
  ‘unitX’ determines the number of pixels for one unit on the $x$-axis;
  ‘unitY’ determines the number of pixels for one unit on the $y$-axis.
  ‘axis:true’ causes the axes to be visible; the default value is: axis:false
  Regardless of axis visibility, placement of objects (e.g., plotting points) is done according to the axes set-up.
  Board attributes are more fully discussed here.
3. Add different elements to the board, as desired.
  For example, a point can be added with this JavaScript:
```
board.create('point',[1,5]);
```
NOTE: You should ‘free’ a board before re-initializing it (i.e., before using the initBoard command again).
This is like ‘erasing’ a board.
For example: JXG.JSXGraph.freeBoard(board);

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.

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

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});

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.

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.

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.

	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]);