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

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>
<script type="text/javascript" src="jsxgraphcore.js"></script>

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

 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.

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

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



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

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)
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',[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.