Howto include JSXGraph into web pages: Difference between revisions

From JSXGraph Wiki
Line 32: Line 32:
This division needs an ID. Using this ID, we declare this element to be the drawing panel of JSXGraph.
This division needs an ID. Using this ID, we declare this element to be the drawing panel of JSXGraph.


We can use as many different drawing panels as we like in one HTML file.
The following code has to be placed into the body part of an HTML file:
<source lang="xml">
<source lang="xml">
<div id="jsxgbox" style="width:500px; height:500px;"></div>
<div id="jsxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
<script type="text/javascript">
  var board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 50, unitY: 50});
var board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 50, unitY: 50});
</script>
</script>
</source>
</source>
We can use as many different drawing panels as we like in one HTML file.

Revision as of 14:34, 15 September 2008

Including JSXGraph into HTML

For including JSXGraph into HTML, three files are necessary:

You can either download these three files and use the local copy or you can use the online version.

Usage of a local copy

If you want to include a local copy of JSXGraph in your HTML file then you have to write the following lines into the document head: 

<head>
 <link rel="stylesheet" type="text/css" href="jsxgraph.css" />
 <script type="text/javascript" src="prototype.js"></script>
 <script type="text/javascript" src="jsxgraphcore.js"></script>
</head>

Usage of the online copy

If you want to include the online of JSXGraph in your HTML file then you have to write the following lines into the document head: 

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

Include a drawing panel into the HTML

The geometric construction which is displayed by JSXGraph resides in an HTML element. Usually, a div-element is taken. This division needs an ID. Using this ID, we declare this element to be the drawing panel of JSXGraph.

The following code has to be placed into the body part of an HTML file: 

<div id="jsxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 50, unitY: 50});
</script>

We can use as many different drawing panels as we like in one HTML file.

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Howto_include_JSXGraph_into_web_pages&oldid=59"