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 coexist 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 highschool 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:
<head> <link rel="stylesheet" type="text/css" href="jsxgraph.css" /> <script type="text/javascript" src="jsxgraphcore.js"></script> </head>
div
element with an identifying id
at the desired location
in the HTML document;<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
)<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
board.create('point',[1,5]);
initBoard
command again).
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.
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 
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});
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:

parallel 
a line through a given point that is
parallel to a given line; for nonvertical lines, two lines are parallel when they have the same slope
board.create('parallel',[line,point]);
Example:

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:

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:

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:

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:
Example:
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:
Transforming a Given Point:
board.create('point',[point,transform]);
A point can be created as a transformation (scale, translate) of a given point.Example:
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:

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:

reflection 
reflects a given point about a given line; compare with the mirrorpoint element
board.create('reflection',[point,line]);
Example:

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:

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:
Examples:
