Create your own constructions/visualizations using JavaScript: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 21: Line 21:
</script>
</script>
</source>
</source>
* Parameter 1: id of the division
# Parameter 1: id of the division
* Parameter 2: properties of the board. Possible entries are:
* Parameter 2: properties of the board. Possible entries are:
    - originX
** originX
    - originY
** originY
    - unitX
** unitX
    - unitY
** unitY
    - zoomX
** zoomX
    - zoomY
** zoomY

Revision as of 20:02, 15 September 2008

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>
  1. Parameter 1: id of the division
  • Parameter 2: properties of the board. Possible entries are:
** originX
** originY
** unitX
** unitY
** zoomX
** zoomY