Function graph: Difference between revisions

From JSXGraph Wiki
(Created page with "<jsxgraph width="500" height="200"> var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]}); var fun = board.create('functiongraph', ['sin(x)']); </jsxgraph>")
 
No edit summary
Line 1: Line 1:
A minimal example how to embed JSXGraph in a web site:
<jsxgraph width="500" height="200">
<jsxgraph width="500" height="200">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
var fun = board.create('functiongraph', ['sin(x)']);
var fun = board.create('functiongraph', ['sin(x)']);
</jsxgraph>
</jsxgraph>
===The JavaScript code===
<source lang="html">
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>JSXGraph template</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <link href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js" type="text/javascript" charset="UTF-8"></script>
    <!-- The next line is optional: load MathJax -->
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script>
  </head>
  <body>
  <div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>
  <script>
    var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
    var fun = board.create('functiongraph', ['sin(x)']);
  </script>
  </body>
</html>
</source>
[[Category:Examples]]
[[Category:Calculus]]

Revision as of 15:49, 25 January 2024

A minimal example how to embed JSXGraph in a web site:

The JavaScript code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>JSXGraph template</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <link href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js" type="text/javascript" charset="UTF-8"></script>

    <!-- The next line is optional: load MathJax -->
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script>
  </head>
  <body>

  <div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>

  <script>
    var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
    var fun = board.create('functiongraph', ['sin(x)']);
  </script>

  </body>
</html>