You are located in service: RWTHmoodle

JSXGraph for interactive geometry, function plotting and charting

JSXGraph for interactive geometry, function plotting and charting




The plugin JSXGraph can be activated in every course room by the RWTHmoodle administrators. If you are interested in using JSXGraph, please contact the RWTHmoodle support in the IT-ServiceDesk. Please indicate the title and the LV number of the desired course.

JSXGraph is a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser. This is a plugin for RWTHmoodle to enable function plotting and dynamic geometry constructions with JSXGraph within RWTHmoodle. Using the JSXGraph filter makes it a lot easier to embed JSXGraph constructions into RWTHmoodle activities and resources, e.g. in pages, quizzes, books, ...

JSXGraph is a cross-browser JavaScript library for interactive geometry, function plotting, diagrams, and data visualization in the web browser. With this plugin, dynamic geometry constructions and function plotting are made possible in RWTHmoodle. Using JSXGraph, these graphs can be embedded much easier in Moodle activities and materials like pages, quizzes, books, etc.

JSXGraph is developed at the Lehrstuhl für Mathematik und ihre Didaktik University of Bayreuth, Germany.


Table of Contents

1. How JSXGraph works
2. Examples


1. How JSXGraph works
Users can use JSXGraph wherever the Moodle editor is available. To do this, click the button Button "HTML" in the editor's toolbar to switch to HTML view. In order for the JSXGraph part to be recognized and rendered as a graph, separators are needed to separate the JSXGraph part from the rest of the text. The separators that work in RWTHmoodle are:

    <jsxgraph> ... </jsxgraph> for inclusion in the HTML modus.
    [[jsxgraph]] ... [[/jsxgraph]] [Select and drag to move] in quizzes by using the question type "STACK".

For more detailed information, see this Moodle tutorial on using JSXGraph, currently available in English only.


2. Examples

The University of Bayreuth provides a collection of Code examples in the JSXGraph wiki. A smaller collection is available on the JSXGraph homepage. All examples are provided under the GNU Free Documentation License 1.2. The following example is a Plot of a Lotka-Volterra equation, taken from the JSXGraph homepage. The vales can be changed via the sliders so the visualization will change.

The image shows the plot of a Lotka-Volterra equation. The x-axes shows time values ranging from 0 to 27, the y-axes shows figures regarding the number of individuals (where an additional factor might be multiplied). The red line (preys) starts for t=0 with a value of 10, and steeply drops to almost 0  for t=3. At t=7 the values very slowly grow again, to reach a maximum vale of 11 at t=22. After this the value drops steeply again to be almost 0 at t=25. The blue line (predators) start with a value of 5 for t=0. It rises to almost 23 at t=2, following down to 2 at t=5 an then going down to 0 at t=12. Looking at t=19 it starts to rise again, reaching a maximum of 24 for t=23. It then decreases with the almost same fast rate to 9 for t=25 where the graph ends. The following parameters are stated: "Death rate preys/per predator" with y1=0.1, "Reproduction rate pred./per prey" with y2=0.3, "Birth rate prey" with epsilon1=0.3 and finally "Death rate predators" with epsilon2=0.2.


For more information: 

last changed on 08/17/2023

How did this content help you?

GNU General Public License 3
This work is licensed under a GNU General Public License