lkarch.org/tools/mathisfun/www.mathsisfun.com/data/images/graph-paper.js

var w,h,ratio,i,s,el,g,div,dragQ,game,my={};function graphpaperMain(){var version='0.62';w=500;h=420;s="";s+='<div style="position:relative; width:'+w+'px; border: none; margin:auto; display:block;">';s+='<div style="display: block; width:96%; padding:2%; text-align: center; background-color: #def; z-index: 20;">';s+='<div style="display: block; margin: 12px 0 16px 0;" >';my.inps=[['From x','minx',0],['To x','maxx',10],['From y','min',0],['To y','maxy',10]];for(var i=0;i<my.inps.length;i++){var inp=my.inps[i];s+='<div style="display: block; margin: 2px 30px 2px 0;" >';s+='<div style="display: inline-block; width: 120px; margin: 0 10px 0 0; font: 18px arial; color: black; text-align: right; ">'+inp[0]+': </div>';s+='<div style="display: inline-block; ">';s+='<input type="text" id="'+inp[1]+'" style="display:block; width: 110px; height: 20px; text-align: center; border-radius: 10px; font: 18px Arial; color: #0000ff; color: #0000ff; background-color: white; " value="'+inp[2]+'" oninput="chgVal('+i+',this.value)" onchange="chgVal('+i+',this.value)" />';s+='</div>';s+='</div>';}
s+='</div>';s+='<div style="display: inline-block; vertical-align: top; margin:3px; padding:2px; border-radius:5px; " >';s+='<button id="scaleBtn" onclick="toggleScale()" style="z-index:2;" class="togglebtn hi" >Equal Scales</button>';s+='<button style="color: #8888ff; font-size: 14px;" class="togglebtn" onclick="canvasPrint()" >Print</button>';s+='<button style="color: #8888ff; font-size: 14px;" class="togglebtn" onclick="canvasSave()" >Save</button>';s+='</div>';s+='<div style="text-align:center; color:black; font: 17px Arial; z-index: 2;">';s+='<span style="color:black; font: 16px Arial; z-index: 2;">Density:</span>';s+='<input type="range" id="r1" value="0.5" min="0.1" max="2.0" step=".01"  style="z-index:2; width:200px; height:17px; border: none; position:relative; top: 5px; " oninput="densityChg(0,this.value)" onchange="densityChg(1,this.value)" />';s+='<button style="font: 16px Arial;" class="togglebtn"  onclick="densityReset()" >Reset</button>';s+='</div>';s+='</div>';s+='<div id="tbl">';s+='</div>';s+='<canvas id="can" width="'+w+'" height="'+h+'" style="z-index:1;"></canvas>';s+='<div id="copyrt" style="font: 10px Arial; color: #6600cc;  text-align:center;">&copy; 2018 MathsIsFun.com  v'+version+'</div>';s+='</div>';document.write(s);el=document.getElementById('can');ratio=2;el.width=w*ratio;el.height=h*ratio;el.style.width=w+"px";el.style.height=h+"px";g=el.getContext("2d");g.setTransform(ratio,0,0,ratio,0,0);el.addEventListener('touchmove',ontouchmove,false);el.addEventListener('mousemove',onmousemove,false);my.eqScaleQ=true;my.density=0.01;console.log("go");go(0);}
function chgVal(i,val){go(0);}
function densityChg(n,v){my.density=v/100;go(2);}
function densityReset(){my.density=0.01;go(2);}
function toggleScale(){my.eqScaleQ=!my.eqScaleQ;toggleBtn("scaleBtn",my.eqScaleQ);go(-1);}
function toggleBtn(btn,onq){if(onq){document.getElementById(btn).classList.add("hi");document.getElementById(btn).classList.remove("lo");}else{document.getElementById(btn).classList.add("lo");document.getElementById(btn).classList.remove("hi");}}
function go(n){var lims=[]
for(var i=0;i<my.inps.length;i++){var inp=my.inps[i];var a=parseFloat(document.getElementById(inp[1]).value);lims.push(a);}
var rect={xstt:lims[0],xend:lims[1],ystt:lims[2],yend:lims[3]};console.log("go",lims,rect);my.coords=new Coords(60,20,w-80,300,rect.xstt,rect.ystt,rect.xend,rect.yend,my.eqScaleQ);my.coords.density=my.density;g.clearRect(0,0,el.width,el.height);var graph=new Graph(g,my.coords);graph.drawGraph();}
function onmousemove(e){}
function ontouchmove(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;onmousemove(evt);evt.preventDefault();}
function getDivStr(id,val,typ){var s='';switch(typ){case 'period':s+='<div style="display: inline-block; width:25px; font: bold 15px Arial; color:blue;  padding:3px; margin: 3px; text-align:center;  z-index:2;" value="'+val+'" />';s+=val;s+='</div>';break;case 'title':s+='<div style="display: inline-block; width:80px; font: bold 15px Arial; color:blue;  padding:3px; margin: 3px; text-align:center;  z-index:2;" value="'+val+'" />';s+=val;s+='</div>';break;case 'in':s+='<input id="'+id+'" style="width:80px; font: 15px Arial; color:blue;  padding:3px; margin: 3px; text-align:center;  z-index:2;" value="'+val+'" onkeyup="tblValUpdate(\''+id+'\')"  onchange ="tblValUpdate(\''+id+'\')" /> &nbsp;';break;case 'fix':s+='<div style="display: inline-block; width:80px; font: 15px Arial; color:blue;  padding:3px; margin: 3px; text-align:center;  z-index:2;" value="'+val+'" />';s+=fmt2(val);s+='</div>';break;default:}
return s;}
function canvasSave(){var can=document.getElementById("can");var dataUrl=can.toDataURL('image/png');var win=window.open();var s=pageHTML(dataUrl);win.document.write(s);}
function canvasPrint(){var can=document.getElementById("can");var dataUrl=can.toDataURL('image/png');var win=window.open();var s=pageHTML(dataUrl);win.document.write(s);var isChrome=(window.navigator.userAgent.toLowerCase().indexOf("chrome")>-1);if(isChrome){win.focus();setTimeout(function(){win.print();},500);}else{win.focus();win.print();win.close();}}
function pageHTML(dataUrl){var s='<!doctype html><html lang="en"><head><title>Recent</title>';s+='<style type="text/css">';s+='body {';s+='width:100%; ';s+='height:100%; ';s+='margin: 0 !important; ';s+='padding: 0 !important; ';s+='overflow: hidden; ';s+='}';s+='</style>';s+='</head>';s+='<body style="font: 16px Arial;">';s+='<img src="'+dataUrl+'" style="max-width: 100%;" />';s+='</body></html>';console.log("pageHTML",s);return s;}
function getPopHTML(){s='';s+='<style>input[type="radio"]:checked+label {font-weight: bold;}</style>';s+='<div id="editpop" style="position:absolute; left:-450px; top:40px; padding: 5px; border: 1px solid red; border-radius: 9px; background-color: #88aaff; box-shadow: 10px 10px 5px 0px rgba(40,40,40,0.75); z-index:1; transition: all linear 0.3s; opacity:0; font: 14px Arial;  ">';inps=[['Investment','popInv',1000],['Income','popInc',200],['Number of Periods','popn',10],['Interest Rate (%)','popInt',5]];for(var i=0;i<inps.length;i++){var inp=inps[i];s+='<div style="font: 14px Arial; text-align:right; width:300px; " >';s+='<span id="'+inp[1]+'Lbl" style="font: 15px Arial; padding:3px; margin: 3px; text-align:right;  z-index:2;">'+inp[0]+'</span>';s+='<input id="'+inp[1]+'" style="width:100px; font: 15px Arial; color:blue;  padding:3px; margin: 3px; text-align:center;  z-index:2;" value="'+inp[2]+'" onkeyup="go(-1)"  onchange ="go(-1)" /> &nbsp;';s+='</div>'}
s+='<div style="text-align:center;">';s+='<button onclick="editYes()" style="z-index:2; font: 22px Arial;" class="togglebtn" >&#x2714;</button>';s+='<button onclick="editNo()" style="z-index:2; font: 22px Arial;" class="togglebtn" >&#x2718;</button>';s+='</div>';s+='</div>';return s;}
function doPop(){console.log("doPop");if(my.typNPVQ){document.getElementById('popInvLbl').innerHTML='Investment';document.getElementById('popIncLbl').innerHTML='Income';}else{document.getElementById('popInvLbl').innerHTML='Loan Amount';document.getElementById('popIncLbl').innerHTML='Payment Amount';}
var pop=document.getElementById('editpop');pop.style.transitionDuration="0.3s";pop.style.opacity=1;pop.style.zIndex=12;pop.style.left='50px';}
function editYes(){var pop=document.getElementById('editpop');pop.style.opacity=0;pop.style.zIndex=1;pop.style.left='-500px';console.log("editYes",my.fn);my.i=Number(document.getElementById('popInt').value)/100;var inv=Number(document.getElementById('popInv').value);var inc=Number(document.getElementById('popInc').value);var n=Number(document.getElementById('popn').value);var s=(-inv).toString();for(var i=0;i<n;i++){s+=',';s+=inc;}
document.getElementById('vals').value=s;go(0);}
function editNo(){var pop=document.getElementById('editpop');pop.style.opacity=0;pop.style.zIndex=1;pop.style.left='-500px';}
function Coords(left,top,width,height,xStt,yStt,xEnd,yEnd,uniScaleQ){this.left=left;this.top=top;this.width=width;this.height=height;this.xStt=xStt;this.yStt=yStt;this.xEnd=xEnd;this.yEnd=yEnd;this.uniScaleQ=uniScaleQ;this.xLogQ=false;this.yLogQ=false;this.density=0.002;this.calcScale();}
Coords.prototype.calcScale=function(){if(this.xLogQ){if(this.xStt<=0)
this.xStt=1;if(this.xEnd<=0)
this.xEnd=1;}
if(this.yLogQ){if(this.yStt<=0)
this.yStt=1;if(this.yEnd<=0)
this.yEnd=1;}
var temp;if(this.xStt>this.xEnd){temp=this.xStt;this.xStt=this.xEnd;this.xEnd=temp;}
if(this.yStt>this.yEnd){temp=this.yStt;this.yStt=this.yEnd;this.yEnd=temp;}
var xSpan=this.xEnd-this.xStt;if(xSpan<=0)
xSpan=1e-9;this.xScale=xSpan/this.width;this.xLogScale=(Math.log(this.xEnd)-Math.log(this.xStt))/this.width;var ySpan=this.yEnd-this.yStt;if(ySpan<=0)
ySpan=1e-9;this.yScale=ySpan/this.height;this.yLogScale=(Math.log(this.yEnd)-Math.log(this.yStt))/this.height;var fromMidQ=false;if(this.uniScaleQ&&!this.xLogQ&&!this.yLogQ){var newScale=Math.max(this.xScale,this.yScale);this.xScale=newScale;xSpan=this.xScale*this.width;if(fromMidQ){var xMid=(this.xStt+this.xEnd)/2;this.xStt=xMid-xSpan/2;this.xEnd=xMid+xSpan/2;}else{this.xEnd=this.xStt+xSpan;}
this.yScale=newScale;ySpan=this.yScale*this.height;if(fromMidQ){var yMid=(this.yStt+this.yEnd)/2;this.yStt=yMid-ySpan/2;this.yEnd=yMid+ySpan/2;}else{this.yEnd=this.yStt+ySpan;}}};Coords.prototype.scale=function(factor,xMid,yMid){if(typeof xMid=='undefined')xMid=(this.xStt+this.xEnd)/2;this.xStt=xMid-(xMid-this.xStt)*factor;this.xEnd=xMid+(this.xEnd-xMid)*factor;if(typeof yMid=='undefined')yMid=(this.yStt+this.yEnd)/2;this.yStt=yMid-(yMid-this.yStt)*factor;this.yEnd=yMid+(this.yEnd-yMid)*factor;this.calcScale();};Coords.prototype.drag=function(xPix,yPix){this.xStt+=xPix*this.xScale;this.xEnd+=xPix*this.xScale;this.yStt+=yPix*this.yScale;this.yEnd+=yPix*this.yScale;this.calcScale();};Coords.prototype.newCenter=function(x,y){var xMid=this.xStt+x*this.xScale;var xhalfspan=(this.xEnd-this.xStt)/2;this.xStt=xMid-xhalfspan;this.xEnd=xMid+xhalfspan;var yMid=this.yEnd-y*this.yScale;var yhalfspan=(this.yEnd-this.yStt)/2;this.yStt=yMid-yhalfspan;this.yEnd=yMid+yhalfspan;this.calcScale();};Coords.prototype.fitToPts=function(pts,borderFactor){for(var i=0;i<pts.length;i++){var pt=pts[i];if(i==0){this.xStt=pt.x;this.xEnd=pt.x;this.yStt=pt.y;this.yEnd=pt.y;}else{this.xStt=Math.min(this.xStt,pt.x);this.xEnd=Math.max(this.xEnd,pt.x);this.yStt=Math.min(this.yStt,pt.y);this.yEnd=Math.max(this.yEnd,pt.y);}}
var xMid=(this.xStt+this.xEnd)/2;var xhalfspan=borderFactor*(this.xEnd-this.xStt)/2;this.xStt=xMid-xhalfspan;this.xEnd=xMid+xhalfspan;var yMid=(this.yStt+this.yEnd)/2;var yhalfspan=borderFactor*(this.yEnd-this.yStt)/2;this.yStt=yMid-yhalfspan;this.yEnd=yMid+yhalfspan;this.calcScale();};Coords.prototype.toXPix=function(val,useCornerQ){if(this.xLogQ){return this.left+(Math.log(val)-Math.log(xStt))/this.xLogScale;}else{return this.left+((val-this.xStt)/this.xScale);}};Coords.prototype.toYPix=function(val){if(this.yLogQ){return this.top+(Math.log(yEnd)-Math.log(val))/this.yLogScale;}else{return this.top+((this.yEnd-val)/this.yScale);}};Coords.prototype.toPtVal=function(pt,useCornerQ){return new Pt(this.toXVal(pt.x,useCornerQ),this.toYVal(pt.y,useCornerQ));};Coords.prototype.toXVal=function(pix,useCornerQ){if(useCornerQ){return this.xStt+(pix-this.left)*this.xScale;}else{return this.xStt+pix*this.xScale;}};Coords.prototype.toYVal=function(pix,useCornerQ){if(useCornerQ){return this.yEnd-(pix-top)*this.yScale;}else{return this.yEnd-pix*this.yScale;}};Coords.prototype.getTicks=function(stt,span,ratio){var ticks=[];var inter=this.tickInterval(span/ratio,false);var tickStt=Math.ceil(stt/inter)*inter;var i=0;do{var tick=tickStt+i*inter;tick=Number(tick.toPrecision(8));ticks.push([tick,1]);i++;}while(tick<stt+span);inter=this.tickInterval(span/ratio,true);for(i=0;i<ticks.length;i++){var t=ticks[i][0];if(Math.abs(Math.round(t/inter)-(t/inter))<0.001){ticks[i][1]=0;}}
return ticks;};Coords.prototype.tickInterval=function(span,majorQ){var pow10=Math.pow(10,Math.floor(Math.log(span)*Math.LOG10E));var mantissa=span/pow10;if(mantissa>=5){if(majorQ){return(5*pow10);}else{return(1*pow10);}}
if(mantissa>=3){if(majorQ){return(2*pow10);}else{return(0.2*pow10);}}
if(mantissa>=1.4){if(majorQ){return(0.5*pow10);}else{return(0.2*pow10);}}
if(mantissa>=0.8){if(majorQ){return(0.5*pow10);}else{return(0.1*pow10);}}
if(majorQ){return(0.2*pow10);}else{return(0.1*pow10);}};function Graph(g,coords){this.g=g;this.coords=coords;this.xLinesQ=true;this.yLinesQ=true;this.xValsQ=true;this.yValsQ=true;this.style={border:{clr:'rgba(0,0,0,0.3)',thk:1},major:{clr:'rgba(0,0,256,0.3)',thk:1},minor:{clr:'rgba(0,0,256,0.1)',thk:1}};this.style={border:{clr:'rgba(0,0,0,0.3)',thk:1},major:{clr:'#000',thk:0.4},minor:{clr:'#000',thk:0.1}};this.skewQ=false;}
Graph.prototype.makeSVG=function(){this.hzAxisY=coords.toYPix(0);if(this.hzAxisY<0)this.hzAxisY=0;if(this.hzAxisY>coords.height)this.hzAxisY=coords.height;this.hzNumsY=this.hzAxisY+14;if(this.hzAxisY>coords.height-10)this.hzNumsY=coords.height-3;this.vtAxisX=coords.toXPix(0);if(this.vtAxisX<0)this.vtAxisX=0;if(this.vtAxisX>coords.width)this.vtAxisX=coords.width;this.vtNumsX=this.vtAxisX-5;if(this.vtAxisX<10)this.vtNumsX=20;my.svg.moveTo(coords.toXPix(coords.xStt,false),this.hzAxisY);my.svg.lineTo(coords.toXPix(coords.xEnd,false),this.hzAxisY);my.svg.moveTo(this.vtAxisX,coords.toYPix(coords.yStt,false));my.svg.lineTo(this.vtAxisX,coords.toYPix(coords.yEnd,false));}
Graph.prototype.drawGraph=function(){var coords=this.coords;this.hzAxisY=coords.toYPix(0);if(this.hzAxisY<coords.top)this.hzAxisY=coords.top;if(this.hzAxisY>coords.top+coords.height)this.hzAxisY=coords.top+coords.height;this.hzNumsY=this.hzAxisY+14;if(this.hzAxisY>coords.top+coords.height-10)this.hzNumsY=coords.top+coords.height-3;this.vtAxisX=coords.toXPix(0);if(this.vtAxisX<coords.left)this.vtAxisX=coords.left;if(this.vtAxisX>coords.left+coords.width)this.vtAxisX=coords.left+coords.width;this.vtNumsX=this.vtAxisX-5;this.vtNumsAlign='right';if(this.vtAxisX<30){this.vtNumsX=this.vtAxisX+4;this.vtNumsAlign='left';if(this.vtAxisX<0){this.vtNumsX=6;}}
g.strokeStyle=this.style.border.clr;g.lineWidth=this.style.border.thk;g.beginPath();g.moveTo(coords.toXPix(coords.xStt,false),coords.toYPix(coords.yStt,false));g.lineTo(coords.toXPix(coords.xStt,false),coords.toYPix(coords.yEnd,false));g.lineTo(coords.toXPix(coords.xEnd,false),coords.toYPix(coords.yEnd,false));g.lineTo(coords.toXPix(coords.xEnd,false),coords.toYPix(coords.yStt,false));g.closePath();g.stroke();if(coords.xLogQ){this.drawLinesLogX();}else{if(this.xLinesQ){this.drawHzLines();}}
if(coords.yLogQ){this.drawLinesLogY();}else{if(this.yLinesQ){this.drawVtLines();}}};Graph.prototype.drawVtLines=function(){var g=this.g;g.lineWidth=1;var coords=this.coords;var ticks=coords.getTicks(coords.xStt,coords.xEnd-coords.xStt,coords.width*coords.density);for(var i=0;i<ticks.length;i++){var tick=ticks[i];var xVal=tick[0];var tickLevel=tick[1];if(tickLevel==0){g.strokeStyle=this.style.major.clr;g.lineWidth=this.style.major.thk;}else{g.strokeStyle=this.style.minor.clr;g.lineWidth=this.style.minor.thk;}
var xPix=coords.toXPix(xVal,false);g.beginPath();g.moveTo(xPix,coords.toYPix(coords.yStt,false));g.lineTo(xPix,coords.toYPix(coords.yEnd,false));g.stroke();if(tickLevel==0&&this.xValsQ){g.fillStyle="#0000ff";g.font="bold 12px Verdana";g.textAlign="center";g.fillText(xVal.toString(),xPix,this.hzNumsY);}}
if(this.skewQ)
return;g.lineWidth=1.5;g.strokeStyle="#ff0000";g.beginPath();g.moveTo(this.vtAxisX,coords.toYPix(coords.yStt,false));g.lineTo(this.vtAxisX,coords.toYPix(coords.yEnd,false));g.stroke();g.beginPath();g.fillStyle=g.strokeStyle;g.drawArrow(this.vtAxisX,coords.toYPix(coords.yEnd),15,2,20,10,Math.PI/2,10,false);g.stroke();g.fill();};Graph.prototype.drawHzLines=function(){var g=this.g;g.lineWidth=1;var coords=this.coords;var ticks=coords.getTicks(coords.yStt,coords.yEnd-coords.yStt,coords.height*coords.density);for(var i=0;i<ticks.length;i++){var tick=ticks[i];var yVal=tick[0];var tickLevel=tick[1];if(tickLevel==0){g.strokeStyle=this.style.major.clr;g.lineWidth=this.style.major.thk;}else{g.strokeStyle=this.style.minor.clr;g.lineWidth=this.style.minor.thk;}
var yPix=coords.toYPix(yVal,false);g.beginPath();g.moveTo(coords.toXPix(coords.xStt,false),yPix);g.lineTo(coords.toXPix(coords.xEnd,false),yPix);g.stroke();if(tickLevel==0&&this.yValsQ){g.fillStyle="#ff0000";g.font="bold 12px Verdana";g.textAlign=this.vtNumsAlign;g.fillText(yVal.toString(),this.vtNumsX,yPix+5);}}
if(this.skewQ)
return;g.lineWidth=2;g.strokeStyle="#0000ff";g.beginPath();g.moveTo(coords.toXPix(coords.xStt,false),this.hzAxisY);g.lineTo(coords.toXPix(coords.xEnd,false),this.hzAxisY);g.stroke();g.beginPath();g.fillStyle=g.strokeStyle;g.drawArrow(coords.toXPix(coords.xEnd,false),this.hzAxisY,15,2,20,10,0,10,false);g.stroke();g.fill();};CanvasRenderingContext2D.prototype.drawArrow=function(x0,y0,totLen,shaftHt,headLen,headHt,angle,sweep,invertQ){var g=this;var pts=[[0,0],[-headLen,-headHt/2],[-headLen+sweep,-shaftHt/2],[-totLen,-shaftHt/2],[-totLen,shaftHt/2],[-headLen+sweep,shaftHt/2],[-headLen,headHt/2],[0,0]];if(invertQ){pts.push([0,-headHt/2],[-totLen,-headHt/2],[-totLen,headHt/2],[0,headHt/2]);}
for(var i=0;i<pts.length;i++){var cosa=Math.cos(-angle);var sina=Math.sin(-angle);var xPos=pts[i][0]*cosa+pts[i][1]*sina;var yPos=pts[i][0]*sina-pts[i][1]*cosa;if(i==0){g.moveTo(x0+xPos,y0+yPos);}else{g.lineTo(x0+xPos,y0+yPos);}}};