JS Function Grapher

[Total: 0    Average: 0/5]

This example will graph math functions.

Head Code:

<style> 
..Border{ 
border-style:solid; 
border-width:1; 
position:absolute; 
border-color:111111; 
} 
..dot{ 
width:1; 
height:1; 
font:0; 
background-color:navy; 
position:absolute; 
} 
..AXE{ 
font:0; 
background-color:CCCCCC; 
position:absolute; 
} 
..X{ 
width:100%; 
height:1; 
} 
..Y{ 
width:1; 
height:100%; 
} 
</style> 

Init Code:

Draw();

Body Code:

<body onload="Draw()"><pre> 
-this function works fine with (from < 0) and (to > 0). 
-the Y function must be in terms of X (case-sensetive). 
-the function must be in JS syntax (i.e. sin(x) must be written as Math.sin(X)). 
-some cute functions to try : 
-- [100 / Math.tan(X/30)]. 
-- [50 * Math.sin(10*Math.cos(X/30))].</pre> 
<form name=Form> 
from <input name=Min size=2 value=-100 onkeypress="Draw()"> - 
to <input name=Max size=2 value=100 onkeypress="Draw()"> , 
steps <input name=Stp size=2 value=1 onkeypress="Draw()"><br> 
Y=<input name=Fnc siz=8 value=X onkeypress="Draw()"> 
</form> 
<span class=Border id=Cbrdr name=Cbrdr> 
<span id=Chart name=Chart></span> 
</span> 
<script> 
function Axes(){ 
Vars(); 
Chart.innerHTML="<span class='AXE X' style='top:"+AxeX+"'></span>"; 
Chart.innerHTML+="<span class='AXE Y' style='left:"+AxeY+"'></span>"; 
} 
function Vars(){ 
Min=Form.Min.value*1; 
Max=Form.Max.value*1; 
Stp=Form.Stp.value*1; 
Fnc=Form.Fnc.value; 
AxeX=Max; 
AxeY=Math.abs(Min); 
area=Max-Min; 
crctn=(Max-AxeY)/2; 
Chart.style.width=area+2; 
Chart.style.height=area+2; 
h=Chart.clientHeight ; 
w=Chart.clientWidth ; 
t=Chart.clientTop ; 
l=Chart.clientLeft ; 
} 
function Draw(){ 
Axes(); 
if(event.keyCode==13){ 
tmpStr=""; 
for(i=Min;i<=Max;i+=Stp){ 
X=i; 
try{ 
Y=eval(Fnc); 
}catch(e){}; 
x=(l+w-1)/2; 
y=(t+h)/2; 
tmpStr+="<span class=dot "+ 
"style='left:"+(x+X-(crctn))+";top:"+(y-Y+(crctn))+"'"+ 
">.</span>"; 
} 
Chart.innerHTML+=tmpStr; 
} 
} 
</script> 

Times Viewed: 15

Leave a Reply

Your email address will not be published. Required fields are marked *