Introduction: Difference between revisions

From JSXGraph Wiki
No edit summary
 
No edit summary
 
(One intermediate revision by the same user not shown)
Line 31: Line 31:
= Include a drawing panel into the HTML =
= Include a drawing panel into the HTML =
==General creation of a JSXGraph board==
==General creation of a JSXGraph board==
If you want to use JSXGraph in most cases you want to draw something on a web page (although some algorithms that don't depend on visual elements are implemented they're by now not so numerous...). 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:
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:


<source lang="xml">
<body>
[...]
<div id="box" class="jxgbox" style="width:200px; height:200px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 100, unitX: 50, unitY: 50});
</script>
[...]
</source>
This creates an empty drawing panel sized 200x200 pixels with the origin in the center of the box.
<jsxgraph height="200" width="200" box="jxgbox">
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 100, unitX: 50, unitY: 50});
</jsxgraph>
As already mentioned, ''originX'' and ''originY'' determine the origins position in screen coordinates relative to the upper left corner of the drawing box. In the above example the origin is in the center of the board with screen coordinates <tt>(250, 250)</tt> but has user coordinates - as origins should have - <tt>(0, 0)</tt>. This is the only coordinate you give in screen coordinates - all the other data (e.g. coordinates when constructing a point, parameters when plotting a curve) should be given in user coordinate system. The options ''unitX'' and ''unitY'' determine the amount of pixels representing one unit in user coordinates. For the beginning these two numbers should be equal otherwise you'd get different zoom factors in x and y direction resulting in circles appearing as ellipses.
Instead of supplying values for originX, originY, unitX, unitY, you can define the user coordinate region shown on the drawing panel directly. The option for that is called <tt>boundingbox</tt> and is used like that:
<source lang="javascript">
<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 10, 5, -2], axis:true});
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 10, 5, -2], axis:true});
</source>
</source>


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:
The axis option just draws a standard x- and y-axis on the board and is used to visualize the bounding box:


Line 59: Line 43:
var board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 10, 5, -2], axis:true});
var board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 10, 5, -2], axis:true});
</jsxgraph>
</jsxgraph>
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.


==Various options to affect the initialisation of the board==
==Various options to affect the initialisation of the board==
Line 68: Line 50:
! Option !! Type !! Default value !! Explanation
! Option !! Type !! Default value !! Explanation
|-
|-
| originX || positive integer || 150 || The horizontal position of the origin relative to the upper left corner of the drawing area.
| boundingbox || Array || [-5, 5, 5, -5] || The viewport of the board.
|-
| originY || positive integer || 150 || The vertical position of the origin relative to the upper left corner of the drawing area.
|-
| unitX || positive integer || 50 || Amount of pixels determining one unit in user coordinates in horizontal direction.
|-
| unitY || positive integer || 50 || Amount of pixels determining one unit in user coordinates in vertical direction.
|-
|-
| 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]].
| 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]].

Latest revision as of 11:33, 31 January 2013

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:

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.
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Introduction&oldid=5933"