Include JSXGraph: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 2: Line 2:


For including JSXGraph into HTML, two files are necessary:
For including JSXGraph into HTML, two files are necessary:
* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js]
* jsxgraphcore.js from [https://jsxgraph.org/distrib/jsxgraphcore.js https://jsxgraph.org/distrib/jsxgraphcore.js]
* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]
* jsxgraph.css from [https://jsxgraph.org/distrib/jsxgraph.css https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]
You can either download these three files and use the local copy or you can use the online version.
You can either download these three files and use the local copy or you can use the online version.


Line 19: Line 19:
<source lang="xml">
<source lang="xml">
<head>
<head>
  <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
  <link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
  <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
  <script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
</head>
</head>
</source>
</source>
Line 38: Line 38:


===Example===
===Example===
<html>
<jsxgraph width="500" height="500" id="jxgbox">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
  board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
  g1 = board.create('point', [1, -1], {style:6});
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
  g2 = board.create('point', [2.5, -2], {style:6});
<script language="JavaScript">
  g3 = board.create('point', [1, -3], {style:5});
  board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox: [-5, 5, 5, -5]});
  g4 = board.create('point', [2.5, -4], {style:5});
  g1 = board.createElement('point', [1, -1], {style:6});
  g5 = board.create('point', [-4, 1], {style:5,name:''});
  g2 = board.createElement('point', [2.5, -2], {style:6});
  g3 = board.createElement('point', [1, -3], {style:5});
  g4 = board.createElement('point', [2.5, -4], {style:5});
  g5 = board.createElement('point', [-4, 1], {style:5,name:''});


  c1 = board.createElement('curve', [
  c1 = board.create('curve', [
       function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
       function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
       function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
       function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
Line 57: Line 53:
           strokeOpacity:function(){return g5.Y()*0.6;}
           strokeOpacity:function(){return g5.Y()*0.6;}
         });
         });
</script>
</jsxgraph>
</html>
 
<source lang="xml">
<source lang="xml">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
<script language="JavaScript">
<script language="JavaScript">
  board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox: [-5, 5, 5, -5]});
  board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});
  g1 = board.createElement('point', [1, -1], {style:6});
  g1 = board.create('point', [1, -1], {style:6});
  g2 = board.createElement('point', [2.5, -2], {style:6});
  g2 = board.create('point', [2.5, -2], {style:6});
  g3 = board.createElement('point', [1, -3], {style:5});
  g3 = board.create('point', [1, -3], {style:5});
  g4 = board.createElement('point', [2.5, -4], {style:5});
  g4 = board.create('point', [2.5, -4], {style:5});
  g5 = board.createElement('point', [-4, 1], {style:5,name:''});
  g5 = board.create('point', [-4, 1], {style:5, name:''});


  c1 = board.createElement('curve', [
  c1 = board.create('curve', [
       function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
       function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
       function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
       function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
       0,function(){ return Math.PI*7*Math.abs(g4.X());}],{
       0,function(){ return Math.PI*7*Math.abs(g4.X());}],{
           strokeWidth:function(){return g5.Y()*3;},
           strokeWidth: function() { return g5.Y()*3; },
           strokeOpacity:function(){return g5.Y()*0.6;}
           strokeOpacity: function() { return g5.Y()*0.6; }
         });
         });
</script>
</script>
Line 82: Line 78:


===Further examples===
===Further examples===
[[Circles on circles]] contains an advanced example using the excellent package of widgets [http://jqueryui.com jQuery UI].
[[Circles on circles]] contains an advanced example.


[[Category:Austragungsstueberl]]
[[Category:Austragungsstueberl]]

Latest revision as of 13:03, 3 March 2021

Including JSXGraph into HTML

For including JSXGraph into HTML, two files are necessary:

You can either download these three files and use the local copy or you can use the online version.

Usage of a local copy

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: 

<head>
 <link rel="stylesheet" type="text/css" href="jsxgraph.css" />
 <script type="text/javascript" src="jsxgraphcore.js"></script>
</head>

Usage of the online copy

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: 

<head>
 <link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
 <script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
</head>

Include a drawing panel into the HTML

The geometric construction which is displayed by JSXGraph resides in an HTML element. Usually, a div-element is taken. This division needs an ID. Using this ID, we declare this element to be a drawing panel of JSXGraph.

The following code has to be placed into the body part of an HTML file: 

<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 5, -5]});
</script>

We can use as many different drawing panels as we like in one HTML file.

Example

<link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
<script language="JavaScript"> 			
 board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});
 g1 = board.create('point', [1, -1], {style:6});
 g2 = board.create('point', [2.5, -2], {style:6});
 g3 = board.create('point', [1, -3], {style:5});
 g4 = board.create('point', [2.5, -4], {style:5});
 g5 = board.create('point', [-4, 1], {style:5, name:''});

 c1 = board.create('curve', [
       function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
       function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
       0,function(){ return Math.PI*7*Math.abs(g4.X());}],{
          strokeWidth: function() { return g5.Y()*3; },
          strokeOpacity: function() { return g5.Y()*0.6; }
         });
</script>

Further examples

Circles on circles contains an advanced example.

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Include_JSXGraph&oldid=7127"