Introduction
JSXGraph is a browser based library for interactive geometry, function plotting, graphs, and data visualization. It is completely written in JavaScript and everybody with a little experience with JavaScript shouldn't have problems using JSXGraph. Thanks to the dynamics of JavaScript JSXGraph is also very easy to extend and thanks to AJAX many other softwarepackages can be integrated.
If you have any question about JSXGraph or this documentation feel free to contact us.
Embed JSXGraph in a webpage
You need the following files:
- jsxgraphcore.js from http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js
- jsxgraph.css from http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css
You can either download these 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="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/jsxgraphcore.js"></script>
</head>
Include a drawing panel into the HTML
General creation of a JSXGraph board
Before anything can be drawn, you'll have to create a board JSXGraph can draw on. To create a board we need a HTML element - usually a div-element is taken - with an ID attribute. Using this ID, we declare this element to be a drawing panel of JSXGraph:
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 10, 5, -2], axis:true});
The bounding box determines the portion of the plane that is visible to the user. In the above example the horizontal and vertical viewport both go from -2 to 2. The syntax of this option is pretty easy to understand: It takes an array with 4 numbers defining the most left, top, right, bottom point available on screen in user coordinates. The axis option just draws a standard x- and y-axis on the board and is used to visualize the bounding box:
Various options to affect the initialisation of the board
Here are the other options explained together with the already mentioned in a small table:
| Option | Type | Default value | Explanation |
|---|---|---|---|
| boundingbox | Array | [-5, 5, 5, -5] | The viewport of the board. |
| axis | bool | false | If true, default axes are drawn on the board. To draw axes with special options set this to false and create them manually. See also Ticks. |
| grid | bool | false | If true, a grid is drawn on the board. |
| showNavigation | bool | true | If false, removes navigation menu from board. |
| showCopyright | bool | true | If false, removes copyright message from board. |
| zoomfactor | positive float | 1.0 | Sets zoom factor on the board. |
| zoomX | positive float | 1.0 | Sets zoom factor in horizontal direction. The final zoom factor in this direction is this value multiplied with zoomfactor. |
| zoomY | positive float | 1.0 | Sets zoom factor in vertical direction. The final zoom factor in this direction is this value multiplied with zoomfactor. |
