{attributeName1:value1, attributeName2:value2, ...}
attribute name  attribute value  description 
boundingbox 
[x1,y1,x2,y2] 
user coordinates of upper left corner (x1,y1 )and bottom right corner ( x2,y2 ) of bounding box 
keepaspectratio 
true, false 
default is false; the $y$axis is adjusted, as needed, to make one horizontal unit equal to one vertical unit, so that (for example) circles defined by functions actually look like circles 
axis 
default: false

Default Configurationboard = JXG.JSXGraph.initBoard('box'); board.create('point',[0,0],{name:'origin'}); board.create('point',[1,1],{name:'(1,1)'});The default values are to show only the copyright and navigation information; no axes. It appears that the default coordinate setup is: var board = JXG.JSXGraph.initBoard('box', {originX:150, originY:150, unitX:50, unitY:50});This board is loaded into a 200 pixel by 200 pixel box with a border: <div id="box" style="width:200px; height:200px; border:1px solid black;"></div>The right navigation arrow allows you to see farther right in the coordinate plane; the contents appear to move to the left. Similarly, the up navigation arrow allows you to see farther up in the coordinate plane; the contents appear to move down. 

Using a Bounding Boxboard = JXG.JSXGraph.initBoard('box', {boundingbox:[20,10,10,5], axis:true, grid:true, showNavigation:false, showCopyright:false }); board.create('point',[10,5],{name:'(10,5)'});Using the boundingbox attribute gives a convenient alternative
tosetting the coordinate system with originX , originY ,
unitX , and unitY .You can completely ignore pixels. If you want the visible $x$axis to go from $\,a\,$ to $\,b\,$ ($\,a\lt b\,$) and the visible $y$axis to go from $\,c\,$ to $\,d\,$ ($\,c\lt d\,$), then the upper left corner is $\,(a,d)\,$ and the lower right corner is $\,(b,c)\,$, so you would use: boundingbox:[a,d,b,c]The grid is very light and difficult to see; I'd like to figure out how to make it more prominent. 

Aspect RatioLEFT GRAPH:board = JXG.JSXGraph.initBoard('box', {boundingbox:[2,1.5,2,0.5], axis:true,showNavigation:false,showCopyright:false}); board.create('functiongraph', [function(x){return Math.sqrt(1  x*x);},2,2]);RIGHT GRAPH: board = JXG.JSXGraph.initBoard('box', {boundingbox:[2,1.5,2,0.5], axis:true,showNavigation:false,showCopyright:false, keepaspectratio:true}); board.create('functiongraph', [function(x){return Math.sqrt(1  x*x);},2,2]);Recall that $\,x^2 + y^2 = 1\,$ defines a circle, centered at $\,(0,0)\,$, with radius $\,1\,$. Solving for $\,y\,$ and taking the positive solution yields the upperhalf of this circle: $\,y = \sqrt{1  x^2}\,$. In the left graph, the upperhalfcircle doesn't look like a circle, since the units on the horizontal and vertical axes are different. In the right graph, keepaspectratio has been set to ‘true’,causing the vertical axis to be adjusted to make the units equal. 
