Share JSXGraph: example "Inequalities (function graphs)"

Share JSXGraph: example "Inequalities (function graphs)"

This website is a beta version. The official release will be in **2024**.

Javascript is disabled in your browser.

This site includes the JavaScript library JSXGraph to demonstrate its functionalities. To watch this, enable JavaScript in settings of your browser and reload this page.

example

{"id":10102,"alias":"inequalities-function-graphs","name":"Inequalities (function graphs)","reference":"null","content":"const board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: true\n});\n\nvar f = board.create('functiongraph', [(t) => Math.sin(t) * t]);\n\nvar ineq = board.create('inequality', [f], {\n    fillColor: 'yellow'\n});\n","pre":"","post":"","number_of_boards":1,"description":"This example shows for a function $x\\mapsto f(x)$ the area of all points $(x,y)$ with $y - f(x) \\leq 0$.","dimensions":[{"width":"100%","height":"","aspect-ratio":"1 \/ 1"}],"large_in_db":0,"license":{"title":"Creative Commons Attribution ShareAlike 4.0 International","identifier":"CC BY-SA 4.0","free":"- Share\r\n- Adapt","restrictions":"- Attribution\r\n- ShareAlike\r\n- No additional restrictions","with_attribution":1,"link":"https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/","image":"https:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png","rank":1},"timestamp":"2023-02-14 14:34:13","draft":0,"deleted":0,"tags":[{"id":121,"alias":"geometry","name":"Geometry"}],"groups":[],"refers_to":[{"id":10101,"name":"Inequalities (half-planes)","alias":"inequalities-half-planes","symmetrical":1}],"authors":[],"unique_ids":["jxgbox-6629ba905db2f"],"code_display":"\/\/ Define the id of your board in BOARDID\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: true\n});\n\nvar f = board.create('functiongraph', [(t) => Math.sin(t) * t]);\n\nvar ineq = board.create('inequality', [f], {\n    fillColor: 'yellow'\n});\n","code_execute_html":"<div id=\"jxgbox-6629ba905db2f\" class=\"jxgbox shadow\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n<script type=\"text\/javascript\">\r\n    (function() {\r\n        let addWrapper = function (boardid, classes = [], styles = \"\") {\r\n            let board = document.getElementById(boardid),\r\n                wrapper, wrapperid = boardid + \"-wrapper\";\r\n            \r\n            wrapper = document.createElement(\"div\");\r\n            wrapper.id = wrapperid;\r\n            wrapper.classList.add(\"jxgbox-wrapper\");\r\n            \r\n            for (let c of classes)\r\n                wrapper.classList.add(c);\r\n                \r\n            wrapper.style = styles;\r\n                \r\n            board.parentNode.insertBefore(wrapper, board.nextSibling);\r\n            wrapper.appendChild(board);\r\n        }\r\n        \r\n        const FORCE_WRAPPER = false || true;\r\n        \r\n        let boardid = \"jxgbox-6629ba905db2f\",\r\n            wrapper_classes = \"p-3\".split(\" \"),\r\n            wrapper_styles = \"width: 100%; \",\r\n            board = document.getElementById(boardid),\r\n            ar, ar_h, ar_w, padding_bottom;\r\n        \r\n        ar = board.dataset.ar;\r\n            \r\n        if (!CSS.supports(\"aspect-ratio\", \"1 \/ 1\") && JXG.exists(ar, true)) {\r\n            \r\n            ar = ar.split(\"\/\", 3);\r\n            ar_w = ar[0].trim();\r\n            ar_h = ar[1].trim();\r\n            padding_bottom = ar_h \/ ar_w * 100;\r\n            \r\n            if (wrapper_styles !== \"\")\r\n                addWrapper(boardid, wrapper_classes, wrapper_styles);\r\n            \r\n            board.style = \"height: 0; padding-bottom: \" + padding_bottom + \"%; \/*\" + board.style + \"*\/\";\r\n            \r\n        } else if (FORCE_WRAPPER) {\r\n            \r\n            wrapper_styles = \"\";\r\n            if (board.style.width.indexOf(\"%\") > -1) {\r\n                wrapper_styles += \"width: \" + board.style.width + \"; \"\r\n                board.style.width = \"100%\";\r\n            }\r\n            if (board.style.height.indexOf(\"%\") > -1) {\r\n                wrapper_styles += \"height: \" + board.style.height + \"; \"\r\n                board.style.height = \"100%\";\r\n            }\r\n            addWrapper(boardid, wrapper_classes, wrapper_styles);\r\n        }\r\n    })();\r\n        <\/script>","code_execute_html_pre":"","code_execute_html_post":"","code_execute_js":"const BOARDID_6629ba905db2c_0 = 'jxgbox-6629ba905db2f';\nconst BOARDID_6629ba905db2c_ = BOARDID_6629ba905db2c_0;\n\nconst board = JXG.JSXGraph.initBoard(BOARDID_6629ba905db2c_, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: true\n});\n\nvar f = board.create('functiongraph', [(t) => Math.sin(t) * t]);\n\nvar ineq = board.create('inequality', [f], {\n    fillColor: 'yellow'\n});\n","code_export_js":"\/*\nThis example is licensed under a \nCreative Commons Attribution ShareAlike 4.0 International License.\nhttps:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\n\nPlease note that you have to mention \nThe Center of Mobile Learning with Digital Technology\nin the credits.\n*\/\n\nconst BOARDID = 'your_div_id'; \/\/ Insert your id here!\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: true\n});\n\nvar f = board.create('functiongraph', [(t) => Math.sin(t) * t]);\n\nvar ineq = board.create('inequality', [f], {\n    fillColor: 'yellow'\n});\n","code_export_html":"<div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n   <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n<\/div>\n\n<script type = \"text\/javascript\"> \n    \/*\n    This example is licensed under a \n    Creative Commons Attribution ShareAlike 4.0 International License.\n    https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\n    \n    Please note that you have to mention \n    The Center of Mobile Learning with Digital Technology\n    in the credits.\n    *\/\n    \n    const BOARDID = 'board-0';\n\n    const board = JXG.JSXGraph.initBoard(BOARDID, {\n        boundingbox: [-5, 5, 5, -5],\n        axis: true\n    });\n    \n    var f = board.create('functiongraph', [(t) => Math.sin(t) * t]);\n    \n    var ineq = board.create('inequality', [f], {\n        fillColor: 'yellow'\n    });\n    \n <\/script> ","code_export_jsfiddle_html":"<div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n   <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n<\/div>\n","code_export_jsfiddle_js":"\/*\nThis example is licensed under a \nCreative Commons Attribution ShareAlike 4.0 International License.\nhttps:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\n\nPlease note that you have to mention \nThe Center of Mobile Learning with Digital Technology\nin the credits.\n*\/\n\nconst BOARDID = 'board-0';\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: true\n});\n\nvar f = board.create('functiongraph', [(t) => Math.sin(t) * t]);\n\nvar ineq = board.create('inequality', [f], {\n    fillColor: 'yellow'\n});\n","code_export_html_file":"<!DOCTYPE html>\n<html>\n   <head>\n      <title>Inequalities (function graphs)<\/title>\n      <meta content=\"text\/html; charset=UTF-8\" http-equiv=\"Content-Type\" \/>\n      <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/jsxgraph.uni-bayreuth.de\/distrib\/jsxgraph.css\" \/>\n      <script src=\"https:\/\/jsxgraph.uni-bayreuth.de\/distrib\/jsxgraphcore.js\" type=\"text\/javascript\"><\/script>\n      <style type=\"text\/css\">\nbody {\n   font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n<\/style>\n   <\/head>\n   <body>\n      <h1>Inequalities (function graphs)<\/h1>\n      <div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n         <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n      <\/div>\n      \n      <script type = \"text\/javascript\"> \n          \/*\n          This example is licensed under a \n          Creative Commons Attribution ShareAlike 4.0 International License.\n          https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\n          \n          Please note that you have to mention \n          The Center of Mobile Learning with Digital Technology\n          in the credits.\n          *\/\n          \n          const BOARDID = 'board-0';\n      \n          const board = JXG.JSXGraph.initBoard(BOARDID, {\n              boundingbox: [-5, 5, 5, -5],\n              axis: true\n          });\n          \n          var f = board.create('functiongraph', [(t) => Math.sin(t) * t]);\n          \n          var ineq = board.create('inequality', [f], {\n              fillColor: 'yellow'\n          });\n          \n       <\/script> \n\n      <div style=\"margin:30px 15px; text-align:center; font-style:italic; font-size:80%;\">\n         <p>\n            <a rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\" target=\"_blank\"><img alt=\"license\" src=\"https:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png\" style=\"height: 31px; width: auto;\"><\/a>\n         <\/p>\n         <p>\n         This example is licensed under a \n         <a rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\" target=\"_blank\">Creative Commons Attribution ShareAlike 4.0 International<\/a> License.\n         <\/p>\n         <p>\n         Please note that you have to mention \n         <a href=\"http:\/\/mobile-learning.uni-bayreuth.de\/\" target=\"_blank\">The Center of Mobile Learning with Digital Technology<\/a>\n         in the credits.\n         <\/p>\n      <\/div>\n\n      <p>For more examples have a look at our <a target=\"_blank\" href=\"http:\/\/jsxgraph.uni-bayreuth.de\/share\/example\/inequalities-function-graphs\">JSXGraph examples database<\/a>.<\/p>\n   <\/body>\n<\/html>\n","code_export_moodle":"<jsxgraph width=\"100%\" aspect-ratio=\"1 \/ 1\" title=\"Inequalities (function graphs)\" description=\"This construction was copied from JSXGraph examples database: http:\/\/jsxgraph.uni-bayreuth.de\/share\/\" useGlobalJS=\"false\">\n   \/*\n   This example is licensed under a \n   Creative Commons Attribution ShareAlike 4.0 International License.\n   https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\n   \n   Please note that you have to mention \n   The Center of Mobile Learning with Digital Technology\n   in the credits.\n   *\/\n   \n   const board = JXG.JSXGraph.initBoard(BOARDID, {\n       boundingbox: [-5, 5, 5, -5],\n       axis: true\n   });\n   \n   var f = board.create('functiongraph', [(t) => Math.sin(t) * t]);\n   \n   var ineq = board.create('inequality', [f], {\n       fillColor: 'yellow'\n   });\n   \n<\/jsxgraph>","link":"http:\/\/jsxgraph.uni-bayreuth.de\/share\/example\/inequalities-function-graphs","link_raw":"http:\/\/jsxgraph.uni-bayreuth.de\/share\/raw\/inequalities-function-graphs","alert_deleted":"This example is deprecated and has therefore been flagged as \"*deleted*\"."}

Inequalities (function graphs)

Geometry

Have also a look at "Inequalities (half-planes)".

This example shows for a function $x\mapsto f(x)$ the area of all points $(x,y)$ with $y - f(x) \leq 0$.

// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    axis: true
});

var f = board.create('functiongraph', [(t) => Math.sin(t) * t]);

var ineq = board.create('inequality', [f], {
    fillColor: 'yellow'
});

/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note that you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    axis: true
});

var f = board.create('functiongraph', [(t) => Math.sin(t) * t]);

var ineq = board.create('inequality', [f], {
    fillColor: 'yellow'
});

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note that you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
        axis: true
    });
    
    var f = board.create('functiongraph', [(t) => Math.sin(t) * t]);
    
    var ineq = board.create('inequality', [f], {
        fillColor: 'yellow'
    });
    
 </script>

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Inequalities (function graphs)" description="This construction was copied from JSXGraph examples database: http://jsxgraph.uni-bayreuth.de/share/" useGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note that you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-5, 5, 5, -5],
       axis: true
   });
   
   var f = board.create('functiongraph', [(t) => Math.sin(t) * t]);
   
   var ineq = board.create('inequality', [f], {
       fillColor: 'yellow'
   });
   
</jsxgraph>

/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note that you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    axis: true
});

var f = board.create('functiongraph', [(t) => Math.sin(t) * t]);

var ineq = board.create('inequality', [f], {
    fillColor: 'yellow'
});

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note that you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
        axis: true
    });
    
    var f = board.create('functiongraph', [(t) => Math.sin(t) * t]);
    
    var ineq = board.create('inequality', [f], {
        fillColor: 'yellow'
    });
    
 </script>

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Inequalities (function graphs)" description="This construction was copied from JSXGraph examples database: http://jsxgraph.uni-bayreuth.de/share/" useGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note that you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-5, 5, 5, -5],
       axis: true
   });
   
   var f = board.create('functiongraph', [(t) => Math.sin(t) * t]);
   
   var ineq = board.create('inequality', [f], {
       fillColor: 'yellow'
   });
   
</jsxgraph>