Difference between revisions of "Create your own constructions/visualizations using JavaScript"

From JSXGraph Wiki
Jump to: navigation, search
 
Line 17: Line 17:
 
<source lang="xml">
 
<source lang="xml">
 
<script type="text/javascript">
 
<script type="text/javascript">
  var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50, axis:true, grid:true});
+
  var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
 
</script>
 
</script>
 
</source>
 
</source>
Line 26: Line 26:
 
* unitX, unitY (in pixel)
 
* unitX, unitY (in pixel)
 
* zoomX, zoomY
 
* zoomX, zoomY
* [[Bounding box]]
+
* Or easier than origin*, unit* and zoom*: [[Bounding box]]
 
* axis (true/false)
 
* axis (true/false)
 
* grid (true/false)
 
* grid (true/false)
Line 33: Line 33:
 
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====
<html>
+
<jsxgraph box="box" width="400" height="400">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
+
  var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
+
</jsxgraph>
<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>
 
</html>
 
 
====The complete code====
 
====The complete code====
 
<source lang="xml">
 
<source lang="xml">
Line 50: Line 46:
 
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
 
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
 
<script type="text/javascript">
 
<script type="text/javascript">
  var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50, axis:true, grid:true});
+
  var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
 
</script>
 
</script>
 
</body>
 
</body>
 
</source>
 
</source>
 
=== Fourth step: [[Creating geometric elements]] ===
 
=== Fourth step: [[Creating geometric elements]] ===

Latest revision as of 09:45, 9 June 2011

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/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', {boundingbox: [-2, 4, 6, -4], 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
  • Or easier than origin*, unit* and zoom*: 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/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', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
</script>
</body>

Fourth step: Creating geometric elements