JSFiddle - React, Tailwind, and code Playground

by migerh

HTML

<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="xbox-functionStimulus" style="width:500px; height:200px;"></div>

JavaScript

var board = JXG.JSXGraph.initBoard(
    'xbox-functionStimulus',
    {
        boundingbox: [-10, 5, 10, -3],
        axis: {
            firstArrow: false,
            lastArrow: false
        }
    }
);
var geotnext = "3*Sin(2*x)+1";
board.create(
    'functiongraph',
    [
        // HERE I define sin as Math.sin to make it work
        new Function('x','var sin = Math.sin, y = ' + JXG.GeonextParser.geonext2JS(geotnext) + '; return y;')
    ],
    {
        strokeColor: '#00FF00',
        strokeWidth: 3
    }
);
board.create(
    'functiongraph',
    [
        // parameters:
        //   string      The function body
        //   JXG.Board   A reference to your JSXGraph board
        //   string      comma separated list of parameters in one string, e.g. 'x,y,z'
        //   boolean     Should always be true if the first parameter is code. If false this
        //               will simply return a function that does nothing but return the first parameter.
        JXG.createFunction(geotnext, board, 'x', true)
    ],
    {
        strokeColor: '#0000FF',
        strokeWidth: 2,
        strokeOpacity: 0.5
    }
);