Bounding Box

51 views
Skip to first unread message

R C

unread,
Sep 7, 2016, 12:17:14 PM9/7/16
to JSXGraph
I am having a problem in setting up the bounding box correctly to show the axes.

With the html file


````
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
 #pagewrapper {
     border: 1px solid #999;
     background-color: #f5f5f5;
     margin: 10px 50px;
 }
 
 @media (min-width: 500px) {
     .row {
display: flex;
width: 100%;
     }
     .f {
width: 50%;
outline: 1px solid red;
     }
     
 }
</style>
</head>
<body>
    <div id="pagewrapper">
      <div class="row">
<p>
    <link rel='stylesheet' type='text/css' href='http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css' />
    <script src='http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js' type='text/javascript'></script>
    <script src='http://jsxgraph.uni-bayreuth.de/distrib/GeonextReader.js' type='text/javascript'></script>
    <div id='box1' class='half' style='width:600px; height:600px;'></div>
    <div id='box2' class='half' style='width:600px; height:600px;'></div>
    <script type='text/javascript', src="example.js"></script>
</p>
        </div>
    </div>
<script>if (window.runOnloadHook) runOnloadHook();</script>
</body></html>
````

and the example.js file
````
brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-0.1, 400, 1.1,350 ], axis: true, grid: false, keepaspectratio: false});

````
I get 



The x-axis does not show and the graph only seems to occupy a portion of the shaded area.
I would like the x-axis from -0.1 to 1.1 and the y-axis from 350 to 400.
Any help to fix this problem is appreciated.

Rob

michael

unread,
Sep 7, 2016, 3:14:57 PM9/7/16
to JSXGraph
Hi Rob,

1) the x axis is not seen because the automatic x axis is created from [0, 0] to [1, 0]. Important to note is that it is created at y = 0. That is not visible since your graph starts at y = 350. So you need to create your own axes and place them appropriately:

var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-0.1, 400, 1.1,350 ], axis: false, grid: false, keepaspectratio: false});

var x = brd1.create('axis', [[0, 355], [1, 355]], {name: 'x'});
var y = brd1.create('axis', [[0, 0], [0, 1]], {name: 'y'});

2) what do you mean by "shaded area"? The box with the border surrounding both box1 and box2? That's because you apply the border to the div surrounding both box1 and box2 but not to the boxes themselves.


Best regards,

Michael

R C

unread,
Sep 7, 2016, 3:25:11 PM9/7/16
to JSXGraph
Hi Michael,
That fixed the issue. Thanks very much for the help.

I am still somewhat confused, however, as for example at:

it seems that the axes are set using the top-left and bottom-right coordinates defined in the  bounding box attributes.  

Best regards,
Rob

michael

unread,
Sep 7, 2016, 3:53:04 PM9/7/16
to JSXGraph
Hi Rob,

in the example you linked the axes are both visible because the bounding box includes both the line at y = 0 and the line at x = 0. The automatically created axes will always be constructed at

x: from [0, 0] to [1, 0]
y: from [0, 0] to [0, 1]


Maybe this quick sketch will make it a little bit clearer why it's not visible in your example:



Best regards,

Michael

R C

unread,
Sep 7, 2016, 4:36:08 PM9/7/16
to JSXGraph
Hi Michael,
Thanks for taking the time to clarify the issue.

Best Regards,
Rob
Reply all
Reply to author
Forward
0 new messages