\n\n\n\n","post":"","numboards":1,"description":"","dimensions":[{"width":"100%","height":"","aspect-ratio":"3 \/ 2"}],"wider":0,"license":{"id":1,"identifier":"CC BY 4.0","title":"Creative Commons Attribution 4.0 International","free":"- Share\r\n- Adapt","restrictions":"- Attribution\r\n- No additional restrictions","with_attribution":1,"link":"https:\/\/creativecommons.org\/licenses\/by\/4.0\/","image":"https:\/\/i.creativecommons.org\/l\/by\/4.0\/88x31.png","rank":0},"timestamp":"2023-02-06 13:06:51","visible":1,"tags":[{"id":106,"alias":"calculus","name":"Calculus"},{"id":110,"alias":"function-plotting","name":"Function plotting"}],"tag_ids":[106,110],"refers_to":[],"refers_to_ids":[],"authors":[],"authors_ids":[],"unique_ids":["jxgbox-6753d01079d50"],"code_display":"\/\/ Define the id of your board in BOARDID\n\nvar board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,8,8,-5], axis:true});\nvar f, curve; \/\/ global objects\n\nvar plotter = function() {\n var txtraw = document.getElementById('input').value;\n f = board.jc.snippet(txtraw, true, 'x', true);\n curve = board.create('functiongraph',[f], {name:txtraw, withLabel:true});\n};\n\nvar clearAll = function() {\n JXG.JSXGraph.freeBoard(board);\n board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,8,8,-5], axis:true});\n f = null;\n curve = null;\n};\n\nvar addSlopeInfo = function() {\n if (JXG.isFunction(f)) {\n var txtraw = document.getElementById('input').value;\n var q = board.create('glider', [2, 1, curve], {withLabel:false});\n var t = board.create('text', [\n () => q.X()+0.1,\n () => q.Y()+0.1,\n () => \"The slope of the function f(x)=\" + \n txtraw + \n \"at x=\" + q.X().toFixed(2) + \n \" is equal to \" + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2)\n ], {fontSize:15});\n }\n};\n\nvar addTangent = function() {\n if (JXG.isFunction(f)) {\n var p = board.create('glider',[1, 0, curve], {name:'drag me'});\n board.create('tangent',[p]);\n }\n};\n\nvar addDerivative = function() {\n if (JXG.isFunction(f)) {\n board.create('functiongraph',[JXG.Math.Numerics.D(f)], {dash:2});\n }\n};\n","code_execute_html":"
<iframe src="https://jsxgraph.org/share/iframe/function-plotter" style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" name="JSXGraph example: Function plotter" allowfullscreen ></iframe>
<input type="text" id="input" value="sin(x)*x"><br /> <input type="button" value="plot" onClick="plotter()"> <input type="button" value="clear all" onClick="clearAll()"> <p><br> <input type="button" value="add slope info" onClick="addSlopeInfo()"> <input type="button" value="add tangent" onClick="addTangent()"> <input type="button" value="add Derivative" onClick="addDerivative()"> <div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; "> <div id="board-0" class="jxgbox" style="aspect-ratio: 3 / 2; width: 100%;" data-ar="3 / 2"></div> </div> <script type = "text/javascript"> /* This example is licensed under a Creative Commons Attribution 4.0 International License. https://creativecommons.org/licenses/by/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'board-0'; var board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,8,8,-5], axis:true}); var f, curve; // global objects var plotter = function() { var txtraw = document.getElementById('input').value; f = board.jc.snippet(txtraw, true, 'x', true); curve = board.create('functiongraph',[f], {name:txtraw, withLabel:true}); }; var clearAll = function() { JXG.JSXGraph.freeBoard(board); board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,8,8,-5], axis:true}); f = null; curve = null; }; var addSlopeInfo = function() { if (JXG.isFunction(f)) { var txtraw = document.getElementById('input').value; var q = board.create('glider', [2, 1, curve], {withLabel:false}); var t = board.create('text', [ () => q.X()+0.1, () => q.Y()+0.1, () => "The slope of the function f(x)=" + txtraw + "<br>at x=" + q.X().toFixed(2) + " is equal to " + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2) ], {fontSize:15}); } }; var addTangent = function() { if (JXG.isFunction(f)) { var p = board.create('glider',[1, 0, curve], {name:'drag me'}); board.create('tangent',[p]); } }; var addDerivative = function() { if (JXG.isFunction(f)) { board.create('functiongraph',[JXG.Math.Numerics.D(f)], {dash:2}); } }; </script>
/* This example is licensed under a Creative Commons Attribution 4.0 International License. https://creativecommons.org/licenses/by/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'your_div_id'; // Insert your id here! var board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,8,8,-5], axis:true}); var f, curve; // global objects var plotter = function() { var txtraw = document.getElementById('input').value; f = board.jc.snippet(txtraw, true, 'x', true); curve = board.create('functiongraph',[f], {name:txtraw, withLabel:true}); }; var clearAll = function() { JXG.JSXGraph.freeBoard(board); board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,8,8,-5], axis:true}); f = null; curve = null; }; var addSlopeInfo = function() { if (JXG.isFunction(f)) { var txtraw = document.getElementById('input').value; var q = board.create('glider', [2, 1, curve], {withLabel:false}); var t = board.create('text', [ () => q.X()+0.1, () => q.Y()+0.1, () => "The slope of the function f(x)=" + txtraw + "<br>at x=" + q.X().toFixed(2) + " is equal to " + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2) ], {fontSize:15}); } }; var addTangent = function() { if (JXG.isFunction(f)) { var p = board.create('glider',[1, 0, curve], {name:'drag me'}); board.create('tangent',[p]); } }; var addDerivative = function() { if (JXG.isFunction(f)) { board.create('functiongraph',[JXG.Math.Numerics.D(f)], {dash:2}); } };
<input type="text" id="input" value="sin(x)*x"><br /> <input type="button" value="plot" onClick="plotter()"> <input type="button" value="clear all" onClick="clearAll()"> <p><br> <input type="button" value="add slope info" onClick="addSlopeInfo()"> <input type="button" value="add tangent" onClick="addTangent()"> <input type="button" value="add Derivative" onClick="addDerivative()">
// Define the id of your board in BOARDID var board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,8,8,-5], axis:true}); var f, curve; // global objects var plotter = function() { var txtraw = document.getElementById('input').value; f = board.jc.snippet(txtraw, true, 'x', true); curve = board.create('functiongraph',[f], {name:txtraw, withLabel:true}); }; var clearAll = function() { JXG.JSXGraph.freeBoard(board); board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,8,8,-5], axis:true}); f = null; curve = null; }; var addSlopeInfo = function() { if (JXG.isFunction(f)) { var txtraw = document.getElementById('input').value; var q = board.create('glider', [2, 1, curve], {withLabel:false}); var t = board.create('text', [ () => q.X()+0.1, () => q.Y()+0.1, () => "The slope of the function f(x)=" + txtraw + "at x=" + q.X().toFixed(2) + " is equal to " + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2) ], {fontSize:15}); } }; var addTangent = function() { if (JXG.isFunction(f)) { var p = board.create('glider',[1, 0, curve], {name:'drag me'}); board.create('tangent',[p]); } }; var addDerivative = function() { if (JXG.isFunction(f)) { board.create('functiongraph',[JXG.Math.Numerics.D(f)], {dash:2}); } };
This example is licensed under a Creative Commons Attribution 4.0 International License. Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.