...

View Full Version : Simple Graphing



AndrewGSW
06-25-2011, 03:50 PM
I thought I would offer this simple graphing tool. It might be of interest and has potential to be enhanced. (These days this kind of graphing could be done with a canvas for those modern browsers that support it.)

You don't need to enter 'Math.' when using most maths functions but you do need to use the multiplication symbol '*', e.g. 'x*0.5'.

I've attached a screenshot and a small image to use.

In particular, I like they way I can overlay graphs on top of each other.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Andy's Graph</title>
<style type="text/css">
#con {
position: relative;
width: 600px; height: 600px;
border: 1px solid gray;
}
.marker {
position: absolute;
font-size: 9px;
}
#mTop {
left:50%; margin-left: -10px; margin-top: -12px;
}
#mRight {
left: 100%; top: 50%; margin-left: 3px;
}
#dot {
position: absolute; top: -10px;
width: 5px; height: 5px;
}
</style>

<script type="text/javascript">
var fns = [ "abs","cos","log","max","min","pow","random","round","sin","sqrt","tan","PI"];
function graphIt(iformula) {
var theFormula = document.getElementById(iformula).value, x, y,
oDot, frag = document.createDocumentFragment(),
theDot = document.getElementById('dot'), lenFns = fns.length, regex;
for ( x=0; x < lenFns; x++ ) {
regex = new RegExp("(" + fns[x] + ")","gi");
theFormula = theFormula.replace(regex,"Math.$1");
}
for ( x = -300; x < 300; x+=5) {
y = eval(theFormula);
if (y >= 300 || y <= -300) continue;
oDot = theDot.cloneNode(false);
oDot.style.top = (300 - y) + 'px';
oDot.style.left = (300 + x) + 'px';
oDot.className = "point";
frag.appendChild(oDot);
}
document.getElementById('con').appendChild(frag);
}
function clearPoints(id) {
var con = document.getElementById(id);
var kids = con.childNodes;
var lenKids = kids.length, i = lenKids;
while ( i-- ) {
if ( kids[i].className == 'point' ) {
con.removeChild(kids[i]);
}
}
}
</script>
</head>
<body>
<h1>Andy's Graph</h1>
<div id="con">
<div class="marker" id="mTop">300</div>
<div class="marker" id="mRight">300</div>
<img src="images/dot.jpg" id="dot" >
</div><br>
<input type="text" id="iFormula" name="iFormula" size="50" value="sin(PI*x/300)*300" >
<button id="bGraph" onclick="graphIt('iFormula')">Graph It</button>&nbsp;
<button id="bClear" onclick="clearPoints('con')">Clear Points</button>
</body>
</html>
If someone know of a better/more efficient way to do this I would be interested to hear :thumbsup:. Andy.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum