Polynomials

by turtaniumx

HTML

<script src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<form id="chsDir">
<p><input type="radio" name="chooseDir" value="zoomInX" >Zoom horizontally <input type="radio" name="chooseDir" value="zoomInY">Zoom vertically <input type="radio" name="chooseDir" value="zoomBoth" checked="checked">Zoom both directions</p>
</form>
<div id='box3' class='jxgbox'></div>

CSS

#box3 {
    width:500px;
    height:500px;
}

JavaScript

var brd = JXG.JSXGraph.initBoard('box3', 
	{axis: false, 
  boundingbox: [-6.5,300,6.5,-300], 
  //keepaspectratio: true, 
  zoom: {factorX: 1.25,factorY: 1.25,wheel: true,needshift: false},
  //zoomX: 0.8,
  //zoomY: 0.05, 
  pan: {needShift: false,needTwoFingers: true,enabled: true},     
  showCopyright:false
  });

var a = brd.create('axis', [[0, 0], [1, 0]], {ticks: {scale: 1}});
var b = brd.create('axis', [[0, 0], [0, 1]], {ticks: {scale: 1}});

var f = brd.jc.snippet(
    // the function term
    '1*(x-6)*(x-5)*(x-4)*(x+6)',
    // wrap a function around it
    true,
    // the parameters to the function
    'x'
);

brd.create('plot', [f]);

var factX = 1.25, factY = 1.25;
var setZoom = function() {
	brd.attr.zoom.factorx = factX;
	brd.attr.zoom.factory = factY;
}
setZoom();




var options = document.getElementsByName("chooseDir");
if (options) {
    for (var i = 0; options.length > i; i++) {
		options[i].addEventListener("change", function() {
			if(this.value == 'zoomInX') {
				factX = 1.25;
				factY = 1.0;
			} else if(this.value == 'zoomInY') {
				factX = 1.0;
				factY = 1.25;
			} else {
				factX = 1.25;
				factY = 1.25;	
			}
			setZoom();			
		});		
    }
}