Create your own constructions/visualizations using JavaScript

From JSXGraph Wiki
Revision as of 20:49, 15 September 2008 by 84.147.71.221 (talk)

First step

Link to prototye.js and to jsxgraphcore.js:

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

Second step

Insert a div inside of the document body:

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

Third step

Connect JXG with the div (usually at the end of the document body) and call initBoard():

<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50});
</script>
  • Parameter 1: id of the division
  • Parameter 2: properties of the board. Possible entries are:
    • originX
    • originY
    • unitX
    • unitY
    • zoomX
    • zoomY

More than one boards can be initialised simultaneously in one HTML file.

Fourth step: Creating geometric elements

Through the variable board new geometry elements can be added to the board. All elements are added with the method createElement():

board.createElement('point', [1,3], {name:'A', strokecolor:'red'});

Another example:

board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true});

The parameters of createElement() are:

board.createElement(elementType, parentElements, attributes);

where

  • elementType is a string containing the type of the element which is constructed. At the moment, possible types are:
    • primitive elements:
      • angle
      • arc
      • arrow
      • circle
      • curve
      • group
      • line
      • point
      • polygon
      • sector
      • text
      • transform
    • composite elements:
      • arrowparallel
      • bisector
      • circumcircle
      • circumcirclemidpoint
      • integral
      • midpoint
      • mirrorpoint
      • normal
      • parallel
      • parallelpoint
      • perpendicular
      • perpendicularpoint
      • reflection
  • parentElements is an array containing the parameters which define the element. This can be parent elements like two points which define a line. It can also consist of JavaScript functions, numbers, and strings containing GEONExT syntax. The possible array elements depend on the element type.
  • attributes is a JavaScript object. Usually it is given in the "literal object" form
{key1:value1, key2:value2, ...}
  • Properties of a point:
    • style
    • strokeColor
    • strokeWidth
    • fillColor
    • highlightStrokeColor
    • highlightFillColor
    • labelColor
    • visible
    • fixed
    • draft
    • trace
  • Additional properties of a line:
    • straightFirst
    • straightLast

There are no additional properties of a circle

  • Additional properties for an element:
    • needsRegularUpdate = [true]/false (eg axis are set to needsRegularUpdate=false) These elements are updated only, if the origin of the board is moved or after zooming
  • Possible parameters:
el.setProperty('key1:value1','key2:value2',...);
el.setProperty([key1:value1],[key2:value2],...);
el.setProperty({key1:value1, key2:value2},...);