http://jsxgraph.org/wiki/index.php?title=Introduction&feed=atom&action=historyIntroduction - Revision history2024-03-29T14:19:05ZRevision history for this page on the wikiMediaWiki 1.40.1http://jsxgraph.org/wiki/index.php?title=Introduction&diff=5933&oldid=prevMichael at 11:33, 31 January 20132013-01-31T11:33:33Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 11:33, 31 January 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l31">Line 31:</td>
<td colspan="2" class="diff-lineno">Line 31:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Include a drawing panel into the HTML =</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Include a drawing panel into the HTML =</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==General creation of a JSXGraph board==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==General creation of a JSXGraph board==</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">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...). </del>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:</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>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:</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><source lang="xml"></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><body></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[...]</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><div id="box" class="jxgbox" style="width:200px; height:200px;"></div></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><script type="text/javascript"></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"> var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-2, 2, 2, -2]});</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></script></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[...]</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></source></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">This creates an empty drawing panel sized 200x200 pixels with the origin in the center of the box.</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><jsxgraph height="200" width="200" box="jxgbox"></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-2, 2, 2, -2]});</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></jsxgraph></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">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.</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">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:</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="javascript"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="javascript"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 10, 5, -2], axis:true});</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 10, 5, -2], axis:true});</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">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.</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>The axis option just draws a standard x- and y-axis on the board and is used to visualize the bounding box:</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>The axis option just draws a standard x- and y-axis on the board and is used to visualize the bounding box:</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l59">Line 59:</td>
<td colspan="2" class="diff-lineno">Line 43:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 10, 5, -2], axis:true});</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 10, 5, -2], axis:true});</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></jsxgraph></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></jsxgraph></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">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.</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Various options to affect the initialisation of the board==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Various options to affect the initialisation of the board==</div></td></tr>
</table>Michaelhttp://jsxgraph.org/wiki/index.php?title=Introduction&diff=5932&oldid=prevMichael at 11:30, 31 January 20132013-01-31T11:30:15Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 11:30, 31 January 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l38">Line 38:</td>
<td colspan="2" class="diff-lineno">Line 38:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div id="box" class="jxgbox" style="width:200px; height:200px;"></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div id="box" class="jxgbox" style="width:200px; height:200px;"></div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><script type="text/javascript"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><script type="text/javascript"></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> var board = JXG.JSXGraph.initBoard('jxgbox', {<del style="font-weight: bold; text-decoration: none;">originX</del>: <del style="font-weight: bold; text-decoration: none;">100</del>, <del style="font-weight: bold; text-decoration: none;">originY: 100</del>, <del style="font-weight: bold; text-decoration: none;">unitX: 50</del>, <del style="font-weight: bold; text-decoration: none;">unitY: 50</del>});</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> var board = JXG.JSXGraph.initBoard('jxgbox', {<ins style="font-weight: bold; text-decoration: none;">boundingbox</ins>: <ins style="font-weight: bold; text-decoration: none;">[-2</ins>, <ins style="font-weight: bold; text-decoration: none;">2</ins>, <ins style="font-weight: bold; text-decoration: none;">2</ins>, <ins style="font-weight: bold; text-decoration: none;">-2]</ins>});</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></script></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></script></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[...]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[...]</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l44">Line 44:</td>
<td colspan="2" class="diff-lineno">Line 44:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>This creates an empty drawing panel sized 200x200 pixels with the origin in the center of the box.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>This creates an empty drawing panel sized 200x200 pixels with the origin in the center of the box.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><jsxgraph height="200" width="200" box="jxgbox"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><jsxgraph height="200" width="200" box="jxgbox"></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>var board = JXG.JSXGraph.initBoard('jxgbox', {<del style="font-weight: bold; text-decoration: none;">originX</del>: <del style="font-weight: bold; text-decoration: none;">100</del>, <del style="font-weight: bold; text-decoration: none;">originY: 100</del>, <del style="font-weight: bold; text-decoration: none;">unitX: 50</del>, <del style="font-weight: bold; text-decoration: none;">unitY: 50</del>});</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>var board = JXG.JSXGraph.initBoard('jxgbox', {<ins style="font-weight: bold; text-decoration: none;">boundingbox</ins>: <ins style="font-weight: bold; text-decoration: none;">[-2</ins>, <ins style="font-weight: bold; text-decoration: none;">2</ins>, <ins style="font-weight: bold; text-decoration: none;">2</ins>, <ins style="font-weight: bold; text-decoration: none;">-2]</ins>});</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></jsxgraph></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></jsxgraph></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l68">Line 68:</td>
<td colspan="2" class="diff-lineno">Line 68:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>! Option !! Type !! Default value !! Explanation</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>! Option !! Type !! Default value !! Explanation</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>| <del style="font-weight: bold; text-decoration: none;">originX </del>|| <del style="font-weight: bold; text-decoration: none;">positive integer </del>|| <del style="font-weight: bold; text-decoration: none;">150 || The horizontal position of the origin relative to the upper left corner of the drawing area.</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>| <ins style="font-weight: bold; text-decoration: none;">boundingbox </ins>|| <ins style="font-weight: bold; text-decoration: none;">Array </ins>|| <ins style="font-weight: bold; text-decoration: none;">[-5, 5, 5, </ins>-<ins style="font-weight: bold; text-decoration: none;">5] </ins>|| The <ins style="font-weight: bold; text-decoration: none;">viewport </ins>of the <ins style="font-weight: bold; text-decoration: none;">board</ins>.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">|</del>-</div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">| originY || positive integer || 150 </del>|| The <del style="font-weight: bold; text-decoration: none;">vertical position </del>of the <del style="font-weight: bold; text-decoration: none;">origin relative to the upper left corner of the drawing area.</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">|-</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">| unitX || positive integer || 50 || Amount of pixels determining one unit in user coordinates in horizontal direction.</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">|-</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">| unitY || positive integer || 50 || Amount of pixels determining one unit in user coordinates in vertical direction</del>.</div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>| 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]].</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>| 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]].</div></td></tr>
</table>Michaelhttp://jsxgraph.org/wiki/index.php?title=Introduction&diff=3178&oldid=prevA WASSERMANN at 14:30, 29 October 20092009-10-29T14:30:30Z<p></p>
<p><b>New page</b></p><div>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.<br />
<br />
If you have any question about JSXGraph or this documentation feel free to [http://jsxgraph.uni-bayreuth.de/wp/contact/ contact us].<br />
<br />
=Embed JSXGraph in a webpage=<br />
<br />
You need the following files:<br />
* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js]<br />
* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]<br />
You can either download these files and use the local copy or you can use the online version.<br />
<br />
== Usage of a local copy ==<br />
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:<br />
<source lang="xml"><br />
<head><br />
<link rel="stylesheet" type="text/css" href="jsxgraph.css" /><br />
<script type="text/javascript" src="jsxgraphcore.js"></script><br />
</head><br />
</source><br />
<br />
== Usage of the online copy ==<br />
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:<br />
<source lang="xml"><br />
<head><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
</head><br />
</source><br />
<br />
<br />
= Include a drawing panel into the HTML =<br />
==General creation of a JSXGraph board==<br />
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:<br />
<br />
<source lang="xml"><br />
<body><br />
[...]<br />
<div id="box" class="jxgbox" style="width:200px; height:200px;"></div><br />
<script type="text/javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 100, unitX: 50, unitY: 50});<br />
</script><br />
[...]<br />
</source><br />
This creates an empty drawing panel sized 200x200 pixels with the origin in the center of the box.<br />
<jsxgraph height="200" width="200" box="jxgbox"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 100, unitX: 50, unitY: 50});<br />
</jsxgraph><br />
<br />
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.<br />
<br />
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:<br />
<source lang="javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 10, 5, -2], axis:true});<br />
</source><br />
<br />
The axis option just draws a standard x- and y-axis on the board and is used to visualize the bounding box:<br />
<br />
<jsxgraph height="500" width="500" box="jxgbox2"><br />
var board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 10, 5, -2], axis:true});<br />
</jsxgraph><br />
<br />
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.<br />
<br />
==Various options to affect the initialisation of the board==<br />
Here are the other options explained together with the already mentioned in a small table:<br />
<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Option !! Type !! Default value !! Explanation<br />
|-<br />
| originX || positive integer || 150 || The horizontal position of the origin relative to the upper left corner of the drawing area.<br />
|-<br />
| originY || positive integer || 150 || The vertical position of the origin relative to the upper left corner of the drawing area.<br />
|-<br />
| unitX || positive integer || 50 || Amount of pixels determining one unit in user coordinates in horizontal direction.<br />
|-<br />
| unitY || positive integer || 50 || Amount of pixels determining one unit in user coordinates in vertical direction.<br />
|-<br />
| 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]].<br />
|-<br />
| grid || bool || false || If ''true'', a grid is drawn on the board.<br />
|-<br />
| showNavigation || bool || true || If ''false'', removes navigation menu from board.<br />
|-<br />
| showCopyright || bool || true || If ''false'', removes copyright message from board.<br />
|-<br />
| zoomfactor || positive float || 1.0 || Sets zoom factor on the board.<br />
|-<br />
| zoomX || positive float || 1.0 || Sets zoom factor in horizontal direction. The final zoom factor in this direction is this value multiplied with zoomfactor.<br />
|-<br />
| zoomY || positive float || 1.0 || Sets zoom factor in vertical direction. The final zoom factor in this direction is this value multiplied with zoomfactor.<br />
|}</div>A WASSERMANNhttp://jsxgraph.org/wiki/index.php?title=Introduction&diff=2372&oldid=prevMichael at 06:01, 24 June 20092009-06-24T06:01:34Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 06:01, 24 June 2009</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l59">Line 59:</td>
<td colspan="2" class="diff-lineno">Line 59:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>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 boundingbox and is used like that:</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>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 <ins style="font-weight: bold; text-decoration: none;"><tt></ins>boundingbox<ins style="font-weight: bold; text-decoration: none;"></tt> </ins>and is used like that:</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="javascript"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="javascript"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 10, 5, -2], axis:true});</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 10, 5, -2], axis:true});</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l67">Line 67:</td>
<td colspan="2" class="diff-lineno">Line 67:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><jsxgraph height="500" width="500" box="jxgbox2"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><jsxgraph height="500" width="500" box="jxgbox2"></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>var board = JXG.JSXGraph.initBoard('jxgbox2', {<del style="font-weight: bold; text-decoration: none;">originX</del>: <del style="font-weight: bold; text-decoration: none;">100</del>, <del style="font-weight: bold; text-decoration: none;">originY: 100</del>, <del style="font-weight: bold; text-decoration: none;">unitX: 50</del>, <del style="font-weight: bold; text-decoration: none;">unitY</del>: <del style="font-weight: bold; text-decoration: none;">50</del>});</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>var board = JXG.JSXGraph.initBoard('jxgbox2', {<ins style="font-weight: bold; text-decoration: none;">boundingbox</ins>: <ins style="font-weight: bold; text-decoration: none;">[-5</ins>, <ins style="font-weight: bold; text-decoration: none;">10, 5</ins>, <ins style="font-weight: bold; text-decoration: none;">-2]</ins>, <ins style="font-weight: bold; text-decoration: none;">axis</ins>:<ins style="font-weight: bold; text-decoration: none;">true</ins>});</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></jsxgraph></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></jsxgraph></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">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.</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Various options to affect the initialisation of the board==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Various options to affect the initialisation of the board==</div></td></tr>
</table>Michaelhttp://jsxgraph.org/wiki/index.php?title=Introduction&diff=2371&oldid=prevMichael at 05:58, 24 June 20092009-06-24T05:58:59Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 05:58, 24 June 2009</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l57">Line 57:</td>
<td colspan="2" class="diff-lineno">Line 57:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></jsxgraph></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></jsxgraph></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>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 <del style="font-weight: bold; text-decoration: none;">circle </del>appearing as ellipses. <del style="font-weight: bold; text-decoration: none;">To visualize what user coordinates are, let's try another ''initBoard'' option: '''axis'''</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>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 <ins style="font-weight: bold; text-decoration: none;">circles </ins>appearing as ellipses.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><source lang="xml"></del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Instead of supplying values for originX, originY, unitX, unitY, you can define the user coordinate region shown on the drawing panel directly</ins>. <ins style="font-weight: bold; text-decoration: none;">The option for that is called boundingbox and is used like that</ins>:</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><body></del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">source lang</ins>="javascript"></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[..</del>.<del style="font-weight: bold; text-decoration: none;">]</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>var board = JXG.JSXGraph.initBoard('jxgbox', {<ins style="font-weight: bold; text-decoration: none;">boundingbox</ins>: <ins style="font-weight: bold; text-decoration: none;">[-5, </ins>10, <ins style="font-weight: bold; text-decoration: none;">5</ins>, <ins style="font-weight: bold; text-decoration: none;">-2]</ins>, axis:true});</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><div id="box" class="jxgbox" style="width:200px; height</del>:<del style="font-weight: bold; text-decoration: none;">200px;"></div></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del style="font-weight: bold; text-decoration: none;">script type</del>="<del style="font-weight: bold; text-decoration: none;">text/</del>javascript"></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"> </del>var board = JXG.JSXGraph.initBoard('jxgbox', {<del style="font-weight: bold; text-decoration: none;">originX</del>: 10, <del style="font-weight: bold; text-decoration: none;">originY: 150</del>, <del style="font-weight: bold; text-decoration: none;">unitX: 50, unitY: 50</del>, axis: true});</div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></script></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[...]</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><jsxgraph height="<del style="font-weight: bold; text-decoration: none;">200</del>" width="<del style="font-weight: bold; text-decoration: none;">200</del>" box="<del style="font-weight: bold; text-decoration: none;">jxgbox1" style="float: right</del>"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>var <del style="font-weight: bold; text-decoration: none;">b1 </del>= JXG.JSXGraph.initBoard('<del style="font-weight: bold; text-decoration: none;">jxgbox1</del>', {originX: <del style="font-weight: bold; text-decoration: none;">10</del>, originY: <del style="font-weight: bold; text-decoration: none;">150</del>, unitX: 50, unitY: 50<del style="font-weight: bold; text-decoration: none;">, axis: true</del>});</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">The axis option just draws a standard x- and y-axis on the board and is used to visualize the bounding box:</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><jsxgraph height="<ins style="font-weight: bold; text-decoration: none;">500</ins>" width="<ins style="font-weight: bold; text-decoration: none;">500</ins>" box="<ins style="font-weight: bold; text-decoration: none;">jxgbox2</ins>"></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>var <ins style="font-weight: bold; text-decoration: none;">board </ins>= JXG.JSXGraph.initBoard('<ins style="font-weight: bold; text-decoration: none;">jxgbox2</ins>', {originX: <ins style="font-weight: bold; text-decoration: none;">100</ins>, originY: <ins style="font-weight: bold; text-decoration: none;">100</ins>, unitX: 50, unitY: 50});</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></jsxgraph></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></jsxgraph></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">Just what '''axis''' let's you expect this option draws an axis on the board. And as you already may have noticed, you can use as many different drawing panels as we like in one HTML file.</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Various options to affect the initialisation of the board==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Various options to affect the initialisation of the board==</div></td></tr>
</table>Michaelhttp://jsxgraph.org/wiki/index.php?title=Introduction&diff=2036&oldid=prevMichael: New page: 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 experien...2009-05-16T15:53:05Z<p>New page: 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 experien...</p>
<p><b>New page</b></p><div>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.<br />
<br />
If you have any question about JSXGraph or this documentation feel free to [http://jsxgraph.uni-bayreuth.de/wp/contact/ contact us].<br />
<br />
=Embed JSXGraph in a webpage=<br />
<br />
To use JSXGraph on your webpage you first have to load either [http://prototypejs.org/ Prototype] or [http://jquery.com/ JQuery] via HTML <tt>script</tt> tag. Both libraries come with your copy of JSXGraph or can be downloaded here:<br />
<br />
* prototype.js from [http://www.prototypejs.org http://www.prototypejs.org] or [http://jsxgraph.uni-bayreuth.de/distrib/prototype.js local copy]<br />
* jquery.min.js from [http://www.jquery.com http://www.jquery.com] or [http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js local copy]<br />
You can choose between those two whatever you want, JSXGraph will run with both equally good.<br />
<br />
And of course you need JSXGraph itself:<br />
* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js]<br />
* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]<br />
You can either download these files and use the local copy or you can use the online version.<br />
<br />
== Usage of a local copy ==<br />
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:<br />
<source lang="xml"><br />
<head><br />
<link rel="stylesheet" type="text/css" href="jsxgraph.css" /><br />
<script type="text/javascript" src="prototype.js"></script><br />
<script type="text/javascript" src="jsxgraphcore.js"></script><br />
</head><br />
</source><br />
If you prefer to run JSXGraph with jQuery, replace ''prototype.js'' with jQuery.<br />
<br />
== Usage of the online copy ==<br />
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:<br />
<source lang="xml"><br />
<head><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
</head><br />
</source><br />
Same as above, if you'd prefer to run prototype, replace ''jquery.min.js'' with ''prototype.js''.<br />
<br />
<br />
= Include a drawing panel into the HTML =<br />
==General creation of a JSXGraph board==<br />
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:<br />
<br />
<source lang="xml"><br />
<body><br />
[...]<br />
<div id="box" class="jxgbox" style="width:200px; height:200px;"></div><br />
<script type="text/javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 100, unitX: 50, unitY: 50});<br />
</script><br />
[...]<br />
</source><br />
This creates an empty drawing panel sized 200x200 pixels with the origin in the center of the box.<br />
<jsxgraph height="200" width="200" box="jxgbox"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 100, unitX: 50, unitY: 50});<br />
</jsxgraph><br />
<br />
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 circle appearing as ellipses. To visualize what user coordinates are, let's try another ''initBoard'' option: '''axis'''<br />
<br />
<source lang="xml"><br />
<body><br />
[...]<br />
<div id="box" class="jxgbox" style="width:200px; height:200px;"></div><br />
<script type="text/javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 10, originY: 150, unitX: 50, unitY: 50, axis: true});<br />
</script><br />
[...]<br />
</source><br />
<jsxgraph height="200" width="200" box="jxgbox1" style="float: right"><br />
var b1 = JXG.JSXGraph.initBoard('jxgbox1', {originX: 10, originY: 150, unitX: 50, unitY: 50, axis: true});<br />
</jsxgraph><br />
Just what '''axis''' let's you expect this option draws an axis on the board. And as you already may have noticed, you can use as many different drawing panels as we like in one HTML file.<br />
<br />
==Various options to affect the initialisation of the board==<br />
Here are the other options explained together with the already mentioned in a small table:<br />
<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Option !! Type !! Default value !! Explanation<br />
|-<br />
| originX || positive integer || 150 || The horizontal position of the origin relative to the upper left corner of the drawing area.<br />
|-<br />
| originY || positive integer || 150 || The vertical position of the origin relative to the upper left corner of the drawing area.<br />
|-<br />
| unitX || positive integer || 50 || Amount of pixels determining one unit in user coordinates in horizontal direction.<br />
|-<br />
| unitY || positive integer || 50 || Amount of pixels determining one unit in user coordinates in vertical direction.<br />
|-<br />
| 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]].<br />
|-<br />
| grid || bool || false || If ''true'', a grid is drawn on the board.<br />
|-<br />
| zoomfactor || positive float || 1.0 || Sets zoom factor on the board.<br />
|-<br />
| zoomX || positive float || 1.0 || Sets zoom factor in horizontal direction. The final zoom factor in this direction is this value multiplied with zoomfactor.<br />
|-<br />
| zoomY || positive float || 1.0 || Sets zoom factor in vertical direction. The final zoom factor in this direction is this value multiplied with zoomfactor.<br />
|}</div>Michael