Bounding box

From JSXGraph Wiki
Revision as of 09:06, 18 February 2010 by Michael (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Instead of supplying values for originX, originY, unitX, unitY, we can alternatively provide a bounding box to specify the dimensions for the drawing panel defined by

<div id="jxgbox" class="jxgbox" style="width:500px; height:500px;"></div>

The JavaScript code

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], keepaspectratio: true, axis:true});

sets the vertical and horizontal units and the position of the origin such that the upper left corner of the drawing panel has position (-5,10) and the lower right corner of the drawing panel has position (5,-2).

The source code of the page looks like this:

<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>
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], axis:true});
</script>