Results 1 to 3 of 3

Thread: [RESOLVED] Javascript and Canvas - Oh the headache - Graphing

  1. #1

    Thread Starter
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    Resolved [RESOLVED] Javascript and Canvas - Oh the headache - Graphing

    Below is the code I have come up with so far.
    I know its bloated and big and there are probably already examples out there already. But I haven't made them, so I want to be able to make it...

    struggling though

    What I'm attempting to do is make a graph on a webpage using the canvas object. Ultimately it will be mysql>php>javascript>canvas to display graphs (line n box).

    Started out ok, this is the draft so far. Got the canvas, got a title, can gradient or not. got a box for the main graph bit, even got the dividers... probably.

    But when I stroke on the lines I can't seem to get 2 pixels to show, only 1 and 4. And even though the major indicators on the x axis are fewer than the minor, they stroke the same width and colour. Pretty sure I change the colour.

    Can someone please check whether I've messed it up, and where?

    Sorry for the bloatedness, I want to get a basic graph that is flexible later on...


    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
        <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
        <META HTTP-EQUIV="Expires" CONTENT="0">
        <meta name="robots" content="noindex, nofollow">
        <META NAME="AUTHOR" CONTENT="Vincent Buckner / VB Contracts">
        <META NAME="COPYRIGHT" CONTENT="&copy; 2014 Vincent Buckner">
    	<title>Drawing tests</title>
    </head>
    
    
    <body>
    
    Simple 2d graphics<br/>
    
    <canvas id="myGraph" width="500" height="400" style="border: 1px solid #000000; box-shadow: 3px 3px 6px #888888;"></canvas>
    
    </body>
    
    
    
    
    
    
    
    <script>
    
    var c = document.getElementById("myGraph");
    var ctx = c.getContext("2d");
    
    if (!c.getContext) {
      alert('Canvas doesn`t work...');
    }
    
    
    var loop;
    var grd;
    
    var cnvAreaX = c.width;
    var cnvAreaY = c.height;
    
    // Data
    var minX = 0;
    var minY = 0;
    var maxX = 10;
    var maxY = 12;
    
    var divMajX = 2;
    var divMinX = 1;
    var divMajY = 2;
    var divMinY = 1;
    
    var dataItems = 6;
    var blnFadeBack = false; // fade the background
    var blnUseDataItems = false; // set to true to use the data items along the bottom
    var blnUseShortForMin = false; //short line at min instead of a complete line
    var TheTitle = "A Title to Display"; // Title to show
    
    var titleMinY = 10;
    var titleMaxY = 50;
    var titleSpaceY = titleMinY+titleMaxY+4;
    
    var areaDivMinX;
    var areaDivMajX;
    
    
    // --------------------------
    //background
    if ( blnFadeBack ) {
        grd = ctx.createLinearGradient(0,cnvAreaY,0,0);
        grd.addColorStop(0,"rgb(150,150,250)");
        grd.addColorStop(1,"white");
    
        ctx.fillStyle = grd;
        ctx.fillRect(0,0,cnvAreaX,cnvAreaY);
    }
    
    
    // --------------------------
    // Title Area 
    // text is from bottom left (when placing)
    ctx.fillStyle = "#000000";
    ctx.strokeRect(10,10,cnvAreaX-20,titleMaxY-titleMinY); // (10, 480, 10) = 500 x 60 = (10, 40, 10)
    
    ctx.font = "Bold 24px Arial";
    grd = ctx.createLinearGradient(0,40,0,15);
    grd.addColorStop(0,"rgb(0,200,0)");
    grd.addColorStop(1,"rgb(0,0,200)");
    
    //ctx.fillStyle = "#000000";
    ctx.fillStyle = grd;
    ctx.fillText(TheTitle, 10+titleMinY, titleMaxY-10);
    
    // for testing title colours
    // ctx.fillRect(120,10,30,64);
    
    
    
    
    // --------------------------
    // Graph Area
        ctx.fillStyle = "#000000";
        ctx.strokeRect(10,titleSpaceY,cnvAreaX-20,cnvAreaY-titleSpaceY-10); // (10, 480, 10) = 500 x 340 = (4, 326, 10)
    
    // --------------------------
    // area / Lines
    var areaMinX = 10;
    var areaMaxX = cnvAreaX-10;
    var areaMinY = titleSpaceY;
    var areaMaxY = cnvAreaY-10;
    
    
    //    ctx.fillStyle = "rgb(00,200,000)";    
    //    ctx.moveTo(100,100);
    //    ctx.lineTo(200,200);
    //    ctx.stroke();
    //    ctx.strokeRect(100,100,200,200);
    
    if ( blnUseDataItems ) {
    
        areaDivMinX = (areaMaxX-areaMinX)/((maxX-minX)/dataItems); // no min with items
        areaDivMajX = (areaMaxX-areaMinX)/((maxX-minX)/dataItems);
    
    
    //  for (loop=1; loop<dataItems; loop++) {
    //    ctx.fillStyle = "rgb(200,200,200)";
    //    ctx.moveTo(0,0);
    //    ctx.lineTo(200,100);
    //    ctx.stroke();
    //  }
    
    //    ctx.fillStyle = "rgb(200,00,000)"; 
    //    ctx.moveTo(100,100);
    //    ctx.lineTo(200,200);
    
        ctx.fillText("Use items",10,80);
    
    
    } else {
    
    
        areaDivMinX = (areaMaxX-areaMinX)/((maxX-minX)/divMinX);
        areaDivMajX = (areaMaxX-areaMinX)/((maxX-minX)/divMajX);
    
        ctx.fillText(areaDivMinX,10,100);
        ctx.fillText(areaDivMajX,10,200);
       // ctx.fillText(divMinX,10,300);
    
    if (1==1) {
        ctx.fillStyle = "rgb(100,100,100)";
        for (loop=areaMinX; loop<areaMaxX; loop=loop+areaDivMinX) {
          ctx.moveTo(loop, areaMaxY);
          if ( blnUseShortForMin ) {
            ctx.lineTo(loop, areaMaxY-((areaMaxY-areaMinY)*.1));
          } else {
            ctx.lineTo(loop, areaMinY);
          }
          ctx.lineWidth=1;
          ctx.stroke();
        }
    }
    
    if (1==1) {
        ctx.fillStyle = "rgb(0,0,0)";
        for (loop=areaMinX; loop<areaMaxX; loop=loop+areaDivMajX) {
          ctx.moveTo(loop, areaMaxY);
          if ( blnUseShortForMin ) {
            ctx.lineTo(loop, areaMaxY-((areaMaxY-areaMinY)*.2));
          } else {
            ctx.lineTo(loop, areaMinY);
          }
          ctx.lineWidth=1;
          ctx.stroke();
        }
    }
        fillRect(100,100,300,300);
    
    }
    
    
    
    // Actual data points (series)
    //var aryDx = [ 1 , 2, 3, 4, 5, 6 ];
    //var aryDy = [ 10, 3, 5, 7, 2, 1 ];
    
    //for (loop = 0; loop< aryDx.length; loop++) {
    //	ctx.beginPath();
    // x, y, r, start deg, end deg, counter clockwise
    // degs 0-2 *Math.PI
    //	ctx.fillStyle = "#000000";
    //	ctx.arc(aryDx[loop] * 10, aryDy[loop]*10, 4, 0, 2*Math.PI);
    //	ctx.stroke();
    //}
    
    </script> 
    
    
    
    </html>
    Last edited by Ecniv; Aug 7th, 2014 at 05:06 PM. Reason: Title change

    BOFH Now, BOFH Past, Information on duplicates

    Feeling like a fly on the inside of a closed window (Thunk!)
    If I post a lot, it is because I am bored at work! ;D Or stuck...
    * Anything I post can be only my opinion. Advice etc is up to you to persue...

  2. #2

    Thread Starter
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    Re: Javascript and Canvas - Oh the headache - Graphing

    Found a useful link Here

    explains the double pixel size and why the colours weren't changing...

    BOFH Now, BOFH Past, Information on duplicates

    Feeling like a fly on the inside of a closed window (Thunk!)
    If I post a lot, it is because I am bored at work! ;D Or stuck...
    * Anything I post can be only my opinion. Advice etc is up to you to persue...

  3. #3
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: [RESOLVED] Javascript and Canvas - Oh the headache - Graphing

    Great link - thanks!

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

Posting Permissions

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



Click Here to Expand Forum to Full Width