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 A through D.
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});
angle  an angle defined by three points; visually gives a sector with radius optionally defined by the radius attribute (see example);default value of radius is 1
board.create('angle',[point1,point2,point3]);
The angle is drawn counterclockwise:from point1 to point2 (vertex) to point3 Examples:
see also: sector 
arc 
a segment of the circumference of a circle; defined by three points:
board.create('arc',[centerOfCirclePoint,radiusPoint,anglePoint]);
The arc is constructed as follows:

arrow 
an arrow from startPoint
to endPoint
board.create('arrow',[startPoint,endPoint]);
Examples:

arrowparallel 
an arrow through a given point, parallel to a given line
board.create('arrowparallel',[line,point]);
When line is created byboard.create('line',[p1,p2]); then the direction of the parallel arrow is from p1 to p2 ,and the length is the distance from p1 to p2 .Examples:

axis 
an axis through two point with default ticks; the first point becomes the origin of the axis
board.create('axis',[point1,point2]);
Examples:

bisector 
a halfline which divides an angle into two equal angles; it starts at the vertex and is inside the angle
board.create('bisector',[point1,vertexPoint,point2]);
The angle to be bisected is drawn counterclockwise:from point1 to vertexPoint to point2 Examples:

bisectorlines 
given two intersecting lines,bisectorlines creates another
pair of intersecting lines that bisect the given lines
board.create('bisectorlines',[line1,line2]);
Examples:

circle 
the set of all points that are equidistant from a fixed point, called the center; can be constructed in four ways:
board.create('circle',[centerPoint,pointOnCircle]);
In the first three cases:
board.create('circle',[centerPoint,radiusOfCircle]); board.create('circle',[centerPoint,circleWithDesiredRadius]); board.create('circle',[point1,point2,point3]);
Examples:

circumcenter 
given three noncollinear points, creates the center of the unique circle that passes through the three points; the center of the circle that circumscribes a triangle
board.create('circumcenter',[point1,point2,point3]);
Examples:

circumcirclesector 
three noncollinear points uniquely determine a circle;circumcirclesector yields the sector of that circle generated
by:
board.create('circumcirclesector',[point1,point2,point3]);
Examples:

conic 
Every equation of the form $Ax^2 + Bxy + Cy^2 + Dx + Ey + F = 0$ graphs as a conic section (possibly degenerate) in the $xy$ plane. The expression $B^2  4AC$ determines the type of conic section:
For example, if $A = B = C = 0$ then the resulting equation is a line, which is a degenerate form of a parabola. Five points, no three of which are collinear, uniquely determine a nondegenerate conic.
board.create('conic',[point1,point2,point3,point4,point5]);
Example:
Matrix representation of the Conic EquationBy multiplying out, you can verify that the equation $\,Ax^2 + Bxy + Cy^2 + Dx + Ey + F = 0\,$ can be written in matrix form as: $$ \begin{bmatrix} x & y & 1 \end{bmatrix} \cdot \overbrace{ \begin{bmatrix} A & B/2 & D/2 \cr B/2 & C & E/2 \cr D/2 & E/2 & F \cr \end{bmatrix}}^{:= M} \cdot \begin{bmatrix} x \cr y \cr 1 \end{bmatrix} = 0 $$ Since the matrix $\,M\,$ is symmetric, it is uniquely defined by $$ \begin{gather} a_{11} = A\cr a_{22} = C\cr a_{33} = F\cr a_{21} = B/2\cr a_{31} = D/2\cr a_{32} = E/2 \end{gather} $$ and these six matrix entries (in this order) can be used to create a conic:
board.create('conic',[$a_{11}$,$a_{22}$,$a_{33}$,$a_{21}$,$a_{31}$,$a_{32}$]);

curve 
This command can be used to create parametric curves,
polar curves, and
piecewiselinear data graphs. PARAMETRIC CURVES: A parametric curve is a curve swept out in time; the point at time $\,t\,$ is $\,(x(t),y(t))\,.$
board.create('curve',[x,y,a,b]);
The coordinates $\,x = x(t)\,$ and $\,y = y(t)\,$ are given as functions terms.The graph is drawn for $\,t\,$ in the interval $\,[a,b]\,,$ with default values $\,a=10\,$ and $\,b=10\,.$ Examples:
POLAR CURVES: In a polar coordinate system, the position of each point is determined by its distance $\,r\,$ from an ‘origin’, and its angle $\,\theta\,$ (counterclockwise, measured in radians) from the horizontalright direction. Use the following syntax for a polar curve $\,r = f(\theta)\,$:
board.create('curve',[functionOfTheta,[xOrigin,yOrigin],optBegValTheta,optEndValTheta]);
The first argument is a function term $\,r(\theta)\,$ describing the polar curve.The second argument is the (cartesian coordinate) origin of the curve; use $\,[0,0]\,$ for no offset. The remaining two arguments give the beginning and end values for $\,\theta\,$; the defaults values are $\,0\,$ and $\,2\pi\,.$ Example:
PIECEWISELINEAR DATA GRAPHS: A collection of cartesiancoordinate points are connected with line segments; the $x$values and $y$values are held in separate arrays.
board.create('curve',[xArray,yArray]);
Example:
