Docs

Dynamic Mathematics with JavaScript

Minimal example

<!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],
            axis:true
        });
    var fun = board.create('functiongraph', ['sin(x)']);
  </script>

  </body>
</html>

See it in action at https://jsxgraph.org/wiki/index.php?title=Function_graph.

API reference and examples

All objects of JSXGraph use the namespace JXG. Beside JXG there are no global variables.

Webinar: advanced JSXGraph programming

  • Notes from the online workshop in fall 2020 and spring 2021
  • For announcements of the next webinar sessions see JSXGraph forum at Google groups
  • Next webinar: October during the JSXGraph conference

Previous webinar sessions:

1st international JSXGraph conference

The 1st international JSXGraph conference was held online in October 2020.

2nd international JSXGraph conference (2021)

October 5th - 7th, 2021, conference home page

3rd international JSXGraph conference (2022)

October 4th - 6th, 2022, conference home page

4th international JSXGraph conference (2023)

October 10th - 12th, 2023, conference home page

Support

Coding help

Discussion of development and future direction of JSXGraph