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

From JSXGraph Wiki
No edit summary
No edit summary
Line 22: Line 22:
</source>
</source>
* Parameter 1: id of the div tag
* Parameter 1: id of the div tag
* Parameter 2: properties of the board. Possible entries are:
* Parameter 2: properties of the board.  
===Possible properties of the board===
** originX, originY (in pixel)
** originX, originY (in pixel)
** unitX, unitY (in pixel)
** unitX, unitY (in pixel)
** zoomX, zoomY
** zoomX, zoomY
** [[Bounding box]]
** axis (true/false)
** axis (true/false)
** grid (true/false)
** grid (true/false)
** [[Bounding box]]
** showNavigation (true/false)
** showCopyright (true/false)
More than one boards can be initialised simultaneously in one HTML file.
More than one boards can be initialised simultaneously in one HTML file.
The result:
The result:

Revision as of 22:19, 23 June 2009

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, axis:true, grid:true});
</script>
  • Parameter 1: id of the div tag
  • Parameter 2: properties of the board.

Possible properties of the board

    • originX, originY (in pixel)
    • unitX, unitY (in pixel)
    • zoomX, zoomY
    • Bounding box
    • axis (true/false)
    • grid (true/false)
    • showNavigation (true/false)
    • showCopyright (true/false)

More than one boards can be initialised simultaneously in one HTML file. The result:

The complete code: 

<head>
<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>
</head>
<body>
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50, axis:true, grid:true});
</script>
</body>

Fourth step: Creating geometric elements

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Create_your_own_constructions/visualizations_using_JavaScript&oldid=2358"