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.
Every command available in JSXGraph is 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 E through O.
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});
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 rubberband 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]);
The first two arguments are the foci.board.create('ellipse',[pointFocus1,pointFocus2,numberLengthOfMajorAxis,optCurveStart,optCurveEnd]); 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:

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:

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:

group 
creates an invisible grouping of points; if one point is moved, the entire group moves
board.create('group',[p1,p2,p3,...]);
Examples:

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]);
The first two arguments are the foci.board.create('hyperbola',[pointFocus1,pointFocus2,numberDistanceBetweenVertices,optCurveStart,optCurveEnd]); 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:

image 
displays an image at a specific location, with a specified size
board.create('image',[stringURL,pointPositionLowerLeftCorner,pointWidthHeight])
Example:

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:

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

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:

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

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])
Examples:
board.create('line',[c,a,b])

locus 
this seems to require serverside functionality; I couldn't figure out how to get it working, so I'll pass on this element for now.

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]);
If the argument is a line, then you get the midpoint of the two points used to create the line.board.create('midpoint',[line]); Example:

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:

normal 
constructs a normal (perpendicular) line to a given curve, through a specified point
board.create('normal',[curve,point]);
Examples:

otherintersection 
creates a second intersection point (when there are two) for:
board.create('otherintersection',[curve1,curve2,firstIntersectionPoint])
Example:
