Home
Random example
Search
Applications
Chemistry
Economy
Famous theorems
Geography
Physics
Sports
Test
Assessment
Calculus
3D
Applied calculus
Basic calculus
Differential equations
Function plotting
Implicit plotting
Sequences and series
Charts and data
Charts
Statistics
Curves
Interpolation
Intersection, Union, Difference
Lindenmayer Systems
Splines
Geometry
3D
Analytic
Euclidean
Basic constructions
Mappings
Non-Euclidean
Projective
Symmetry
Technical
Animation
Roulettes
Board options
First steps
Images
JSXGraph objects
Arcs and angles
Axes
Circles
Groups
Lines and arrows
Point
Polygons
Slider
Turtle
Vectors
JessieCode
Texts
Transformations
Video
jsxgraph.org
JSXGraph logo
JSXGraph
JSXGraph share

Share

3D function graph plotter
Show plain example
QR code
<iframe 
    src="https://jsxgraph.org/share/iframe/3d-function-graph" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: 3D function graph plotter" 
    allowfullscreen
></iframe>
This code has to
<p>Function term in <em>(x,y)</em>:
  <br>
  <input type"text" id="plot_input" value="sin(x * y * r / 4)" style="width: 10em; margin-top: 1rem;">
  <br>
  <input type="button" id="plot_start" value="plot" onClick="start_plot();" style="width: 4em; margin-top: 1rem;">
  <input type="button" id="plot_reset" value="reset" onClick="reset_plot();" style="width: 4em; margin-top: 1rem;">
  <br><br>
  (The function might also depend on the slider value <em>r</em>.)
</p>

<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 you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    // Define some colors, optimized for color blinds
    var colors = [JXG.palette.blue,
            JXG.palette.red,
            JXG.palette.green,
            JXG.palette.black,
            JXG.palette.purple,
            JXG.palette.yellow,
            JXG.palette.skyblue
        ],
        cnt = 0;
    
    // We make board a global variable.
    // This is necessary just on this platform.
    window.board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-8, 8, 8, -8],
        keepaspectratio: false,
        axis: false,
        pan: {
            enabled: false
        }
    });
    
    var box = [-5, 5];
    var view = board.create('view3d', [
        [-6, -3],
        [8, 8],
        [box, box, box]
    ], {
        xPlaneRear: {visible: false}, yPlaneRear: {visible: false}
    });
    
    // Create a slider which might be used in the function term
    // using the name 'r'
    var slider = board.create('slider', [[-7, -6], [5, -6], [-3, 1, 4]], { name: 'r' });
    
    // Handler for button 'plot'
    window.start_plot = function() {
        var txt = document.getElementById('plot_input').value,
            f = board.jc.snippet(txt, true, 'x,y', true), // JessieCode parsing
            el;
    
        el = view.create('functiongraph3d', [f, box, box], {
            strokeColor: colors[cnt],
            stepsU: 50,
            stepsV: 50,
            strokeWidth: 0.5
        });
        board.update();
        // Cycle through the color array
        cnt = (cnt + 1) % colors.length;
    }
    
    // Handler for button 'reset'
    window.reset_plot = function() {
        // Complete restart of the construction
        JXG.JSXGraph.freeBoard(board);
        board = JXG.JSXGraph.initBoard(BOARDID, {
            boundingbox: [-8, 8, 8, -8]
        });
        view = board.create('view3d', [
            [-6, -3],
            [8, 8],
            [box, box, box]
        ]);
    
        slider = board.create('slider', [
            [-7, -6],
            [5, -6],
            [-3, 1, 4]
        ], {
            name: 'r'
        });
        cnt = 0;
    }
    
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/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!

// Define some colors, optimized for color blinds
var colors = [JXG.palette.blue,
        JXG.palette.red,
        JXG.palette.green,
        JXG.palette.black,
        JXG.palette.purple,
        JXG.palette.yellow,
        JXG.palette.skyblue
    ],
    cnt = 0;

// We make board a global variable.
// This is necessary just on this platform.
window.board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-8, 8, 8, -8],
    keepaspectratio: false,
    axis: false,
    pan: {
        enabled: false
    }
});

var box = [-5, 5];
var view = board.create('view3d', [
    [-6, -3],
    [8, 8],
    [box, box, box]
], {
    xPlaneRear: {visible: false}, yPlaneRear: {visible: false}
});

// Create a slider which might be used in the function term
// using the name 'r'
var slider = board.create('slider', [[-7, -6], [5, -6], [-3, 1, 4]], { name: 'r' });

// Handler for button 'plot'
window.start_plot = function() {
    var txt = document.getElementById('plot_input').value,
        f = board.jc.snippet(txt, true, 'x,y', true), // JessieCode parsing
        el;

    el = view.create('functiongraph3d', [f, box, box], {
        strokeColor: colors[cnt],
        stepsU: 50,
        stepsV: 50,
        strokeWidth: 0.5
    });
    board.update();
    // Cycle through the color array
    cnt = (cnt + 1) % colors.length;
}

// Handler for button 'reset'
window.reset_plot = function() {
    // Complete restart of the construction
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-8, 8, 8, -8]
    });
    view = board.create('view3d', [
        [-6, -3],
        [8, 8],
        [box, box, box]
    ]);

    slider = board.create('slider', [
        [-7, -6],
        [5, -6],
        [-3, 1, 4]
    ], {
        name: 'r'
    });
    cnt = 0;
}

3D function graph plotter

3D
Function plotting
3D function plot of functions $f: {\mathbb R}^2 \to {\mathbb R}, \; (x,y) \mapsto f(x, y)$.

Function term in (x,y):



(The function might also depend on the slider value r.)

<p>Function term in <em>(x,y)</em>:
  <br>
  <input type"text" id="plot_input" value="sin(x * y * r / 4)" style="width: 10em; margin-top: 1rem;">
  <br>
  <input type="button" id="plot_start" value="plot" onClick="start_plot();" style="width: 4em; margin-top: 1rem;">
  <input type="button" id="plot_reset" value="reset" onClick="reset_plot();" style="width: 4em; margin-top: 1rem;">
  <br><br>
  (The function might also depend on the slider value <em>r</em>.)
</p>
// Define the id of your board in BOARDID

// Define some colors, optimized for color blinds
var colors = [JXG.palette.blue,
        JXG.palette.red,
        JXG.palette.green,
        JXG.palette.black,
        JXG.palette.purple,
        JXG.palette.yellow,
        JXG.palette.skyblue
    ],
    cnt = 0;

// We make board a global variable.
// This is necessary just on this platform.
window.board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-8, 8, 8, -8],
    keepaspectratio: false,
    axis: false,
    pan: {
        enabled: false
    }
});

var box = [-5, 5];
var view = board.create('view3d', [
    [-6, -3],
    [8, 8],
    [box, box, box]
], {
    xPlaneRear: {visible: false}, yPlaneRear: {visible: false}
});

// Create a slider which might be used in the function term
// using the name 'r'
var slider = board.create('slider', [[-7, -6], [5, -6], [-3, 1, 4]], { name: 'r' });

// Handler for button 'plot'
window.start_plot = function() {
    var txt = document.getElementById('plot_input').value,
        f = board.jc.snippet(txt, true, 'x,y', true), // JessieCode parsing
        el;

    el = view.create('functiongraph3d', [f, box, box], {
        strokeColor: colors[cnt],
        stepsU: 50,
        stepsV: 50,
        strokeWidth: 0.5
    });
    board.update();
    // Cycle through the color array
    cnt = (cnt + 1) % colors.length;
}

// Handler for button 'reset'
window.reset_plot = function() {
    // Complete restart of the construction
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-8, 8, 8, -8]
    });
    view = board.create('view3d', [
        [-6, -3],
        [8, 8],
        [box, box, box]
    ]);

    slider = board.create('slider', [
        [-7, -6],
        [5, -6],
        [-3, 1, 4]
    ], {
        name: 'r'
    });
    cnt = 0;
}

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.