jsxgraph

JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser.

Showing:

13 Versions

1.3.2

JSXGraph v1.3.2 further improves responsiveness of JSXGraph constructions and fixes a few bugs. Most notable, it is now possible to allow fullscreen mode together with the well known aspect ratio trick for HTML divs, i.e. to center an outer div element in full screen mode. Here is an example:

<div id='outer' style='max-width: 500px; margin: 0 auto;'>
<div id='jxgbox' class='jxgbox' style='height: 0; padding-bottom: 100%'></div>
</div>
<button onClick="board.toFullscreen('outer')">Fullscreen</button>

<script language="Javascript" type='text/javascript'>
var board = JXG.JSXGraph.initBoard('jxgbox', {
    axis:true,
    boundingbox:[-5,5,5,-5],
    fullscreen: { id: 'outer' },
    showFullscreen: true
});
var p = board.create('point', [-2, 3], {});
</script>

See also https://jsxgraph.org/docs/symbols/JXG.Board.html#toFullscreen.

Please, do not forget to register for the 2nd JSXGraph conference (October 5.- 7. 2021).

1.3.1

We are happy to be able to announce the release of JSXGraph v1.3.1.

This release improves the usability in responsive web pages which has been introduced in v.1.3.0. The main improvement is that JSXGraph scales the board correctly after orientation changes of the device independent from the CSS properties which determine the size of the JSXGraph div. For responsiveness, especially the aspect-ratio property (in new browsers) or the padding-bottom hack (in older browsers) are important. The responsiveness handling in v1.3.0 had broken the full screen mode.

Further, problems with intersection point of certain types of objects have been fixed. As usual, some minor bugs have been fixed and the API documentation has been improved, see CHANGELOG.md.

Thanks to all contributors who have helped to improve JSXGraph!

Please, do not forget to register for the 2nd JSXGraph conference (October 5.- 7. 2021).

1.3.0

We are happy to be able to announce the release of JSXGraph v1.3.0. This new version addresses among other features responsiveness and accessibility.

Responsiveness

In version 1.3.0, JSXGraph makes major leaps towards usability in responsive web pages. Following the suggestions by Murray Bourne (see his talk at http://jsxgraph.org/conf/program/), JSXGraph recomputes the board's dimensions when the JSXGraph div tag is resized. This is also the case when the div element's CSS property display switches from none to block. Therefore, also the initialization of JSXGraph boards in dia shows or register tabs should no longer be a problem. No action as to be taken by the developer to make responsiveness available, it is activated automatically. This feature can be turned off by

    var board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-5,5,5,-5], 
        resize: {enabled: false}
    });

Here is are two examples how to use JSXGraph such that the ratio between height and width of the JSXGraph div stays constant. This has to be implemented by the developer. There are two possible approaches, one is an old hack, the other is a new CSS feature.

1) The first version is a common hack known among CSS developers, see https://bourne2learn.com/math/jsxgraph/jsxgraph-examples.php for a more detailed explanation:

    <style>
        div.div1x1 {
            height: 0;
            padding-bottom: 100%;
        }

        div.jsxwrap500px {
            max-width: 500px;
            min-width: 100px;
            margin: 0 auto;
            overflow:hidden;
        }
    </style>
    <div class="jsxwrap500px">
        <div id='jxgbox' class='jxgbox div1x1'></div>
    </div>
    <script>
    var pol = board.create('polygon', [[-3,-3], [3,-3], [1,4]], {
            fillColor: 'yellow'
    });
    </script>

2) The second version uses the new CSS property aspect-ratio, which is - in August 2021 - supported by all major browsers beside Safari.

    <style>
        div.jxgnew {
            aspect-ratio: 1/1;
            max-width: 500px;
            margin: 0 auto;
            overflow:hidden;
        }
    </style>
    <div id='jxgbox' class='jxgbox jxgnew'></div>
    <script>
    var pol = board.create('polygon', [[-3,-3], [3,-3], [1,4]], {
            fillColor: 'yellow'
    });
    </script>

Another suggestion from the user community is to allow dragging of points outside of the board. This may be useful on mobile devices but poses the thread that the dragged point is "lost". To be on the safe side, use it for construction whose only interactive elements are sliders. The attribute moveTarget takes the DOM object which captures move events.

    var board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-5,5,5,-5], 
        axis: true,
        moveTarget: document
    });

Finally, texts support now the attribute fontUnit which accepts beside the default value px all CSS units like vw, vmin, vmax, ...

Accessibility

Starting with version 1.3.0, JSXGraph can be controlled with the keyboard.

  • The user can select JSXGraph objects with the tab key.
  • Objects can be moved with the arrow keys.
  • keyboard control is enabled by default, it can be turned off with the attribute keyboard, see the example below.
  • Further, the step width can be set with dx and dy.
  • If the user presses the shift key the construction is "panned", i.e. the view port is shifted.
var board = JXG.JSXGraph.initBoard("jxgbox", {boundingbox: [-5,5,5,-5], 
    axis: true, 
    keyboard: {
        enabled: true,
        dy: 30,
        dx: 30,
        panShift: true,
        panCtrl: false
      }
    });
var circ = board.create('circle', [[-4, 3], 1]);
var seg = board.create('segment', [[-2, 0], [-2, 4]]);
Further new features
  • There is a new arrow head type:7 which is especially well suited for curves. The arrow head ends exactly where the curve ends.
  • To end a line / curve exactly at its delimiting coordinates, it may be necessary to set the attribute lineCap:'square'. This attribute is new for curves.
  • There are some new math functions: erf, erfc, erfi, ndtr, ndtri, asinh, acosh in JXG.Math available. erf is the error function.
  • Comparisons and logical operators are now available as functions in JXG.Math: lt, gt, leq, geq, eq, neq, and, or, not, xor. These functions allow to avoid <, > and other characters in environments which filter out any occurrence of HTML tags.
  • The attribute radius for angles can take the new value 'auto'.
  • New Boolean method point.isOn(element)
  • In angles which have been set to fixed value by angle.setAngle(val) all three points can now be dragged:
var s = board.create('slider', [[1,4], [3,4], [0, Math.PI/2, 2*Math.PI]]);
var A = board.create('point', [3, 0], {fixed: false});
var B = board.create('point', [0, 0]);
var C = board.create('point', [2, 2], {fixed: false});

var angle = board.create('angle', [A, B, C], {radius: 'auto'});
angle.setAngle(()=>s.Value());

To reestablish the old behavior one has to set isDraggable=false for the angle point:

angle.anglepoint.isDraggable = false;
Other
  • The JessieCode script tag supports now the attribute src to load code from an external file:
<script type="text/jessiecode" src="testsrc.jc" axis="true">
 // ...
</script>
  • TypeScript: index.d.ts has been improved and updated
  • As usual, several bugs have been fixed and the API documentation has been improved, see CHANGELOG.md

1.2.3

This release contains small improvements and bug fixes, and some new experimental features. Most notable are

  • Add Typescript definition file index.d.ts (not yet complete). Thanks to David Holmes for the contribution!!!
  • KaTeX support (useKatex:true)
  • board.fullUpdate() updates size info of text elements. This is helpful for JSXGraph constructions which are initialised in a hidden parent element. When the board becomes visible, a call of board.fullUpdate() is sufficient to correct the position of the text elements. This can be triggered in an event listener (by the developer). See https://github.com/jsxgraph/jsxgraph/issues/348.

1.2.2

This release contains small improvements and bug fixes. Most notably, clipping and plotting has been improved.

1.2.1

Version v1.2.1 contains a few bug fixes, see CHANGELOG.md

1.2.0

JSXGraph version v1.2.0 contains many improvements over previous versions. Most notably is the support of the METAPOST path algorithm, see also https://bosker.wordpress.com/2013/11/13/beyond-bezier-curves/. The METAPOST paths were readily used to define new arrow heads (types 4, 5, 6). METAPOST paths can be used with the new element metapostspline. Ticks and hatches can now be set on arbitrary curves. Root finding has been improved considerably, and there is a new, still experimental plot algorithm which will offer function plots of higher quality (use it by setting the attribute plotVersion:4). For this, we implemented interval arithmetics in JSXGraph, which - up to now - can be used via JessieCode.

Further improvements include initial support of ARIA tags, better polygon / curve clipping, many bug fixes and lots of additions to the API docs.

This version received input (suggestions, bug reports, pull requests) from quite a few users. Many thanks to all of you! Special thanks goes to the guys from https://classcalc.com/ for many helpful suggestions and bug reports.

1.1.0

Version 1.1.0 introduces the new JSXSGraph element polygonalchain (sometimes also called "polyline") and new attributes for gradient colors. The statistics module received the new method JXG.Math.statistics.generateGaussian which generates values of a standard normal random variable. JSXGraph v1.1.0 supports the exciting MathJax v3+ which renders math content much faster. Following a user request, slider values can now be set by clicking on the slider baseline. Further improvements include the autoposition feature for labels introduced in v1.0.0 which is now much more stable and arrow heads on curves do now end on the curves' end point. This release contains a cleanup of the npm repository and - as usual - several bug fixes.

1.0.0

0.99.7

Here it is: The much awaited version 0.99.7 of JSXGraph has been released! There are a few new elements and many new features. We are especially happy that we received many requests for new features from active JSXGraph users.

New elements Improvements and bug fixes
  • In Chrome and Edge on Windows point events are used.
  • JSXGraph is now compatible to require.js. This allows a seamless integration into learning management system moodle via the JSXGraph filter.
  • MediaWiki plug-in works again.
  • Improved support for MathJax.
  • Some elements can be constructed by supplying an original element and an arbitrary transformation as parent elements: these are point, line, circle, polygon, arc, sector, angle. The resulting elements are point, line, polygon if the input elements were point, line, polygon, resp. The output element is a conic in for circles and curves for arc, sector and angle.
  • New default values for pinch / zoom: for zoom shift+wheel is set to true by default now.
  • Improved output from Dump.toJavaScript()
  • Polygon reflection now creates vertex names A', B', ...
  • Enable transformation "rotate" of type [angle, [x,y]].
  • The events hit and mousehit work again.
  • The attribute hasInnerPoints is available for all arc types: arc, sector, angle.
  • New curve attributes recursionDepthLow and recursionDepthHigh allow user controlled plot quality.
  • The inequality element takes now also the functiongraph element as input.
  • Screenshot button.
Compatibility
  • The attribute JXG.Option.semicirclearc.midpoint has been renamed into JXG.Option.semicirclearc.center.

We thank all contributors which supplied patches, bug reports and suggestions for improvements.

For a full list of all changes see the CHANGELOG.

Enjoy, Alfred

0.99.6

1.4.0

We are happy to be able to announce the release of JSXGraph v1.4.0. This new version brings several new elements and methods, as well as many improvements and bug fixes.

The new element foreignobject (also available with the shortcut fo) allows to embed arbitrary HTML content, including videos and iframes, into JSXGraph constructions. Here, "embed" means that the HTML content can be placed in arbitrary layers. An example would be to include a video and place a curve element "above" the video. See the API doc for examples. For technical reasons, foreignobject elements are available with the (default) SVG rendering engine, only.

The other new element is the boxplot element. Again, see the API docs for examples. One possibility is to use it together with the new method JXG.Math.statistics.percentile. The API docs contains also an example for an interactive use.

A long requested feature is the possibility to compute the function term of Lagrange polynomials. This is now possible with the new methods JXG.Math.Numerics.lagrangePolynomialTerm() or JXG.Math.Numerics.lagrangePolynomial.geTerm(), see the API docs for examples.

A convenient alternative to snapToGrid is the new point attribute attractToGrid (API docs).

The new low level method Polygon.pnpoly() determines if (user or screen) coordinates (x, y) are inside of a polygon. It is used e.g. in the method Point.isOn().

Surprisingly, in all the years JSXGraph never could intersect circles and curves. This has been changed now.

Version 1.4.0 brings a change in the default colors. Most notably, the green polygon fill color has been replaced by a yellow color tone. We decided to use as new color palette the color scheme developed by Bang Wong which is optimized for various types of color blindness. See also https://davidmathlogic.com/colorblind/. If you want to restore the old colors, call JXG.setClassicColors() before initializing any board.

Further improvements include better keyboard interaction, extended API documentation with many new examples, and much smoother handling of two finger touches on touch devices. In JessieCode, a security hole in text elements has been fixed.

Beside fixing quite a few bugs, also the JSXGraph ecosystem has been overhauled: The NPM dependencies for development of JSXGraph have been much reduced, Travis testing has been reestablished and unit testing has been reactivated. Now, we use Karma and Jasmine. Developers may try it out by calling make test.

0.99.5