Highlight curve via slider: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
Line 1: Line 1:
Depending on the value of the slider ''s'', one of the curves is highlighted.
Depending on the value of the slider ''s'', one of the curves is highlighted.
<jsxgraph height="500" width="600" board="board"  box="jxgbox">
<jsxgraph height="500" width="500" board="board"  box="jxgbox">
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 25, unitY: 25});
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});
var s = board.createElement('slider', [[1,8],[5,8],[0,0,1]]);
var s = board.create('slider', [[1,8],[5,8],[0,0,1]]);


var g = board.createElement('functiongraph', [function(x){ return x*x;}],
var g = board.create('functiongraph', [function(x){ return x*x;}],
                     {
                     {
                         strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
                         strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
                         strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
                         strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
                     });
                     });
var f = board.createElement('functiongraph', [function(x){ return x+1;}],
var f = board.create('functiongraph', [function(x){ return x+1;}],
                     {
                     {
                         strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
                         strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
Line 18: Line 18:
===The underlying JavaScript code===
===The underlying JavaScript code===
<source lang="javascript">
<source lang="javascript">
var s = board.createElement('slider', [[1,8],[5,8],[0,0,1]]);
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});
var s = board.create('slider', [[1,8],[5,8],[0,0,1]]);


var g = board.createElement('functiongraph', [function(x){ return x*x;}],
var g = board.create('functiongraph', [function(x){ return x*x;}],
         {
         {
           strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
           strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
           strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
           strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
         });
         });
var f = board.createElement('functiongraph', [function(x){ return x+1;}],
var f = board.create('functiongraph', [function(x){ return x+1;}],
         {
         {
           strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
           strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},

Latest revision as of 07:15, 8 June 2011

Depending on the value of the slider s, one of the curves is highlighted.

The underlying JavaScript code

board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});
var s = board.create('slider', [[1,8],[5,8],[0,0,1]]);

var g = board.create('functiongraph', [function(x){ return x*x;}],
         {
          strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
          strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
         });
var f = board.create('functiongraph', [function(x){ return x+1;}],
         {
          strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
          strokeWidth:function(){ return (s.Value()>=0.5)?4:1;}
         });