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 E through O.

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

E
ellipse An ellipse is the set of points in a plane with the property that the sum of the distances to two distinct fixed points is constant.
The two distinct points are called the foci (singular: focus);
the constant is a positive number greater than the distance between the two points;
the constant gives the length of the major axis of the ellipse.

To physically generate an ellipse:
-- put two thumbtacks on a board;
-- put a large rubber-band around them;
-- put a pencil inside the rubber band and trace

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

Ellipses have a beautiful reflecting property: light emitted from one focus will be reflected through the other focus.
board.create('ellipse',[pointFocus1,pointFocus2,pointOnEllipse,optCurveStart,optCurveEnd]);

board.create('ellipse',[pointFocus1,pointFocus2,numberLengthOfMajorAxis,optCurveStart,optCurveEnd]);
The first two arguments are the foci.
The third argument can be a point on the ellipse, or the length of the major axis.
The fourth and fifth arguments are optional numbers to indicate the portion of the ellipse to be drawn;
the default values are $-\pi$ and $\pi$.
Imagine a coordinate system through the leftmost focus; the ‘positive $x$-axis’ is towards the rightmost focus.
The curve is traced from  optCurveStart  to  optCurveEnd  (both interpreted as radian measure).

Examples: 
f1 = board.create('point',[1,2],{name:'f1'});
f2 = board.create('point',[5,3],{name:'f2'});
ptOnEllipse = board.create('point',[3,1],{name:'ptOnEllipse'});
board.create('ellipse',[f1,f2,ptOnEllipse]);
Drag the points around to see the ellipses that result.
When the two foci coincide, the ellipse becomes a circle. 		yields 
f1 = board.create('point',[1,2],{name:'f1'});
f2 = board.create('point',[5,3],{name:'f2'});
board.create('ellipse',[f1,f2,[3,1]],{dash:1});
Any point given explicitly by its coordinates in the  ellipse  command will be invisible. 		yields 
f1 = board.create('point',[1,2],{name:'f1'});
f2 = board.create('point',[5,3],{name:'f2'});
board.create('ellipse',
  [f1,f2,[3,1],-2.5,-0.5],{dash:1,strokeColor:'green'});
board.create('ellipse',
  [f1,f2,[3,1],0.5,2.5],{dash:2,strokeColor:'purple'});
The optional fourth and fifth arguments determine the portion of the ellipse to be drawn.
The radian measures from  -2.5  to  -0.5  give a portion of the bottom of the ellipse;
the radian measures from  0.5  to  2.5  give a portion of the top of the ellipse.
 yields 
f1 = board.create('point',[1,2],{name:'f1'});
f2 = board.create('point',[5,2],{name:'f2'});
board.create('ellipse',[f1,f2,6]);
board.create('ellipse',[f1,f2,3]);
The third argument can be a number, representing the length of the major axis.
If the number is less than the distance between the two foci, then no ellipse will be drawn
(hence, the second ellipse is invisible). 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
F
functiongraph graphs a function of one variable, $y = f(x)$
board.create('functiongraph',[functionRule,a,b]);
The function is graphed on the interval $\,[a,b]\,$;
if the second and third arguments are omitted, then the function is graphed over the visible $x$-values.

Examples:
It's easy to create piecewise-defined functions: 
board.create('point',[0,1],{color:'black',name:'',size:3});
board.create('point',[2,1],
  {color:'black',name:'',size:3,fillColor:'white'});
board.create('functiongraph',[function(x){ return 1;},0,2]);
board.create('point',[5,3],{color:'black',name:'',size:3});
board.create('functiongraph',
  [function(x){ return (-2/9)*(x-5)*(x-5)+3;},2,5]);
yields 
board = JXG.JSXGraph.initBoard('box',
  {originX:100, originY:100, unitX:7, unitY:7, axis:true,
  showNavigation:true, showCopyright:false});
board.create('functiongraph',[function(x){ return Math.ceil(x);}]);
board.create('functiongraph',[function(x){ return Math.floor(x);}],
  {strokeColor:'red'});
Here, the second and third arguments are omitted;
the functions are graphed over all visible $x$-values.
Use the right and left navigation arrows (lower right corner)
to see that the function is not graphed outside the initial visible box. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
G
glider a point that lives on another geometric element (like a line, circle, curve, or turtle),
with an optional starting position for the point
board.create('glider',[optionalNumberX,optionalNumberY,objectToTravelOn]);
Examples:
A basic glider on a line: 
theLine = board.create('line',[[0,0],[1,1]]);
board.create('glider',[theLine],{name:'glider'});
The default location of the glider point is at $\,x = 0\,.$
Drag the glider; you are not allowed to pull it off the line. 		yields
A glider on a curve with a specified starting point: 
theCurve = board.create('functiongraph',[function(x) {return x*x/4}]);
board.create('glider',[2,1,theCurve],{name:'start point (2,1)'});
board.create('glider',[4,1,theCurve],{name:'start point not on curve'});
The $x$-value of the specified point becomes the starting $x$-value of the glider;
a $y$-value must be supplied, but is ignored
(so it doesn't matter if the point lies on the curve, or not). 		yields
A glider on a line with a specified starting point: 
theLine = board.create('line',[[0,0],[1,1]]);
ptNotOnLine = board.create('point',[3,1],{name:'ptNotOnLine'});
perpLineThruPt = board.create('perpendicular',[theLine,ptNotOnLine],
  {strokeColor:'green'});
perpLineThruPt[0].setProperty({dash:1}); /* the perpendicular line */
perpLineThruPt[1].setProperty({visible:false});
  /* hide the intersection pt */
board.create('glider',[3,1,theLine],{name:'glider'});
The starting position of a glider on a line behaves differently than for curves;
it is not the $x$-value of the starting point that is used.
Instead, project the starting point (along the perpendicular) onto the glide object,
as illustrated in this example. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
group creates an invisible grouping of points;
if one point is moved, the entire group moves
board.create('group',[p1,p2,p3,...]);
Examples: 
p1 = boardgroup.create('point',[0,0]);
p2 = boardgroup.create('point',[1,1]);
p3 = boardgroup.create('point',[2,2]);
board.create('group',[p1,p2,p3]);
Move any of the points; watch the entire group move together. 		yields
H
hyperbola A hyperbola is the set of points in a plane with the property that the difference of the distances to two distinct fixed points is constant.
The two distinct points are called the foci (singular: focus);
the constant is a positive number that is less than the distance between the two foci;
the constant gives the distance between the two vertices (‘turning points’) of the hyperbola.

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

Hyperbolas have a beautiful reflecting property (see last example below):
outside light aimed at one focus will be reflected through the other focus.
board.create('hyperbola',[pointFocus1,pointFocus2,pointOnHyperbola,optCurveStart,optCurveEnd]);

board.create('hyperbola',[pointFocus1,pointFocus2,numberDistanceBetweenVertices,optCurveStart,optCurveEnd]);
The first two arguments are the foci.
The third argument can be a point on the hyperbola, or the distance between the two vertices of the hyperbola.
The fourth and fifth arguments are optional numbers to indicate the portion of the hyperbola to be drawn;
the default values are $-\pi$ and $\pi$.

Examples: 
f1 = board.create('point',[1,2],{name:'f1'});
f2 = board.create('point',[4,5],{name:'f2'});
ptOnhyperbola = board.create('point',[3,1],{name:'ptOnHyperbola'});
board.create('hyperbola',[f1,f2,ptOnHyperbola]);
Drag the points around to see the hyperbolas that result. 		yields 
f1 = board.create('point',[1,2],{name:'f1'});
f2 = board.create('point',[4,5],{name:'f2'});
board.create('hyperbola',[f1,f2,[3,1]],{dash:1});
Any point given explicitly by its coordinates in the  hyperbola  command will be invisible. 		yields 
f1 = board.create('point',[1,2],{name:'f1'});
f2 = board.create('point',[4,5],{name:'f2'});
board.create('hyperbola',
  [f1,f2,[3,1],-2.5,-0.5],{dash:1,strokeColor:'green'});
board.create('hyperbola',
  [f1,f2,[3,1],0.5,2.5],{dash:2,strokeColor:'purple'});
The optional fourth and fifth arguments determine the portion of the hyperbola to be drawn.
The radian measures from  -2.5  to  -0.5  give the green portion of the hyperbola;
the radian measures from  0.5  to  2.5  give the purple portion of the hyperbola.
 yields 
f1 = board.create('point',[1,2],{name:'f1'});
f2 = board.create('point',[5,2],{name:'f2'});
board.create('hyperbola',[f1,f2,3]);
board.create('hyperbola',[f1,f2,5],{strokeColor:'purple'});
The third argument can be a number, representing the distance between the two vertices (‘turning points’) of the hyperbola.
If the number is greater than the distance between the two foci,
then no hyperbola will be drawn.
Therefore, the second hyperbola is initially invisible;
drag the foci further apart to see the second hyperbola emerge. 		yields 
f1 = board.create('point',[1,2],{name:''});
f2 = board.create('point',[5,3],{name:''});
hyp = board.create('hyperbola',[f1,f2,3]);
outsidePt = board.create('point',[2,4],{name:'outsidePt'});
line1 = board.create('line',[outsidePt,f1],
  {straightLast:false, straightFirst:false});
intersect = board.create('intersection',[hyp,line1,1],{name:''});
line2 = board.create('line',[intersect,f2],
  {straightFirst:false, straightLast:false, dash:1});
This example illustrates the reflecting property of a hyperbola.
Outside light directed towards one focus is reflected so that it passes through the other focus. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
I
image displays an image at a specific location, with a specified size
board.create('image',[stringURL,pointPositionLowerLeftCorner,pointWidthHeight])
  • the first argument is a string that gives the local path to the image, or a URL (uniform resource locator)
  • the second argument is a point that gives the position of the lower left corner of the image
  • the third argument is a point $(\text{width},\text{height})$ using the units of the current board

Example:
This image is saved in the same directory as the web page.
Its size is $\,137\times 56\,$ (pixels, width by height).
Note that $\frac{\text{width}}{\text{height}} = \frac{137}{56}\approx 2.45$, so the width is about $\,2.45\,$ times the height;
this info is used to get the correct size for the third argument: $2.45\times 2 = 4.9$ 
board.create('image',['cat2_1.bmp',[0,0],[4.9,2]]);
yields
The JSXGraph Reference lists all possible attributes and methods for this element.
incenter the incenter of a triangle is the center of the largest circle that fits inside the triangle;
the incenter is the intersection point of the angle bisectors
board.create('incenter',[point1,point2,point3])
Example: 
/* create a triangle through three points */
p1 = board.create('point',[0,0],{name:'p1'});
p2 = board.create('point',[5,2],{name:'p2'});
p3 = board.create('point',[1,4],{name:'p3'});
board.create('polygon',[p1,p2,p3]);
/* create the incenter */
board.create('incenter',[p1,p2,p3],{name:'incenter'});
/* create the three angle bisectors */
board.create('bisector',[p3,p2,p1],{dash:1,strokeOpacity:0.3});
board.create('bisector',[p2,p1,p3],{dash:1,strokeOpacity:0.3});
board.create('bisector',[p1,p3,p2],{dash:1,strokeOpacity:0.3});
/* create the incircle of the triangle */
board.create('incircle',[p1,p2,p3],{strokeColor:'green'});
Move points  p1 ,  p2  and  p3  to see the general behavior. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
incircle the incircle of a triangle is the the largest circle that fits inside the triangle;
the center of the incircle is the intersection point of the angle bisectors
board.create('incircle',[point1,point2,point3])
The  incircle  command returns an array containing the center of the incircle, and the circle itself.
For example, if 
retArray = board.create('incircle',[point1,point2,point3]);
then
  • retArray[0] is the center of the incircle (a point object)
  • retArray[1] is the incircle itself (a circle object)

Example: 
/* create a triangle through three points */
p1 = board.create('point',[0,0],{name:'p1'});
p2 = board.create('point',[5,2],{name:'p2'});
p3 = board.create('point',[1,4],{name:'p3'});
board.create('polygon',[p1,p2,p3]);
/* create the incircle */
retArray = board.create('incircle',[p1,p2,p3]);
/* color the center of the incircle green */
retArray[0].setProperty({color:'green'});
/* color the incircle itself purple */
retArray[1].setProperty({strokeColor:'purple'});
/* create the three angle bisectors,
   to show that they intersect at center of the incircle */
board.create('bisector',[p3,p2,p1],{dash:1,strokeOpacity:0.3});
board.create('bisector',[p2,p1,p3],{dash:1,strokeOpacity:0.3});
board.create('bisector',[p1,p3,p2],{dash:1,strokeOpacity:0.3});
Move points  p1 ,  p2  and  p3  to see the general behavior. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
integral used to visualize an integral, $\int_a^b f(x)\,dx\,,$ over a specified interval $\,[a,b]$
board.create('integral',[arrayLowLimUpLim,function])
The first argument is an array that defines the limits of integration, $\,[a,b]\,$;
the second argument is the integrand, given as either a curve or functiongraph object.
The value of the integral is automatically displayed just below and to the right of the point $\,(b,f(b))\,$;
make sure there is room on the board to see this result.

Example:
Visually displays $\int_{-4}^2 (\frac{x^2}{2} - 1)\,dx\,$: 
board = JXG.JSXGraph.initBoard('box',
  {originX:100, originY:150, unitX:20, unitY:20, axis:true,
  showNavigation:false, showCopyright:false});
theFct = board.create('functiongraph',
  [function(t){return t*t/2-1;}]);
board.create('integral',[[-4,2],theFct],
  {color:'purple',fillOpacity:0.2});
Move the points along the curve to change the limits of integration;
watch the integral change accordingly. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
intersection creates an intersection point
board.create('intersection',[curve1,curve2,numIntersectionPtIdentifier])
The third argument is required, and allows for the occurrence of more than one intersection point:
  • exactly one intersection point:
    set   numIntersectionPtIdentifier   to   0
  • two intersection points:
    setting   numIntersectionPtIdentifier   to   0   uses the positive square root;
    setting   numIntersectionPtIdentifier   to   1   uses the negative square root

Examples: 
p1 = board.create('point',[0,0]);
p2 = board.create('point',[2,1]);
p3 = board.create('point',[5,0]);
p4 = board.create('point',[0,5]);
line1 = board.create('line',[p1,p2]);
line2 = board.create('line',[p3,p4]);
board.create('intersection',[line1,line2,0],{name:'intersection'});
Move the points to change the two lines;
watch the intersection point change accordingly.
The ‘0’ is required as the third argument, even when there is only one intersection point. 		yields 
p1 = board.create('point',[3,3]);
p2 = board.create('point',[1,2]);
p3 = board.create('point',[5,0]);
p4 = board.create('point',[0,5]);
circle = board.create('circle',[p1,p2]);
line = board.create('line',[p3,p4]);
board.create('intersection',[circle,line,0],{name:'posSqRt'});
board.create('intersection',[circle,line,1],{name:'negSqRt '});
Alternatively, you can use the otherintersection command. 		yields 
board = JXG.JSXGraph.initBoard('boxintersection3',
  {originX:100, originY:150, unitX:25, unitY:25,
   axis:true, showNavigation:false, showCopyright:false});
p1 = board.create('point',[0,2]);
p2 = board.create('point',[2,3]);
curve = board.create('functiongraph',
  [function(x){ return x*x/2; },-5,5]);
line = board.create('line',[p1,p2]);
board.create('intersection',[curve,line,0],{name:'int1'});
board.create('intersection',[curve,line,1],{name:'int2'});
For more general curves, there doesn't seem to be any guarantee that all intersection point(s) will be found. Move the points around to change the line; the intersection points seem to ‘come and go’. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
J
K
L
line creates a line through two points; or,
creates the line $\,ax + by + c = 0\,,$ given the three numbers (in this order):   $c$, $a$, $b$
board.create('line',[point1,point2])
board.create('line',[c,a,b])
Examples: 
p1 = board.create('point',[0,0],{name:'p1'});
p2 = board.create('point',[3,2],{name:'p2'});
board.create('line',[p1,p2],{firstArrow:true,lastArrow:true});
board.create('line',[p1,[1,5]],{dash:1,straightFirst:false});
Move the points to change the line.
Arrows can be added to the beginning and/or end of a line.
Any point given explicitly by its coordinates is invisible.
Get rid of the ‘beginning’ of a line by setting  straightFirst  to false;
get rid of the ‘end’ of a line by setting  straightLast  to false. 		yields
The line through $\,(1,3)\,$ with slope $\,2\,$ has point-slope equation: $$ y - 3 = 2(x - 1) $$ Writing in the form $\,ax + by + c = 0\,$ yields: $$ \begin{gather} y - 3 = 2x - 2\cr -2x + y - 1 = 0 \end{gather} $$ Comparing with the form $\,ax + by + c = 0\,$ gives: $$\,a = -2\,,\ \ b = 1\,,\ \ \,c = -1$$ so that   [c,a,b] = [-1,-2,1]. 
line = board.create('line',[-1,-2,1]]);
board.create('point',[1,3],{name:'(1,3)',fixed:true});
board.create('text',[1,1,'the slope is '+line.getSlope()]);
yields
The JSXGraph Reference lists all possible attributes and methods for this element.
M
midpoint constructs the midpoint between two points;
the midpoint of $\,P_1(x_1,y_1)\,$ and $\,P_2(x_2,y_2)\,$ is $\,M\bigl(\frac{x_1+x_2}2,\frac{y_1+y_2}2\bigr)\,$;

the distance from $\,P_1\,$ to $\,M\,$ is equal to the distance from $\,P_2\,$ to $\,M\,$
board.create('midpoint',[point1,point2]);
board.create('midpoint',[line]);
If the argument is a line, then you get the midpoint of the two points used to create the line.

Example: 
p1 = board.create('point',[0,0],{name:'p1'});
p2 = board.create('point',[3,3],{name:'p2'});
board.create('midpoint',[p1,p2],{name:'midpoint'});
Move the ‘parent’ points and watch the midpoint change. 		yields 
p1 = board.create('point',[0,0],{name:'p1'});
p2 = board.create('point',[3,3],{name:'p2'});
lineSeg = board.create('segment',[p1,p2]);
board.create('midpoint',[lineSeg],{name:'midpoint of line segment'});
yields 
theLine = board.create('line',[[0,0],[3,3]]);
board.create('midpoint',[theLine],{name:'midpoint'});
If the ‘parent’ points of a line are invisible,
then the midpoint may have no obvious context for meaning. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
mirrorpoint constructs a reflection (a ‘mirrorpoint’);
compare with the reflection element
board.create('mirrorpoint',[pointToReflectAbout,pointToBeReflected]);
Given points $\,F\,$ (the first argument) and $\,S\,$ (the second argument),
the mirrorpoint is the unique point $\,M\,$ on line $\,\overleftrightarrow{FS}\,$ such that $\,d(M,F) = d(S,F)\,.$

Example: 
F = board.create('point',[2,3],{name:'F'});
S = board.create('point',[4,5],{name:'S'});
board.create('line',[F,S],{dash:1, opacity:0.4});
board.create('mirrorpoint',[F,S],{name:'mirrorpoint'});
Move either of the ‘parent’ points and watch the mirrorpoint change. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
N
normal constructs a normal (perpendicular) line to a given curve, through a specified point
board.create('normal',[curve,point]);
Examples: 
theLine = board.create('line',[[0,0],[2,2]]);
thePoint = board.create('point',[1,3],{name:'thePoint'});
board.create('normal',[theLine,thePoint],{dash:1});
Move the point, and see how the dashed line remains perpendicular to the solid line. 		yields 
theCurve = board.create('functiongraph',
  [function(x) {return 1+(x-2)*(x-2)/3;},-1,5]);
thePoint = board.create('glider',[theCurve],{name:''});
board.create('normal',[theCurve,thePoint],{dash:1});
Move the point, and see how the dashed line remains perpendicular to the tangent line to the curve. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.
O
otherintersection creates a second intersection point (when there are two) for:
  • the intersection of a line and a circle
  • the intersection of two circles
board.create('otherintersection',[curve1,curve2,firstIntersectionPoint])
Example: 
center = board.create('point',[3,3],{name:''});
theCircle = board.create('circle',[center,2]);
p1 = board.create('point',[1,1],{name:''});
p2 = board.create('point',[5,3],{name:''});
theLine = board.create('line',[p1,p2]);
firstInt = board.create('intersection',[theCircle,theLine,0],
  {name:'firstInt'});
board.create('otherintersection',[theCircle,theLine,firstInt],
  {name:'otherInt'});
Move the circle and line and watch the intersection points change.
Also see intersection. 		yields
The JSXGraph Reference lists all possible attributes and methods for this element.