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 S through Z.

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

S
sector creates a sector of a circle
board.create('sector',[ptCenter,ptRadius,ptArc]);
where:
  • the first argument,  ptCenter , is the center of the circle
  • the second argument,  ptRadius , is a point on the circle where the sector begins;
    this defines the radius of the circle
  • the third argument,  ptArc , is a point that defines where the sector ends;
    the arc is drawn counterclockwise;
    the arc ends at the intersection of the circle with the ray from  ptCenter  through  ptArc

Example:
ptCen = board.create('point',[3,3],{name:'ptCenter'});
ptRad = board.create('point',[5,3],{name:'ptRadius'});
ptArc = board.create('point',[2,2],{name:'ptArc'});
board.create('sector',[ptCenter,ptRadius,ptArc]);
Move any of the three points, and watch the sector change accordingly.
yields
The JSXGraph Reference lists all possible attributes and methods for this element.
segment creates a line segment
board.create('segment',[ptStart,ptEnd]);
Example:
ptStart = board.create('point',[0,0],{name:'ptStart'});
ptEnd = board.create('point',[5,5],{name:'ptEnd'});
board.create('segment',[ptStart,ptEnd]);
board.create('segment',[ptStart,[2,4],
  {strokeColor:'green',strokeWidth:5,dash:1});
Move either point, and watch the segments change accordingly.
When a point's coordinates are given explicitly, then the point is not shown.
yields
The JSXGraph Reference lists all possible attributes and methods for this element.
semicircle creates a semicircle
board.create('semicircle',[ptStart,ptEnd]);
The midpoint of the segment from  ptStart  to  ptEnd  becomes the center of the circle;
the semicircle is then drawn clockwise from  ptStart  to  ptEnd .

Example:
ptStart = board.create('point',[1,1],{name:'ptStart'});
ptEnd = board.create('point',[4,4],{name:'ptEnd'});
board.create('semicircle',[ptStart,ptEnd]);
Move either point, and watch the semicircle change accordingly.
yields
The JSXGraph Reference lists all possible attributes and methods for this element.
slider creates a slider, which allows a user to easily change numeric values
board.create('slider',[arrayPtStart,arrayPtEnd,[minValue,startValue,maxValue]);
The slider is positioned on the board from  arrayPtStart  (which corresponds to the minimum slider value,  minValue )
to  arrayPtEnd  (which corresponds to the maximum slider value,  maxValue ).
These first two arguments must be explicit arrays,
indicating the coordinates of the desired start point and end point for the slider position.
The slider's starting value is given by  startValue ,
which must be a value in the closed interval from  minValue  to  maxValue .

Examples:
board.create('slider',[[1,3],[4,3],[0,4,10]],{snapWidth:1});
botSlider = board.create('slider',[[1,1],[4,1],[0,4,10]]);
board.create('text',[1,5,
  function(){
    num = botSlider.Value();
    return '<center>the bottom slider value<br />
    is '+num.toFixed(3)+'</center>'}]);
The snapWidth attribute can be used to control the increments between slider values;
the default is to break the total range into 75 equal pieces.

Compare the top slider behavior (with increment $\,1\,$ between slider values) with the bottom slider behavior (with the default increments of $\,\frac{10-0}{75} \approx 0.13\,$).
yields
The JSXGraph Reference lists all possible attributes and methods for this element.
spline creates a cubic spline through a set of points;
this is a piecewise-cubic function, where the function values, first and second derivatives agree at the connecting points;
it provides a ‘least curvy’ way to smoothly connect points;
I believe the second derivative is zero at the endpoints, giving the so-called ‘natural’ cubic spline;
splines only exist ‘within’ their defining points
board.create('spline',[pt1,pt2,pt3,...]);
Example:
pt1 = board.create('point',[1,1]);
pt2 = board.create('point',[2,3]);
pt3 = board.create('point',[3,2]);
pt4 = board.create('point',[4,5]);
board.create('spline',[pt1,pt2,pt3,pt4],
  {strokeColor:'green',strokeWidth:2});
board.create('spline',[[0,0],[1,0],[2,-0.8],[3,0],[4,1]],{dash:2});
polyInt = board.lagrangePolynomial([pt1,pt2,pt3,pt4]);
board.create('functiongraph',polyInt,{dash:1,strokeColor:'red'});
Drag any of the points, and observe the smooth curve that results.
When point coordinate(s) are given explicitly (as in the blue curve),
then the points are not shown.

The dashed red curve is a polynomial interpolate;
it is the unique cubic polynomial that passes through the four points.
Note how it ‘curves’ more than the cubic spline.
yields
T
tangent creates the tangent line to a curve on a glider element;
first create the curve (using, say, functiongraph);
then create a glider point on the curve;
then create the tangent at the glider point
board.create('tangent',[theGlider]);
Examples:
theFct = board.create('functiongraph',
  [function(t){return 2*Math.sin(t) + 3;}]);
theGlider = board.create('glider',[theFct],{name:''});
board.create('tangent', [theGlider]);
Drag the glider point and watch the tangent change accordingly.
yields
theCircle = board.create('circle',[[3,3],2]);
theGlider = board.create('glider',[theCircle],{name:''});
boardtangent2.create('tangent',[theGlider]);
Drag the glider point and watch the tangent change accordingly.
yields
The JSXGraph Reference lists all possible attributes and methods for this element.
text creates text that can move (change position) or not move;
the text itself can be static (non-changing) or dynamic (changing);
you can use HTML/CSS styles on the text;
you can get proper mathematical notation using MathJax
board.create('text',[numxLeft,numyLower,stringText]);
where:
  • the first two arguments give the $x$ and $y$ coordinates of the lower left corner of the text box;
    the position of the text will not change if the coordinate(s) are numbers;
    the position of the text can change if the coordinate(s) are functions
  • the text to display is either a string, or a function that returns a string
  • to use MathJax for proper mathematical notation, you must first include this line:
    JXG.Options.text.useMathJax = true;
    Then, the third argument must be a function that returns a valid MathJax string
Examples:

Non-Moving Non-Changing Styled Text

board.create('text',[0,0,"Hello World!"]);
board.create('text',[1,1,"<em>Hello World</em>!"]);
board.create('text',[2,2,
  "<span style='color:red;background-color:green;
   padding:5pt'>Hello World!</span>"]);
yields

Moving Non-Changing Text

theFct = board.create('functiongraph',
  [function(t){return 0.5*t*t;}]);
theGlider = board.create('glider',[theFct],{name:''});
board.create('text',
  [function(){return 0.5+theGlider.X()},
   function(){return theGlider.Y()},
  'moving text');
Move the glider to see the text move accordingly.
yields

Non-Moving Changing Text

theSlider = board.create('slider',[[1,5],[4,5],[0,5,10]]);
board.create('text',[1,3,function(){
  sqval = theSlider.Value()*theSlider.Value();
  return 'slider value, squared,<br />
    is about '+sqval.toFixed(2)}]);
Change the slider and watch the text change accordingly.
yields

Moving Changing Text

theFct = board.create('functiongraph',
  [function(t){return 0.5*t*t;}]);
theGlider = board.create('glider',[theFct],{name:''});
board.create('text',
  [function(){return 0.5+theGlider.X()},
   function(){return theGlider.Y()},
   function(){return 'function value
is '+theGlider.Y().toFixed(2);}]);
Drag the glider; watch the text move and change accordingly.
As a general rule, whenever you want something to update automatically while interacting with it on a JSXGraph board, then it must be coded as a function.
yields

Using MathJax for Proper Mathematical Notation

JXG.Options.text.useMathJax = true;
theSlider = board.create('slider',[[1,5],[4,5],[0,2,5]],
  {snapWidth:0.5});
board.create('functiongraph',
  [function(t){return Math.pow(Math.E,t-k.Value());}]);
board.create('text',[1,6,
  function(){ 
    return '$f(x) = e^{x-'+theSlider.Value()+'}$';
  }]);
Follow the instructions at MathJax to include the MathJax library in your document.
The first line above is required to enable the use of MathJax in JSXGraph.
Be sure that your code returns valid MathJax syntax (in this example, dollar signs are used to delineate MathJax code).
yields
The JSXGraph Reference lists all possible attributes and methods for this element.
transform creates transformations (translate, scale, reflect, rotate, shear, matrix transform) which can be applied to objects

Basic Example

thePt = board.create('point',[0,0],{name:''});
transform = board.create('transform',[2,1],{type:'translate'});
board.create('text',[.5,6,
  'x-value is '+thePt.X()+' and y-value is '+thePt.Y()]);
transform.applyOnce(thePt);
board.create('text',[.5,5,
  'x-value is '+thePt.X()+' and y-value is '+thePt.Y()]);
transform.applyOnce(thePt);
board.create('text',[.5,4,
  'x-value is '+thePt.X()+' and y-value is '+thePt.Y()]);
The initial position of the point is $\,(0,0)\,$ (top coordinates).
After one application of the translation (right $2$, up $1$), the new coordinates are $\,(2,1)\,.$
After a second application of the translation, the new coordinates are $\,(4,2)\,.$
Note that applying a transformation to a point changes the coordinates of the point,
and hence successive transformations are cumulative.
yields

Translate

Translating a point $\,(x,y)\,$ by $\,(a,b)\,$ yields the new point $\,(x+a,y+b)\,.$
For example, translating by $\,(1,2)\,$ moves an object to the right $\,1\,$ and up $\,2\,.$
For the horizontal direction: positive is to the right, negative is to the left.
For the vertical direction: positive is up, negative is down.
board.create('transform',[numLeftRight,numUpDown],{type:'translate'});
Example:
board.create('text',[1,6,'translate by:']);
sliderx = board.create('slider',[[1,5],[4,5],[-2,1,2]],
  {snapWidth:1,name:'x'});
slidery = board.create('slider',[[1,4],[4,4],[-2,-1,2]],
  {snapWidth:1,name:'y'});
initialPt = board.create('point',[3,1],{name:'initial pt'});
transform = board.create('transform',[
  function(){return sliderx.Value()},
  function(){return slidery.Value()}],
  {type:'translate'});
board.create('point',[initialPt,transform],{name:'translated'});
Change the slider values to change the translation.
Drag the initial point; watch the translated point follow.
yields

Scale

Scaling a point $\,(x,y)\,$ by $\,(a,b)\,$ yields the new point $\,(ax,by)\,.$
For example, scaling by $\,(2,3)\,$ doubles the $x$-value, and triples the $y$-value.
board.create('transform',[numHorFactor,numVerFactor],{type:'scale'});
board.create('text',[1,6,'scale by:']);
sliderx = board.create('slider',[[1,5],[4,5],[0,1.5,2]],
  {snapWidth:0.5,name:'&nbsp;&nbsp;x'});
slidery = board.create('slider',[[1,4],[4,4],[-1,2.5,3]],
  {snapWidth:0.5,name:'&nbsp;&nbsp;y'});
initialPt = board.create('point',[3,1],{name:'initial pt'});
transform = board.create('transform',[
  function(){return sliderx.Value()},
  function(){return slidery.Value()}],
  {type:'scale'});
board.create('point',[initialPt,transform],{name:'scaled'});
Change the slider values to change the scaling factors.
Drag the initial point; watch the scaled point follow.
yields

Reflect

Reflection about a line treats the line as a mirror;
the reflection is the same (perpendicular) distance to the line, but on the opposite side.
board.create('transform',[line],{type:'reflect'});
or
board.create('transform',[x1,y1,x2,y2],{type:'reflect'});
linePt1 = board.create('point',[0,0],{name:''});
linePt2 = board.create('point',[2,2],{name:''});
theLine = board.create('line',[linePt1,linePt2],{dash:1});
initialPt = board.create('point',[3,1],{name:'initial pt'});
transform = board.create('transform',[theLine],{type:'reflect'});
board.create('point',[initialPt,transform],{name:'reflection'});
Change the line and/or the initial point, and watch the reflection follow.
yields

Rotate

Rotation about a point;
angles are in radian measure ($\pi$ radians is $180^{\circ}$);
positive angles are in a counter-clockwise direction
board.create('transform',[angle,pointToRotateAbout],{type:'rotate'});
or
board.create('transform',[angle,x,y],{type:'rotate'});
rotPt = board.create('point',[3,2],{name:'',face:'x'});
initPt = board.create('point',[4,2],{name:'initial pt'});
board.create('line',[rotPt,initPt],
  {dash:1,straightFirst:false});
slider = board.create('slider',[[1,5],[4,5],[-360,60,360]],
  {snapWidth:1,name:'&nbsp;&nbsp;degrees<br />'});
transform = board.create('transform',
  [function(){return slider.Value()*Math.PI/180},rotPt],
  {type:'rotate'});
newPt = board.create('point',[initPt,transform],{name:'rotated'});
board.create('line',[rotPt,newPt],
  {dash:1,straightFirst:false,straightLast:false,strokeOpacity:0.3});
Note that the slider values (given in degrees) are converted to radian measure
in the ‘transform’ command.
Change the angle of rotation and/or the initial point,
and watch the rotated point change.
yields

Shear

Shear changes only the $x$-value of a point; the $y$-value is unchanged.
A shear by angle $\,\theta\,$ of a point $\,(x,y)\,$ returns the new point $\,(x\tan\theta\,,\,y)\,.$
The angle in the ‘shear’ transform command must be given in radian measure.
Since $\,\tan45^{\circ} = 1\,,$ a shear by $\,\pi/4 = 45^{\circ}\,$ preserves the original point.
board.create('transform',[angle],{type:'shear'});
The box used for this example is $\,800\,$ pixels wide and $\,200\,$ pixels tall.
JXG.Options.text.useMathJax = true;
board = JXG.JSXGraph.initBoard('box',
  {originX:400, originY:175, unitX:2, unitY:2,
  axis:true,showNavigation:false,showCopyright:false});
slider = board.create('slider',[[10,70],[150,70],[-90,60,90]],
  {snapWidth:5,name:'&nbsp;&nbsp;degrees<br />'});
P = board.create('point',[40,10],{name:'P'});
// the top vertex of the triangles
aux = board.create('point',[0,function(){return P.X()+P.Y()}],{name:'',visible:false});
// the vertex at the right angle of the triangles
aux2 = board.create('point',[0,function(){return P.Y()}],{visible:false});
// observe the double backslash needed for proper MathJax interpretation
board.create('text',[-180,70,function(){
  return 'shear $= P_x\\tan\\theta = $&nbsp;'
    +(Math.tan(slider.Value()*Math.PI/180)*P.X()).toFixed(2)}]);
transform = board.create('transform',[function(){return slider.Value()*Math.PI/180}],{type:'shear'});
S = board.create('point',[P,transform],{name:'S'});
tri = board.create('polygon',[P,aux,aux2],{fillColor:'yellow'});
tri2 = board.create('polygon',[S,aux,aux2]);
// the remaining code is for the small black triangle illustrating the shear angle
new1 = board.create('point',[0,function(){return aux.Y()-20}],{visible:false});
new2 = board.create('point',[
  function(){return 20*Math.sin(slider.Value()*Math.PI/180)},
  function(){return aux.Y()-20*Math.cos(slider.Value()*Math.PI/180)}],{visible:false});
angle = board.create('polygon',[new2,aux,new1],
  {name:'',strokeColor:'black',fillColor:'black',fillOpacity:1});

Note that the slider values (given in degrees) are converted to radian measure in the ‘transform’ command.
The black triangle illustrates the shear angle (i.e., the slider value).
Change the shear angle (the slider), or move the initial point $\,P\,$ (keeping the $x$-value positive and sufficiently large),
and watch the shear point $\,S\,$ change accordingly.

Matrix Representations of Transformations

Rotation, Scaling, Shearing, and Reflection can be represented as $2\times 2$ matrices.
For example, the scaling $\,(x,y)\mapsto(ax,by)\,$ is represented by $$ \begin{bmatrix} a & 0\cr 0 & b \end{bmatrix} \begin{bmatrix} x\cr y\end{bmatrix} = \begin{bmatrix} ax\cr by\end{bmatrix} $$ However, translation cannot be represented by a $\,2\times 2\,$ matrix, and instead requires the use of homogeneous coordinates
and a $\,3\times 3\,$ matrix.
Recall that in JSXGraph, the scaling factor is listed first, so the coordinate pair $\,(x,y)\,$ has homogeneous coordinates $\,(1,x,y)\,.$ $$ \begin{bmatrix} 1 & 0 & 0\cr a & 1 & 0\cr b & 0 & 1 \end{bmatrix} \begin{bmatrix} 1\cr x\cr y\end{bmatrix} = \begin{bmatrix} 1\cr x+a\cr y+b\end{bmatrix} $$ All the $\,2\times2\,$ transformation matrices can be used with homogeneous coordinates.
For example, scaling takes on the appearance shown below;
the original $\,2\times 2\,$ matrix is inserted in the lower-right corner of the $\,3\times 3\,$ identity matrix: $$ \begin{bmatrix} 1 & 0 & 0\cr 0 & a & 0\cr 0 & 0 & b \end{bmatrix} \begin{bmatrix} 1\cr x\cr y\end{bmatrix} = \begin{bmatrix} 1\cr ax\cr by\end{bmatrix} $$ Thus, $\,3\times 3\,$ matrices $ \begin{bmatrix} v_{11} & v_{12} & v_{13}\cr v_{21} & v_{22} & v_{23}\cr v_{31} & v_{32} & v_{33} \end{bmatrix} \,,$ together with the use of homogeneous coordinates,
allow representations of all the standard transformations.
board.create('transform',[$v_{11},v_{12},v_{13},v_{21},\ldots,v_{33}$],{type:'generic'});
The box used for this example is $\,800\,$ pixels wide and $\,200\,$ pixels tall.
board = JXG.JSXGraph.initBoard('box',{originX:400, originY:175, unitX:20, unitY:20,
  axis:true,showNavigation:false,showCopyright:false});
initialPt = board.create('point',[4,3],{name:'initial pt'});
translate = board.create('transform',[1,0,0,2,1,0,3,0,1],{type:'generic'});
board.create('point',[initialPt,translate],{name:'translate<br />by (2,3)'});
reflectY = board.create('transform',[1,0,0,0,-1,0,0,0,1],{type:'generic'});
board.create('point',[initialPt,reflectY],{name:'reflect<br />about $y$-axis'});
scale = board.create('transform',[1,0,0,0,3,0,0,0,2],{type:'generic'});
board.create('point',[initialPt,scale],{name:'triple $x$,<br />double $y$'});
Move the initial point, and watch all the transformations change accordingly.

Combining Transformations; Binding a Transformation to a Point

firstTransf.melt(secondTransf)
This creates a two-step transformation:
  • firstTransf   acts first
  • secondTransf   acts second
  • the resulting two-step transformation is stored back in   firstTransf
    (and hence  firstTransf  is changed)
transf.bindTo(point)
  • transf   is applied to   point
  • the resulting coordinates are stored back in   point
    (and hence  point  is changed)
The box used for this example is $\,800\,$ pixels wide and $\,200\,$ pixels tall.
board = JXG.JSXGraph.initBoard('box',{originX:400, originY:175, unitX:20, unitY:20,
  axis:true,showNavigation:false,showCopyright:false});
initialPt = board.create('point',[4,3],{name:'initial pt'});
translate = board.create('transform',[2,3],{type:'translate'});
reflectY = board.create('transform',[1,0,0,0,-1,0,0,0,1],{type:'generic'});
translate.melt(reflectY); // this changes the 'translate' transformation
board.create('point',[initialPt,translate],{name:'translate,<br />then reflect'});

translate2 = board.create('transform',[2,3],{type:'translate'});
reflectY2 = board.create('transform',[1,0,0,0,-1,0,0,0,1],{type:'generic'});
reflectY2.melt(translate2); // this changes the 'reflectY2' transformation
board.create('point',[initialPt,reflectY2],{name:'reflect,<br />then translate'});

startPt = board.create('point',[10,2],
  {strokeColor:'purple',fillColor:'purple',name:'show bindTo operation'});
translate3 = board.create('transform',[5,1],{type:'translate'});
reflectY3 = board.create('transform',[1,0,0,0,-1,0,0,0,1],{type:'generic'});
translate3.bindTo(startPt); // (10,2) --> (10+5,2+1) = (15,3); startPt has changed
reflectY3.bindTo(startPt);  // (15,3) --> (-15,3); startPt has changed again
board.update(); // must update board to see changes

Move the initial point, and watch the transformations change accordingly.
The JSXGraph Reference Card lists all possible attributes and methods for this element.
turtle A ‘turtle’ is a triangle with moves that can be specified in the $xy$-plane;
it can leave a trail of its path
board.create('turtle',[xStart,yStart,startDirection]);
The first two arguments give the starting position of the turtle;
the optional third coordinate gives the direction, in degrees, counterclockwise, from the positive $x$-axis.

Examples:
turtle1 = board.create('turtle');
turtle2 = board.create('turtle',[2,2,135]);
The default values are position $(0,0)$ and angle $90^{\circ}$
(i.e., pointing in the positive $y$-direction).
Notice that a turtle is fixed; it cannot be dragged.
yields

Basic Turtle Movements

turtle = board.create('turtle',[1,1]);
turtle.forward(2);
turtle.right(90);
turtle.fd(2);
turtle.setPenColor('green');
turtle.left(90);
turtle.back(2);
turtle.rt(90);
turtle.setPenSize(3);
turtle.bk(1);
turtle3.lt(90);
turtle3.penUp(); turtle3.fd(1); turtle3.penDown();
turtle3.setPenColor('#FF0000');
turtle3.moveTo([5,5]);
Make sure you can follow these movements;
note that ‘forward’ can be abbreviated as ‘fd’,
‘back’ as ‘bk’, ‘right’ as ‘rt’, and ‘left’ as ‘lt’.
Picking the pen up stops path-tracing;
putting the pen down starts path-tracing.
yields

More Advanced Turtle Movements

t = board.create('turtle');
t.hideTurtle();
t.lookTo([2,5]); // point in a specified direction
t.forward(3);
t.lookTo([5,0]);
t.forward(3);
t.setPos(2,5);
t.forward(3);
Point in a certain direction using the  lookTo(pt)  method.
Jump to a specified position (without tracing the path) with the  setPos(x,y)  method.
When you jump to a specified position, your current direction is maintained.
Use  showTurtle()  to show a turtle if it has been hidden.
yields
The JSXGraph Reference Card lists all possible attributes and methods for this element.
U
V
W
X
Y
Z