Create your own constructions/visualizations using JavaScript

2008-09-15T20:14:10Z

84.147.76.214:

=== First step ===
Link to prototye.js and to jsxgraphcore.js:
<source lang="xml">
<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>
</source>

=== Second step ===
Insert a div inside of the document body:
<source lang="xml">
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
</source>

=== Third step ===
Connect JXG with the div (usually at the end of the document body)
and call initBoard():
<source lang="xml">
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50});
</script>
</source>
* 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.
=== Fourth step: Creating geometric elements ===
Through the variable board new geometry elements can be added to the board. All elements are added with the method createElement():
<source lang="javascript">
board.createElement('point', [1,3], {name:'A', strokecolor:'red'});
</source>
Another example:
<source lang="javascript">
board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true});
</source>
The parameters of createElement() are:
<source lang="javascript">
board.createElement(elementType, parentElements, attributes);
</source>
where
*elementType is a string containing the type of the element which is constructed. At the moment, possible types are:
#primitive elements:
**angle
**arc
**arrow
**circle
**curve
**group
**line
**point
**polygon
**sector
**text
**transform
#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())

JSXGraph Wiki - User contributions [en]

Create your own constructions/visualizations using JavaScript