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 P through R.

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

P
parabola A parabola is the set of points in a plane with the property that the distance to a fixed point (called the ‘focus’)
is the same as the (perpendicular) distance to a fixed line (called the ‘directrix’).

Algebraically, every equation of the form $\,Ax^2 + Bxy + Cy^2 + Dx + Ey + F = 0\,,$
where the discriminant ($\,B^2 - 4AC\,$) is equal to zero, yields a parabola (possibly degenerate).

Parabolas have a beautiful reflecting property:
light inside the parabola directed perpendicular to the directrix is reflected back through the focus.
In this way, the focus acts as a ‘collector’; signals are collected and focused on the focus.
board.create('parabola',[pointFocus,lineDirectrix,optCurveStart,optCurveEnd]);
The first argument is a point (the focus).
The second argument is a line (the directrix).
There are optional third and fourth arguments, which are numbers indicating the portion of the parabola to be drawn;
the default values are $-\pi$ and $\pi$;
the curve is traced from  optCurveStart  to  optCurveEnd  (both interpreted as radian measure).
See the second example below to understand how this works.

Examples: 
focus = board.create('point',[4,5],{name:'focus', face:'cross'});
p1 = board.create('point',[3,0],{name:''});
p2 = board.create('point',[0,2],{name:''});
directrix = board.create('line',[p1,p2]);
board.create('parabola',[focus,directrix]);
Drag the focus and/or the line to see the parabolas that result.
As the focus moves closer to the directrix, the parabola becomes narrower. 		yields 
focus = board.create('point',[4,5],{name:'focus', face:'cross'});
p1 = board.create('point',[3,0],{name:''});
p2 = board.create('point',[0,2],{name:''});
directrix = board.create('line',[p1,p2]);
board.create('parabola',[focus,directrix,-Math.PI/4,Math.PI]);
Same example as above, except drawing only part of the curve. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
parallel a line through a given point that is parallel to a given line;
for non-vertical lines, two lines are parallel when they have the same slope
board.create('parallel',[line,point]);
Example: 
p1 = board.create('point',[3,0],{name:''});
p2 = board.create('point',[0,2],{name:''});
theLine = board.create('line',[p1,p2]);
thePoint = board.create('point',[2,3],{name:'ptOnParallelLine'});
board.create('parallel',[theLine,thePoint],{color:'green'});
Drag the original line and/or the point on the parallel line, and watch things change. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
parallelpoint uses three points to first define a vector, and then translate this vector to a new starting position
board.create('parallelpoint',[pointVectorStart,pointVectorEnd,pointNewVectorStart]);
The first two points define a vector with a specified start and end;
the  parallelpoint  command then translates this vector to the new specified start point,
and returns the end point of the new vector

Example: 
p1 = board.create('point',[0,0],{name:''});
p2 = board.create('point',[1,3],{name:''});
originalVector = board.create('arrow',[p1,p2]);
newStartPoint = board.create('point',[2,1],
  {name:'newStartPoint'});
newEndPoint = board.create('parallelpoint',[p1,p2,newStartPoint],
  {name:'newEndPoint', color:'green'});
newVector = board.create('arrow',[newStartPoint,newEndPoint],
  {dash:1, opacity:0.6});
Drag the points defining the original vector and/or the new starting point,
and watch things change. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
perpendicular a line (segment) through a given point that is perpendicular to a given line;
two lines are perpendicular when their slopes (if they exist) are opposite reciprocals;
horizontal and vertical lines are perpendicular
board.create('perpendicular',[line,point]);
Returns an array containing two elements:
  • a perpendicular line segment in the first entry (index 0)
  • the point where the perpendicular line intersects the given line in the second entry (index 1)
Examples: 
p1 = board.create('point',[3,0],{name:''});
p2 = board.create('point',[0,2],{name:''});
theLine = board.create('line',[p1,p2]);
thePoint = board.create('point',[2,3],
  {name:'ptOnPerpLine'});
returnedMat = board.create('perpendicular',[theLine,thePoint]);
thePerpSeg = returnedMat[0];
thePerpSeg.setProperty({color:'purple',dash:1});
theIntPt = returnedMat[1];
theIntPt.setProperty({color:'green'});
Drag the original line and/or the point on the perpendicular line,
and watch things change. 		yields
You can change the segment to a line or half-line
by setting the  straightFirst  and/or  straightLast  attributes to true: 
p1 = board.create('point',[3,0],{name:''});
p2 = board.create('point',[0,2],{name:''});
theLine = board.create('line',[p1,p2]);
thePoint = boardperpendicular2.create('point',[2,3],
  {name:'ptOnPerpLine'});
board.create('perpendicular',[theLine,thePoint],
  {straightFirst:true,straightLast:true,dash:2});
yields
The JSXGraph Reference lists all possible attributes and methods for this element.
perpendicularpoint If you only need the point that is returned from the perpendicular command,
then it's easier to use the  perpendicularpoint  command.
board.create('perpendicularpoint',[line,point]);
Example: 
p1 = board.create('point',[3,0],{name:''});
p2 = board.create('point',[0,2],{name:''});
theLine = board.create('line',[p1,p2]);
thePoint = board.create('point',[2,3],
  {name:'ptOnPerpLine'});
board.create('perpendicularpoint',[theLine,thePoint],
  {name:'perpPoint', color:'green'});
Drag the original line and/or the point on the perpendicularpoint line,
and watch the perpendicular point change. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
point creates either a free or constrained point;
can also be used to perform a transformation on an existing point;
three different input forms are available (each discussed below)

Basic Point Plotting:

board.create('point',[xValue,yValue]);
A free point is one that can be moved by the user.
A constrained point is one that cannot be moved by the user.
A constrained point is obtained if:
  • the ‘fixed’ attribute is set to true
  • a coordinate is given as a function (which must take no arguments, and return a number)

Example: 
p1 = board.create('point',[3,0],{name:'free'});
board.create('point',[0,2],{fixed:true; name:'fixedTrue'});
boardpoint.create('point',[function(){return p1.X()},4],
  {name:'fctCoord'});
Try to drag all three points:
the free point can be moved;
the point with the fixed property set to true cannot be moved;
the point which uses a function as a coordinate cannot be moved independently
(but is dependent on the free point). 		yields

Homogeneous Coordinates:

board.create('point',[x3,x1,x2]);
Homogeneous coordinates have advantages in computer graphics (see, for example, matrix representations of transformations).
A point with Cartesian coordinates $(x,y)$ does not have a unique represention in homogeneous coordinates:
indeed, for any $\,x_3\ne0\,,$ the point $\,(x,y)\,$ can be represented with homogeneous coordinates $\,(x_3\cdot x\,,\,x_3\cdot y\,,\,x_3)\,.$
Note that you can think of $\,x_3\,$ as a ‘scaling factor’;
scale both the $\,x\,$ and $\,y\,$ values, and then list the scaling factor being used in the third slot.

If there are three numerical arguments to the  point  command,
then they are interpreted as an (altered arrangement) of homogeneous coordinates;
the scaling factor is listed first, and the scaled coordinates are listed next.
Thus, the JSXGraph inputs $\,[x_3,x_1,x_2]\,$ yield the Cartesian coordinates $\,(\frac{x_1}{x_3},\frac{x_2}{x_3})\,.$

Example: 
board.create('point',[3,6,12],{name:'a'});
board.create('point',[5,10,20],{name:'bb'});
board.create('point',[0.5,1,2],{name:'ccc'});
Here are three different ways to plot the point $(2,4)$ with homogeneous coordinates.
The first entry uses a scaling factor of $\,3\,$:   $(2,4) \mapsto (3\,,\,2\cdot 3\,,\,4\cdot 3)\,.$
These are all free points;
drag the point(s) around to see that there are actually three points here. 		yields

Transforming a Given Point:

board.create('point',[point,transform]);
A point can be created as a transformation (scale, translate) of a given point.

Example: 
initialPt = board.create('point',[1,1],{name:'initialPt'});
scaleTrans = board.create('transform', [2,3],{type:'scale'});
board.create('point',[initialPt,scaleTrans],
  {name:'scaledPoint'});
translateTrans = board.create('transform',[-1,4],
  {type:'translate'});
board.create('point', [initialPt,translateTrans],
  {name:'translatedPoint'});
The scaling transformation doubles the $x$-value and triples the $y$-value.
The translating transformation moves the initial point to the left $1$ unit, and up $4$ units.
Move the initial point and watch the transformed points change accordingly. 		yields

Distance Between Points:

This example illustrates the power of anonymous functions,
as well as the method for finding the distance between two points.
Dynamic text displays the distance between two free points;
this text travels just below one of the points.

Example: 
p1 = board.create('point',[3,5],{name:''});
p2 = board.create('point',[1,1],{name:''});
board.create('text',[
  function(){return p1.X()-0.8},
  function(){return p1.Y()-0.5},
  function(){
    dist = p1.Dist(p2);
    return '<center>distance<br />between<br />points<br />
    is '+ dist.toFixed(2) + '</center>'}]);
yields
The JSXGraph Reference lists all possible attributes and methods for this element.
polygon a polygon is a closed figure in a plane made by joining line segments, where each line segment intersects exactly two others;
it is defined by specifying an array of consecutive vertices
board.create('polygon',[ptVertex1,ptVertex2,...]);
The first and last vertex must be the same to close the polygon;
if not, the first vertex is automatically duplicated as the last vertex.

Example: 
p1 = board.create('point',[0,0],{name:''});
p2 = board.create('point',[1,3],{name:''});
p3 = board.create('point',[5,5],{name:''});
p4 = board.create('point',[4,2],{name:''});
board.create('polygon',[p1,p2,p3,p4]);
Drag any vertex and watch the polygon change. 		yields 
p1 = board.create('point',[0,0],{name:''});
p2 = board.create('point',[1,3],{name:''});
p3 = board.create('point',[5,5],{name:''});
p4 = board.create('point',[4,2],{name:''});
board.create('polygon',[p1,p2,p4,p3],{withLines:false});
Since consecutive points are connected with line segments,
it is possible to create a non-polygon (intersecting sides) with this command.
You can get rid of the sides of the polygon by setting  withLines  to false. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
Q
R
reflection reflects a given point about a given line;
compare with the mirrorpoint element
board.create('reflection',[point,line]);
Example: 
pt1 = board.create('point',[0,5],{name:''});
pt2 = board.create('point',[4,0],{name:''});
theLine = board.create('line',[pt1,pt2]);
thePoint = board.create('point',[1,2],{name:'point'});
board.create('reflection',[thePoint,theLine],{name:'reflection'});
Change the point and/or the line and watch the reflection change accordingly. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
regularpolygon a regular polygon is a polygon whose sides all have the same length, and whose angles are all the same;
it is defined by two points that give one side, and the number of vertices;
the order that the initial points are listed affects the orientation of the polygon (see the example below)
board.create('regularpolygon',[point1,point2,numberOfVertices]);
Example: 
p1 = board.create('point',[3,2],{name:'p1'});
p2 = board.create('point',[4,3],{name:'p2'});
square = board.create('regularpolygon',[p1,p2,4]);
regHex = board.create('regularpolygon',[p1,p2,6]);
square2 = board.create('regularpolygon',[p2,p1,4],{color:'yellow'});
regHex2 = board.create('regularpolygon',[p2,p1,6],{color:'yellow'});
Drag either of the initial points and watch the regular polygons change. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
riemannsum A Riemann sum gives an approximation to an integral $\displaystyle\int_a^b f(x)\,dx\,$;
recall that this integral gives the (signed) area trapped beneath the graph of the function $f$ and the $x$-axis;
area above the $x$-axis is treated as positive; area below is treated as negative.
board.create('riemannsum',[f,n,typeOfApprox,a,b]);
where:
  • the first argument is the function $\,f\,$ that defines the curve
  • the second argument is the number $\,n\,$ of equal-width subintervals into which the interval $[a,b]$ is divided;
    the width of each subinterval is $\frac{b-a}{n}$
  • typeOfApprox  determines the type of approximating rectangles (or trapezoid), with these choices:
    • left
    • right
    • middle
    • lower
    • upper
    • trapezodial (yes, you must use this incorrect spelling)
  • the fourth argument, $\,a\,,$ is the lower limit of integration
  • the fifth argument, $\,b\,,$ is the upper limit of integration

Examples: 
theFct = function(x) { return 0.2*x*x; };
board.create('functiongraph',[theFct,0,5]);
board.create('riemannsum',[theFct,4,'left',0,5]);
When  typeOfApprox  is ‘left’, the function value at the left endpoint of each subinterval
is used to determine the height of the approximating rectangle.

The function itself is not graphed with the  riemannsum  command;
you must separately graph the function using  functiongraph . 		yields 
theFct = function(x) { return 0.2*x*x; };
board.create('functiongraph',[theFct,0,5]);
board.create('riemannsum',[theFct,10,'right',0,5],
  {fillColor:'green',fillOpacity:0.3});
When  typeOfApprox  is ‘right’, the function value at the right endpoint of each subinterval
is used to determine the height of the approximating rectangle.

When a function is increasing, then a left approximation gives an under-estimate
to the actual area, and a right approximation gives an over-estimate. 		yields 
theFct = function(x) { return (x-2.5)*(x-2.5)*0.5; };
board.create('functiongraph',[theFct,0,5]);
board.create('riemannsum',[theFct,5,'upper',0,5],{fillColor:'blue'});
board.create('riemannsum',[theFct,5,'lower',0,5]);
‘Upper’ and ‘lower’ types adjust the height of the approximating rectangles
to guarantee an over-approximation or under-approximation, respectively;
the maximum and minimum function values are used (as appropriate) on each subinterval. 		yields 
theSlider = board.create('slider',[[0,6],[5,6],[0,2,5]],{snapWidth:1});
theFct = function(x) { return 0.2*x*x; };
board.create('riemannsum',[theFct,function(){return theSlider.Value();},
  'trapezodial',0,5]);
board.create('functiongraph',[theFct,0,5]);
Change the value of $\,n\,$ by using the slider.
The trapezoidal method (it must be input with the incorrect spelling  trapezodial )
can give very good approximations with small values of $\,n\,.$ 		yields 
theSlider = board.create('slider',[[0,6],[5,6],[0,2,5]],{snapWidth:1});
theFct = function(x) { return 0.2*x*x; };
board.create('riemannsum',[theFct,function(){return theSlider.Value();},
  'middle',0,5]);
board.create('functiongraph',[theFct,0,5]);
For completeness, here is the  middle  type;
it uses the function value at the midpoint of each subinterval
to determine the rectangle height. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.