Linear Function: parameters: Difference between revisions

From JSXGraph Wiki
(Created page with "# Linear function")
 
(creating the linear function example)
Line 1: Line 1:
# Linear function
{|
|Linear Function
|-
|  <jsxgraph box="jxgbox" width="500" height="500">
  JXG.Options.text.useMathJax = true;
  var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 7, 5, -3], axis:true});
   
  var gr = board.create('grid');
 
  var m = board.create('slider', [[4,1],[4,5],[0,1,4]],{snapWidth: 0.1, precision: 1,
                                                        ticks: { drawLabels: true, label: {position: 'rt', offset: [10,0]}},
                                                        name: "m"});
  var t = board.create('slider', [[-4,1],[-4,5],[-2,0,6]],{snapWidth: 0.1, precision: 1,
                                                          ticks: { drawZero: true, drawLabels: true, ticksDistance: 1,
                                                                    minTicksDistance: 5, // insertTicks: true,
                                                                  tickEndings: [1,0],
                                                                  label: {position: 'lft', offset: [-20,0]}},
                                                            name: "t"});
  var tval = function(){return t.Value();};
  var T = board.create('point', [0,tval], {name: "T", label: "T", strokeColor: 'purple', face: 'cross'});
  var mval = function(){return m.Value();};
  var linF0 = function(x){return mval()*x};
  var linF = function(x){return mval()*x + tval()};
  var G0 = board.create('functiongraph',[linF0,-5,5], {strokeWidth: 1, dash: 2});
  var G = board.create('functiongraph',[linF,-5,5], {strokeWidth: 2});
 
  var ftextval = function(){
    var vz = "";
    var tv = "";
    if (tval() >= 0.0) {if (tval() == 0.0){tv = ""; vz = "";} else {vz = "+"; tv = JXG.toFixed(tval(),1);}}
      else {vz = ""; tv = JXG.toFixed(tval(),1);};
    return "\\[f(x)="+ JXG.toFixed(mval(),1) + " \\cdot x" + vz + tv + "\\]";
  };
  var ftext = board.create('text', [-4.2,6.0,ftextval], {fontSize: 18, color:'blue', cssStyle: 'background-color: rgb(255,255,255)'});
  var dt = board.create('segment',[[0,0],[0,tval]],{strokeColor: 'purple', strokeWidth: 3});
  var A = board.create('glider', [1,2,G], {label: {offset: [0,-15]}});
  var tangent = board.create('tangent', [A]);
  var st = board.create('slopetriangle', [tangent], {toppoint: {face: 'plus', withLabel: false}});
  </jsxgraph>
|}
 
 
=== The underlying JavaScript source code ===
 
 
<source lang="javascript">
<jsxgraph box="jxgbox" width="500" height="500">
  JXG.Options.text.useMathJax = true;
  var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 7, 5, -3], axis:true});
   
  var gr = board.create('grid');
 
  var m = board.create('slider', [[4,1],[4,5],[0,1,4]],{snapWidth: 0.1, precision: 1,
                                                        ticks: { drawLabels: true, label: {position: 'rt', offset: [10,0]}},
                                                        name: "m"});
  var t = board.create('slider', [[-4,1],[-4,5],[-2,0,6]],{snapWidth: 0.1, precision: 1,
                                                          ticks: { drawZero: true, drawLabels: true, ticksDistance: 1,
                                                                    minTicksDistance: 5, // insertTicks: true,
                                                                  tickEndings: [1,0],
                                                                  label: {position: 'lft', offset: [-20,0]}},
                                                            name: "t"});
  var tval = function(){return t.Value();};
  var T = board.create('point', [0,tval], {name: "T", label: "T", strokeColor: 'purple', face: 'cross'});
  var mval = function(){return m.Value();};
  var linF0 = function(x){return mval()*x};
  var linF = function(x){return mval()*x + tval()};
  var G0 = board.create('functiongraph',[linF0,-5,5], {strokeWidth: 1, dash: 2});
  var G = board.create('functiongraph',[linF,-5,5], {strokeWidth: 2});
 
  var ftextval = function(){
    var vz = "";
    var tv = "";
    if (tval() >= 0.0) {if (tval() == 0.0){tv = ""; vz = "";} else {vz = "+"; tv = JXG.toFixed(tval(),1);}}
      else {vz = ""; tv = JXG.toFixed(tval(),1);};
    return "\\[f(x)="+ JXG.toFixed(mval(),1) + " \\cdot x" + vz + tv + "\\]";
  };
  var ftext = board.create('text', [-4.2,6.0,ftextval], {fontSize: 18, color:'blue', cssStyle: 'background-color: rgb(255,255,255)'});
  var dt = board.create('segment',[[0,0],[0,tval]],{strokeColor: 'purple', strokeWidth: 3});
  var A = board.create('glider', [1,2,G], {label: {offset: [0,-15]}});
  var tangent = board.create('tangent', [A]);
  var st = board.create('slopetriangle', [tangent], {toppoint: {face: 'plus', withLabel: false}});
  </jsxgraph>
</source>
 
[[Category:Contributions]]
[[Category:Examples]]

Revision as of 07:01, 29 June 2021

Linear Function


The underlying JavaScript source code

 <jsxgraph box="jxgbox" width="500" height="500"> 
  JXG.Options.text.useMathJax = true;
  var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 7, 5, -3], axis:true});
    
  var gr = board.create('grid');

	
  var m = board.create('slider', [[4,1],[4,5],[0,1,4]],{snapWidth: 0.1, precision: 1,
                                                        ticks: { drawLabels: true, label: {position: 'rt', offset: [10,0]}},
                                                        name: "m"});
  var t = board.create('slider', [[-4,1],[-4,5],[-2,0,6]],{snapWidth: 0.1, precision: 1,
                                                           ticks: { drawZero: true, drawLabels: true, ticksDistance: 1,
                                                                    minTicksDistance: 5, // insertTicks: true,
                                                                   tickEndings: [1,0],
                                                                   label: {position: 'lft', offset: [-20,0]}},
                                                            name: "t"});
  var tval = function(){return t.Value();};
  var T = board.create('point', [0,tval], {name: "T", label: "T", strokeColor: 'purple', face: 'cross'});
  var mval = function(){return m.Value();};
  var linF0 = function(x){return mval()*x};
  var linF = function(x){return mval()*x + tval()};
  var G0 = board.create('functiongraph',[linF0,-5,5], {strokeWidth: 1, dash: 2});
  var G = board.create('functiongraph',[linF,-5,5], {strokeWidth: 2});

  var ftextval = function(){
    var vz = "";
    var tv = "";
    if (tval() >= 0.0) {if (tval() == 0.0){tv = ""; vz = "";} else {vz = "+"; tv = JXG.toFixed(tval(),1);}}
      else {vz = ""; tv = JXG.toFixed(tval(),1);};
    return "\\[f(x)="+ JXG.toFixed(mval(),1) + " \\cdot x" + vz + tv + "\\]";
  };
  var ftext = board.create('text', [-4.2,6.0,ftextval], {fontSize: 18, color:'blue', cssStyle: 'background-color: rgb(255,255,255)'});
  var dt = board.create('segment',[[0,0],[0,tval]],{strokeColor: 'purple', strokeWidth: 3});
  var A = board.create('glider', [1,2,G], {label: {offset: [0,-15]}});
  var tangent = board.create('tangent', [A]);
  var st = board.create('slopetriangle', [tangent], {toppoint: {face: 'plus', withLabel: false}});
   </jsxgraph>