Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1

Thread: Simple Graphing

  1. #1
    Senior Coder
    Join Date
    Apr 2011
    London, England
    Thanked 354 Times in 353 Posts

    Simple Graphing

    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">
        <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;
        <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";
        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' ) {
        <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" >
        <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>
    If someone know of a better/more efficient way to do this I would be interested to hear . Andy.
    Attached Thumbnails Attached Thumbnails Simple Graphing-graphing.png  
    Attached Images Attached Images  
    Last edited by AndrewGSW; 06-25-2011 at 03:56 PM. Reason: Correction to IF
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts