Create your own constructions/visualizations using JavaScript

First step

Link to prototye.js and to jsxgraphcore.js:

<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>

Second step

Insert a div inside of the document body:

<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>

Third step

Connect JXG with the div (usually at the end of the document body) and call initBoard():

<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50});
</script>

• Parameter 1: id of the division
• Parameter 2: properties of the board. Possible entries are:
  • originX
  • originY
  • unitX
  • unitY
  • zoomX
  • zoomY

 More than one boards can be initialised simultaneously in one HTML file.
 Through the variable board new geometry elements can be added to the 
 board. All elements are added with the method createElement():
   board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true, strokecolor:'red'}); 

 The parameters of createElement() are:
   board.createElement(elementType, parentElements, attributes);
 where 
   - elementType is a string containing the type of the element which is constructed.
     At the moment, possible types are:
   1) primitive elements:
    * angle
    * arc
    * arrow
    * circle
    * curve
    * group
    * line
    * point
    * polygon
    * sector
    * text
    * transform

   2) composite elements:
    * arrowparallel
    * bisector
    * circumcircle
    * circumcirclemidpoint
    * integral
    * midpoint
    * mirrorpoint
    * normal
    * parallel
    * parallelpoint
    * perpendicular
    * perpendicularpoint
    * reflection
   
   - parentElements is an array containing the parameters which define
     the element. This can be parent elements like two points which define
     a line. It can also consist of JavaScript functions, numbers,
     and strings containing GEONExT syntax. The possible array elements
     depend on the element type.

   - attributes is a JavaScript object. Usually it is given in the "literal object" form
       {key1:value1, key2:value2, ...}

 Properties of a point:
 - style
 - strokeColor
 - strokeWidth
 - fillColor
 - highlightStrokeColor
 - highlightFillColor
 - labelColor
 - 
 - visible
 - fixed
 - draft
 - trace

 - labelX
 - labelY
 - showcoord

 Additional properties of a line:
 - straightFirst
 - straightLast

 There are no additional properties of a circle

Additional properties for an element:

 needsRegularUpdate = [true]/false (eg axis are set to needsRegularUpdate=false)
 These elements are updated only, if the origin of the board is moved or after zooming.
 

Possible parameters: el.setProperty('key1:value1','key2:value2',...); el.setProperty([key1:value1],[key2:value2],...); el.setProperty({key1:value1, key2:value2},...);

---

Methods JXG.JSXGraph: var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50}); Initializes a new board without loading a construction.

var board = JXG.JSXGraph.loadBoardFromFile(DOMid, filename, format); DOMid is the id of the div (or other HTML element) where the viewer should be displayed. filename is the name of the file containing the geometric construction. format iss the file format: 'Geonext' or 'Intergeo' Returns a pointer to the board.

var board = JXG.JSXGraph.loadBoardFromString(DOMid, string, format); Same as JXG.JSXGraph.loadBoardFromFile, but string contains the complete data of the geometric construction.

JXG.JSXGraph.freeBoard(board); Deletes the contents of a board. Should be called before a new construction is loaded.

The updates can be supressed with board.suspendUpdate() board.unsuspendUpdate() reestablishes the updating of all elements (and fires one update())