JSXGraph logo
JSXGraph
JSXGraph share

Share

Differential equations
QR code
<iframe
src="http://jsxgraph.uni-bayreuth.de/share/iframe/differential-equations"
style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;"
name="JSXGraph example: Differential equations"
allowfullscreen
></iframe>
This code has to
f(t,y):<input type="text" id="odeinput" value="(2-t)*y + c"><input type=button value="ok" onclick="doPlot()">
<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 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';
const board = JXG.JSXGraph.initBoard(BOARDID, {axis:true, boundingbox:[-11,11,11,-11]});
var N = board.create('slider', [[-7, 9.5], [7, 9.5], [-15, 10, 15]], {name:'N'});
var slider = board.create('slider', [[-7, 8], [7, 8], [-15, 0, 15]], {name:'c'});
var P = board.create('point', [0, 1], {name:'(t_0, y_0)'});
var f;
var doPlot = function() {
var snip = board.jc.snippet(document.getElementById('odeinput').value, true, 't, y');
f = (t, y) => [snip(t, y[0])];
board.update();
}
// Solve ODE
var ode = function() {
return JXG.Math.Numerics.rungeKutta('heun', [P.Y()], [P.X(), P.X()+N.Value()], 200, f);
}
var g = board.create('curve', [[0],[0]], {strokeColor:'red', strokeWidth:2});
// In each update, solve ODE from t_0 to t_0 + N and plot solution
g.updateDataArray = function() {
var data = ode();
var h = N.Value() / 200;
var i;
this.dataX = [];
this.dataY = [];
for (i = 0; i < data.length; i++) {
this.dataX[i] = P.X() + i * h;
this.dataY[i] = data[i][0];
}
};
// Inital plotting
doPlot();
</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!
const board = JXG.JSXGraph.initBoard(BOARDID, {axis:true, boundingbox:[-11,11,11,-11]});
var N = board.create('slider', [[-7, 9.5], [7, 9.5], [-15, 10, 15]], {name:'N'});
var slider = board.create('slider', [[-7, 8], [7, 8], [-15, 0, 15]], {name:'c'});
var P = board.create('point', [0, 1], {name:'(t_0, y_0)'});
var f;
var doPlot = function() {
var snip = board.jc.snippet(document.getElementById('odeinput').value, true, 't, y');
f = (t, y) => [snip(t, y[0])];
board.update();
}
// Solve ODE
var ode = function() {
return JXG.Math.Numerics.rungeKutta('heun', [P.Y()], [P.X(), P.X()+N.Value()], 200, f);
}
var g = board.create('curve', [[0],[0]], {strokeColor:'red', strokeWidth:2});
// In each update, solve ODE from t_0 to t_0 + N and plot solution
g.updateDataArray = function() {
var data = ode();
var h = N.Value() / 200;
var i;
this.dataX = [];
this.dataY = [];
for (i = 0; i < data.length; i++) {
this.dataX[i] = P.X() + i * h;
this.dataY[i] = data[i][0];
}
};
// Inital plotting
doPlot();

Differential equations

Plot ordinary differential equations (ODE), i.e. display solutions of the ordinary differential equation y′=f(t,y)y'= f(t,y)y​′​​=f(t,y) with initial value (t0,y0)(t_0,y_0)(t​0​​,y​0​​).

f(t,y):
JSXGraph v1.11.1 Copyright (C) see https://jsxgraph.org246810−2−4−6−8−10246810−2−4−6−8−10
0,0
–o+←↓↑→
N = 10.00
c = 0.00
(t0, y0)
f(t,y):<input type="text" id="odeinput" value="(2-t)*y + c"><input type=button value="ok" onclick="doPlot()">
// Define the id of your board in BOARDID
const board = JXG.JSXGraph.initBoard(BOARDID, {axis:true, boundingbox:[-11,11,11,-11]});
var N = board.create('slider', [[-7, 9.5], [7, 9.5], [-15, 10, 15]], {name:'N'});
var slider = board.create('slider', [[-7, 8], [7, 8], [-15, 0, 15]], {name:'c'});
var P = board.create('point', [0, 1], {name:'(t_0, y_0)'});
var f;
var doPlot = function() {
var snip = board.jc.snippet(document.getElementById('odeinput').value, true, 't, y');
f = (t, y) => [snip(t, y[0])];
board.update();
}
// Solve ODE
var ode = function() {
return JXG.Math.Numerics.rungeKutta('heun', [P.Y()], [P.X(), P.X()+N.Value()], 200, f);
}
var g = board.create('curve', [[0],[0]], {strokeColor:'red', strokeWidth:2});
// In each update, solve ODE from t_0 to t_0 + N and plot solution
g.updateDataArray = function() {
var data = ode();
var h = N.Value() / 200;
var i;
this.dataX = [];
this.dataY = [];
for (i = 0; i < data.length; i++) {
this.dataX[i] = P.X() + i * h;
this.dataY[i] = data[i][0];
}
};
// Inital plotting
doPlot();

license

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.