jsxgraph plot

by mikot

HTML

<head>
<script type="text/javascript" charset="UTF-8" src="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.3/jsxgraphcore.js"></script>
</head>

<body>
<div id="jxgbox" class="jxgbox" style="width:400px; height:400px; border:3px; border-style:solid;"></div>
  
<input id="function" type="text" name="function"><input id="plot" type="button" value="plot" />
</body>

JavaScript

var boxdimensions = [-15,15,15,-15];
      var board	=	JXG.JSXGraph.initBoard('jxgbox', {axis:1, grid:0, keepaspectratio:1, shownavigation:0, showcopyright:0, pan:{enabled:0}, boundingbox:boxdimensions});
      var curve, f;
      
      function update(){
        var txtraw = document.getElementById("function").value;
        
        board.removeObject(curve);
        f = board.jc.snippet(txtraw, true, 'x', true);
        curve = board.create('functiongraph',[f,function(){ 
                var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);
                return c.usrCoords[1];
              },
              function(){ 
                var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);
                return c.usrCoords[1];
              }],{name:txtraw, withLabel:true});
      }


      
      document.getElementById("plot").onclick = update;