# Difference between revisions of "Step function II"

From JSXGraph Wiki

Jump to navigationJump to searchA WASSERMANN (talk | contribs) (Created page with "This is an example for the element '''stepfunction'''. Here, the steps are drawn. Step functions can also be realized as function graphs, where the steps are invisible, see [[Ste...") |
A WASSERMANN (talk | contribs) |
||

(4 intermediate revisions by the same user not shown) | |||

Line 1: | Line 1: | ||

− | This is an example for the element | + | This is an example for the element ''stepfunction''. Here, the steps are drawn. Step functions can also be realized as function graphs, where the steps are invisible, see [[Step function]]. |

<jsxgraph width="600" height="400"> | <jsxgraph width="600" height="400"> | ||

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true}); | var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true}); | ||

+ | // Static example | ||

+ | var curve = board.create('stepfunction', [[0,1,2,3,4,5], [1,3,0,2,2,1]]); | ||

+ | |||

+ | // Dynamic example | ||

+ | var p = board.create('point', [-1, 5], {name:'drag me'}); | ||

+ | var curve2 = board.create('stepfunction', [[0,1,2,3,4,5], [1,3,0,2,2,1]], {strokeColor:'red'}); | ||

+ | board.on('update', function() { | ||

+ | var i, len = curve2.xterm.length; | ||

+ | for (i=0; i<len; i++) { | ||

+ | curve2.yterm[i] = Math.random()*p.Y(); | ||

+ | } | ||

+ | }); | ||

</jsxgraph> | </jsxgraph> | ||

+ | |||

===The underlying JavaScript code=== | ===The underlying JavaScript code=== | ||

<source lang="javascript"> | <source lang="javascript"> | ||

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true}); | var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true}); | ||

+ | // Static example | ||

+ | var curve = board.create('stepfunction', [[0,1,2,3,4,5], [1,3,0,2,2,1]]); | ||

+ | |||

+ | // Dynamic example | ||

+ | var p = board.create('point', [-1, 5], {name:'drag me'}); | ||

+ | var curve2 = board.create('stepfunction', [[0,1,2,3,4,5], [1,3,0,2,2,1]], {strokeColor:'red'}); | ||

+ | board.on('update', function() { | ||

+ | var i, len = curve2.xterm.length; | ||

+ | for (i=0; i<len; i++) { | ||

+ | curve2.yterm[i] = Math.random()*p.Y(); | ||

+ | } | ||

+ | }); | ||

</source> | </source> | ||

[[Category:Examples]] | [[Category:Examples]] | ||

[[Category:Calculus]] | [[Category:Calculus]] |

## Latest revision as of 09:13, 10 April 2014

This is an example for the element *stepfunction*. Here, the steps are drawn. Step functions can also be realized as function graphs, where the steps are invisible, see Step function.

### The underlying JavaScript code

```
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true});
// Static example
var curve = board.create('stepfunction', [[0,1,2,3,4,5], [1,3,0,2,2,1]]);
// Dynamic example
var p = board.create('point', [-1, 5], {name:'drag me'});
var curve2 = board.create('stepfunction', [[0,1,2,3,4,5], [1,3,0,2,2,1]], {strokeColor:'red'});
board.on('update', function() {
var i, len = curve2.xterm.length;
for (i=0; i<len; i++) {
curve2.yterm[i] = Math.random()*p.Y();
}
});
```