JSXGraph Charts - Curves and Dynamic Geometry

JSXGraph is a JavaScript library for creating interactive mathematical graphics: function curves, geometric constructions, draggable points. Ideal for teaching mathematics.

GeoGebra Alternative JSXGraph is free, open-source, and integrates perfectly into your HTML pages. Students can manipulate graphics directly in their browser.

Built-in WYSIWYG Editor The Sarmate.net editor has a WYSIWYG tool that simplifies creating JSXGraph figures. You can create your graphics visually without writing code, then copy the generated code into your HTML pages.

Setup

Include JSXGraph in your HTML page:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My JSXGraph Chart</title>

    <!-- JSXGraph CSS -->
    <link rel="stylesheet" href="https://jsxgraph.org/distrib/jsxgraph.css">

    <!-- JSXGraph JavaScript -->
    <script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
</head>
<body>

    <!-- Container for the graph -->
    <div id="box" style="width: 500px; height: 500px;"></div>

    <script>
        // Your JSXGraph code here    </script>

</body>
</html>

First Graph

Let's create a coordinate system with a simple function:

JavaScript

// Create the boardconst board = JXG.JSXGraph.initBoard('box', {
    boundingbox: [-5, 5, 5, -5],  // [xmin, ymax, xmax, ymin]
    axis: true,                    // Show axes    grid: true                     // Show grid});

// Plot the function f(x) = x²
board.create('functiongraph', [
    function(x) { return x * x; }
], {
    strokeColor: 'blue',
    strokeWidth: 2
});

Plot Curves

Simple Function

JavaScript

// Parabolaboard.create('functiongraph', [x => x*x - 2*x + 1]);

// Sineboard.create('functiongraph', [Math.sin], {strokeColor: 'red'});

// Piecewise functionboard.create('functiongraph', [
    function(x) {
        if (x < 0) return -x;
        else return x * x;
    }
]);

Parametric Curve

JavaScript

// Parametric circleboard.create('curve', [
    t => 2 * Math.cos(t),   // x(t)
    t => 2 * Math.sin(t),   // y(t)
    0,                       // t_min
    2 * Math.PI              // t_max
], {strokeColor: 'green'});

Points and Interactivity

Fixed Point

JavaScript

// Point at coordinates (2, 3)
const A = board.create('point', [2, 3], {
    name: 'A',
    size: 4,
    color: 'red'
});

Draggable Point (Slider)

JavaScript

// Horizontal slider (value from -3 to 3, starting at 1)
const a = board.create('slider', [[-3, 4], [3, 4], [-3, 1, 3]], {
    name: 'a'
});

// Curve that depends on the sliderboard.create('functiongraph', [
    function(x) { return a.Value() * x * x; }
]);

Dynamic Geometry

JavaScript

const board = JXG.JSXGraph.initBoard('box', {
    boundingbox: [-5, 5, 5, -5],
    axis: true
});

// Three draggable pointsconst A = board.create('point', [-2, -1], {name: 'A'});
const B = board.create('point', [2, -1], {name: 'B'});
const C = board.create('point', [0, 2], {name: 'C'});

// Triangle connecting the three pointsconst triangle = board.create('polygon', [A, B, C], {
    fillColor: 'yellow',
    fillOpacity: 0.3
});

// Circumcircle (adapts when you move the points)
const circle = board.create('circumcircle', [A, B, C], {
    strokeColor: 'blue'
});

// Circle centerboard.create('circumcenter', [A, B, C], {
    name: 'O',
    color: 'blue'
});

Automatic Interactivity JSXGraph automatically recalculates all dependent objects when you move a point. This is the principle of dynamic geometry.

Complete Example: Function Study

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parametric function study</title>
    <link rel="stylesheet" href="https://jsxgraph.org/distrib/jsxgraph.css">
    <script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        #box { margin: 20px auto; border: 1px solid #ddd; }
    </style>
</head>
<body>

    <h1>f(x) = ax² + bx + c</h1>
    <p>Move the sliders to change the parameters.</p>

    <div id="box" style="width: 600px; height: 400px;"></div>

    <script>
        const board = JXG.JSXGraph.initBoard('box', {
            boundingbox: [-6, 10, 6, -4],
            axis: true,
            grid: true
        });

        // Parameters with sliders        const a = board.create('slider', [[-5, 8], [-1, 8], [-2, 1, 2]], {name: 'a'});
        const b = board.create('slider', [[-5, 7], [-1, 7], [-3, 0, 3]], {name: 'b'});
        const c = board.create('slider', [[-5, 6], [-1, 6], [-3, 0, 3]], {name: 'c'});

        // Curve f(x) = ax² + bx + c        const f = board.create('functiongraph', [
            function(x) {
                return a.Value() * x * x + b.Value() * x + c.Value();
            }
        ], {strokeColor: 'blue', strokeWidth: 2});

        // Parabola vertex        const vertex = board.create('point', [
            function() { return -b.Value() / (2 * a.Value()); },
            function() {
                const xV = -b.Value() / (2 * a.Value());
                return a.Value() * xV * xV + b.Value() * xV + c.Value();
            }
        ], {name: 'S', color: 'red', size: 5});

        // Text displaying the equation        board.create('text', [1, 8, function() {
            return 'f(x) = ' + a.Value().toFixed(1) + 'x² + '
                + b.Value().toFixed(1) + 'x + ' + c.Value().toFixed(1);
        }]);
    </script>

</body>
</html>

Ready to Create Your Graphs?

Illustrate your math lessons with interactive figures

Create a free account