Getting Started
The JSXGraph Book provides a comprehensive introduction to dynamic mathematics with JSXGraph, covering both fundamental concepts and advanced interactive applications. It is an essential resource for educators, developers, and authors interested in creating web-based mathematical visualizations with JSXGraph.
Step Into JSXGraph
The following steps will guide you through the initial setup of JSXGraph and help you create your first interactive JSXGraph visualization.
Step 1 – Include JSXGraph
You can work with JSXGraph either directly in a web browser using online resources, or offline by downloading the required files on your local machine.
We recommend using a modern code editor to write and test your HTML file with the JSXGraph code efficiently.
JSXGraph Hosted Via CDN
The preferred way is to include JSXGraph online from one of the CDNs (Content Delivery Network). Add the following lines into the HTML document head:
1
2
3
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
HTML Template
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My JSXGraph Example</title>
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
</head>
<body>
...
</body>
</html>
JSXGraph Locally Hosted
If you want to include a local copy of JSXGraph in your HTML file, download the following files and save them in the same folder as your HTML file:
and add the following lines into the document head:
1
2
<script src="jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="jsxgraph.css">
HTML Template
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My JSXGraph Example</title>
<script src="jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="jsxgraph.css">
</head>
<body>
...
</body>
</html>
Step 2 – Integrate JSXGraph Board
The 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 board of JSXGraph.
The following code has to be placed into the body part of an HTML file:
1
2
3
4
5
6
7
8
<div id="box" class="jxgbox" style="width:500px; aspect-ratio: 1/1;"></div>
<script>
var board = JXG.JSXGraph.initBoard(
'box', {
boundingbox: [-10, 10, 10, -10],
axis:true
});
</script>
HTML Template
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My JSXGraph Example</title>
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
</head>
<body>
<div id="box" class="jxgbox" style="width:500px; aspect-ratio: 1/1;"></div>
<script>
var board = JXG.JSXGraph.initBoard(
'box', {
boundingbox: [-10, 10, 10, -10],
axis:true
});
</script>
</body>
</html>
JSXGraph Preview
Step 3 – Add JSXGraph Elements
Once the board is initialized, you can add geometric elements such as points, circles, or function graphs.
To create a point in your JSXGraph construction, just add the following line to your code:
1
var A = board.create('point', [2, 1], { name: 'A' });
A function graph can be included by adding:
1
2
3
4
5
var f = board.create(
'functiongraph',
[(x) => 0.5 * x**2 - 2 * x],
{ strokeWidth: 3 }
);
HTML Template
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My JSXGraph Example</title>
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
</head>
<body>
<div id="box" class="jxgbox" style="width:500px; aspect-ratio: 1/1;"></div>
<script>
var board = JXG.JSXGraph.initBoard(
'box', {
boundingbox: [-10, 10, 10, -10],
axis:true
});
var A = board.create('point', [2, 1], { name: 'A' });
var f = board.create(
'functiongraph',
[(x) => 0.5 * x**2 - 2 * x],
{ strokeWidth: 3 }
);
</script>
</body>
</html>
JSXGraph Preview
Next Steps
The command board.create(elementType, [parameters], attributes) is the central method in JSXGraph for adding new elements to a construction. It takes at least two arguments: a string elementType specifying the type of element (e.g., ‘point’, ‘circle’, ‘functiongraph’) and an array of parameters the element depends on, optionally followed by an object attributes.
Add two aditional points:
1
2
var B = board.create('point', [-4, 5], { name: 'B' });
var C = board.create('point', [-6, -5], { name: 'C' });
The three points define the vertices of a triangle, which can then be created using these points as parameters:
1
var p = board.create('polygon', [A, B, C]);
The circumcircle of a triangle can be created as follows:
1
var c = board.create('circle', [A, B, C]);
HTML Template
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My JSXGraph Example</title>
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
</head>
<body>
<div id="box" class="jxgbox" style="width:500px; aspect-ratio: 1/1;"></div>
<script>
var board = JXG.JSXGraph.initBoard(
'box', {
boundingbox: [-10, 10, 10, -10],
axis:true
});
var A = board.create('point', [ 2, 1], { name: 'A' });
var f = board.create(
'functiongraph',
[(x) => 0.5 * x**2 - 2 * x],
{ strokeWidth: 3 }
);
var B = board.create('point', [-4, 5], { name: 'B' });
var C = board.create('point', [-6, -5], { name: 'C' });
var p = board.create('polygon', [A, B, C]);
var c = board.create('circle', [A, B, C]);
</script>
</body>
</html>
JSXGraph Preview
Styling of Elements
The optional attributes object allows you to customize the appearance and behavior of an element, such as its color, size, label, or whether it is draggable.
Attributes
To make a point non-movable, you can set the attribute fixed, which prevents users from dragging it on the board:
1
var A = board.create('point', [ 2, 1], { name: 'A', fixed: true });
The fill color of a polygon can be set using the fillColor attribute:
1
var p = board.create('polygon', [A, B, C], { fillcolor: '#ff0099'});
You can customize the stroke of a circle using attributes like strokeColor, strokeWidth for line thickness and dash for dashed or dotted styles:
1
2
3
4
5
var c = board.create('circle', [A, B, C], {
strokeColor: 'orange',
strokeWidth: 5,
dash: 3
});
HTML Template
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My JSXGraph Example</title>
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
</head>
<body>
<div id="box" class="jxgbox" style="width:500px; aspect-ratio: 1/1;"></div>
<script>
var board = JXG.JSXGraph.initBoard(
'box', {
boundingbox: [-10, 10, 10, -10],
axis:true
});
var A = board.create('point', [ 2, 1], { name: 'A', fixed: true });
var f = board.create(
'functiongraph',
[(x) => 0.5 * x**2 - 2 * x],
{ strokeWidth: 3 }
);
var B = board.create('point', [-4, 5], { name: 'B' });
var C = board.create('point', [-6, -5], { name: 'C' });
var p = board.create('polygon', [A, B, C], { fillcolor: '#ff0099'});
var c = board.create('circle', [A, B, C], {
strokeColor: 'orange',
strokeWidth: 5,
dash: 3
});
</script>
</body>
</html>
JSXGraph Preview
3D Elements
JSXGraph provides powerful 3D visualizations directly in the browser. As a first example you can create a draggable 3D point.
HTML Template
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My JSXGraph Example</title>
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
</head>
<body>
<div id="box" class="jxgbox" style="width:500px; aspect-ratio: 1/1;"></div>
<script>
var board = JXG.JSXGraph.initBoard(
'view-result', {
boundingbox: [-10, 10, 10, -10],
axis:false,
pan: { enabled: false },
zoom: { enabled: false }
});
var view = board.create('view3d',
[
[-4, -3],
[8, 8],
[
[-5, 5],
[-5, 5],
[-5, 5]
]
],
{ projection: 'central' });
var p = view.create('point3d', [1, 1, 2], {size: 5, name:'A'});
view.create('line3d', [p, [1, 0, 0], [0, () => -p.X() - 5]], {dash: 1});
view.create('line3d', [p, [0, 1, 0], [0, () => -p.Y() - 5]], {dash: 1});
view.create('line3d', [p, [0, 0, 1], [0, () => -p.Z() - 5]], {dash: 1});
</script>
</body>
</html>
JSXGraph Preview
More Information
The JSXGraph Book offers a structured introduction and numerous practical examples to help you build dynamic and interactive visualizations effectively.
For more detailed information on available elements, attributes, and advanced features, use to the JSXGraph API documentation.