Difference between revisions of "Highlight curve via slider"

From JSXGraph Wiki
Jump to: navigation, search
Line 2: Line 2:
 
<jsxgraph height="500" width="600" board="board"  box="jxgbox">
 
<jsxgraph height="500" width="600" board="board"  box="jxgbox">
 
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 25, unitY: 25});
 
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 25, unitY: 25});
var s = board.createElement('slider', [[1,8],[5,8],[0,0,1]], {showLabel:false});
+
var s = board.createElement('slider', [[1,8],[5,8],[0,0,1]]);
  
 
var g = board.createElement('functiongraph', [function(x){ return x*x;}],
 
var g = board.createElement('functiongraph', [function(x){ return x*x;}],

Revision as of 14:17, 2 June 2009

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

The underlying JavaScript code

var s = board.createElement('slider', [[1,8],[5,8],[0,0,1]]);

var g = board.createElement('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.createElement('functiongraph', [function(x){ return x+1;}],
         {
          strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
          strokeWidth:function(){ return (s.Value()>=0.5)?4:1;},
         });