JSXGraph Wiki - User contributions [en]

Create your own constructions/visualizations using JavaScript

2008-09-15T20:02:59Z

84.147.115.75:

=== 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

Create your own constructions/visualizations using JavaScript

2008-09-15T19:58:27Z

84.147.115.75:

=== 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

Create your own constructions/visualizations using JavaScript

2008-09-15T19:55:08Z

84.147.115.75: /* First step */

Create your own constructions/visualizations using JavaScript

2008-09-15T19:53:38Z

84.147.115.75: /* 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/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
</source>

Create your own constructions/visualizations using JavaScript

2008-09-15T19:52:59Z

84.147.115.75: 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...

Displaying GEONExT constructions

2008-09-15T19:46:14Z

84.147.115.75:

=== Loading a GEONExT construction from a file ===
Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e.
into the division with the id "box".
<source lang="xml">
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
var brd = JXG.JSXGraph.loadBoardFromFile('box', 'pythagoras.gxt', 'Geonext');
</script>
</source>

=== Loading a GEONExT construction from a string ===
The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64.
This string can be written directly into the HTML file. Here is an example:
<source lang="xml">
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
var brd = JXG.JSXGraph.loadBoardFromString('box', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');
</script>
</source>