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

From JSXGraph Wiki
New page: === 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...
 
No edit summary
 
(20 intermediate revisions by 7 users not shown)
Line 1: Line 1:
=== First step ===
=== 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/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', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
</script>
</source>
* 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====
<jsxgraph box="box" width="400" height="400">
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
</jsxgraph>


- Link to prototye.js and to jsxgraphcore.js:
====The complete code====
<source lang="xml">
<source lang="xml">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<head>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<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>
<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>
</source>
</source>
=== Fourth step: [[Creating geometric elements]] ===

Latest revision as of 07: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

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