Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Passing parameters to text fields and back again.

    I'm writing code that takes X and Y values from an array and puts them into a graph. Currently, the graph size defaults to the minimum and maximum values of the array. What I want to add is user inputs for the range of the graph after its been initially created. So what I want to do is pass the values from the minMax function to the text fields at the bottom to show the current dimensions of the graph, as well as be able to submit new values for the range.

    Code:
    <!DOCTYPE html>
    <html>
    <head><title>X Y Plot Data</title>
    <p>Click for coordinates</p>
    <script type = "text/javascript">
    function draw() {
      var pointsX = [101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125];
      var pointsY = [106,102,108,129,101,105,130,129,131,129,120,121,115,130,132,130,110,130,130,120,121,110,120,103,118];
      var num = pointsX.length;									// Set scale
      var limits = minMax(pointsX, pointsY, num);
      var range = [(limits[1] - limits[0]), (limits[3] - limits[2])];
      
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");      
    
      var width = canvas.width;
      var height = canvas.height;
    
      var scaleX = width / range[0];
      var scaleY = height / range[1];
    
      if (scaleX <= scaleY) {
        var scale = scaleX;
      }
      else {
        var scale = scaleY;
      }
      scale = Math.floor(scale);
    
      canvas.addEventListener('mousedown',function (evt) {
        getPosition(context,limits,scale);
      });
    
      createAxes(context,"rgb(205,201,201)",.5,scale,height,width,range);
      plotPoints(context,pointsX,pointsY,num,"rgb(100,100,100)",3,limits,scale,range);
    }
    
    function plotPoints(context,x,y,num,color,thick,limits,scale,range) {		// Plot function	
      context.lineWidth = thick;
      context.strokeStyle = color;
      context.beginPath(); 
    
      for (var i = 0; i < num; i++) {
        if (null === x[i+1]) {								// If at end of array, break loop
          return;
        }
        else {
          context.moveTo((x[i]-limits[0])*scale,(range[1]-y[i]+limits[2])*scale);		
          context.lineTo((x[i+1]-limits[0])*scale,(range[1]-y[i+1]+limits[2])*scale);		
        }
      }
      context.stroke();
    } 
    
    function createAxes(context,color,thick,scale,height,width,range) {
      context.lineWidth = thick;
      context.strokeStyle = color;
      context.beginPath(); 
    
      context.moveTo(0,range[1]*scale);				
      context.lineTo(range[0]*scale,range[1]*scale);					// X Axis
      context.moveTo(0,range[1]*scale);
      context.lineTo(0,0); 									// Y Axis
    
      for (var i = range[0]*scale; i >= 0; i--) {						//  Grid lines at X integers
        if (i % scale == 0) {
          context.moveTo(i,(range[1]*scale));
          context.lineTo(i,0);
        }
      }
    
      for (var i = range[1]*scale; i >= 0; i--) {						// Hash marks at Y integers
        if (i % scale == 0) {
          context.moveTo(0,i);
          context.lineTo(range[0]*scale,i);
        }
      }
      context.stroke();
    }
    
    function minMax(arrayX, arrayY, num) {						// Find max values						
      var minX = arrayX[0];
      var maxX = arrayX[0];
      var minY = arrayY[0];
      var maxY = arrayY[0];
    
      for (var i = 0; i < num; i++) {
        if (arrayX[i] < minX) {
          minX = arrayX[i];
        }
        if (arrayX[i] > maxX) {
          maxX = arrayX[i];
        }
        if (arrayY[i] < minY) {
          minY = arrayY[i];
        }
        if (arrayY[i] > maxY) {
          maxY = arrayY[i];
        }
      }
      return [minX, maxX, minY, maxY];
    }
    
    function getPosition(context,limits,scale)
    {					
      var x = event.x;
      var y = event.y;
    
      var canvas = document.getElementById("canvas");
    
      x = ((x - canvas.offsetLeft) / scale) + limits[0];		// Divide by scale
      y = ((limits[3]*scale) - (y - canvas.offsetTop)) / scale;		// (limits[3] * scale) - (y / scale)
    
      alert("X: " + x + " Y: " + y);
    }
    
    </script>
    </head>
    <body onload="draw();">
    <canvas id="canvas" width="600" height="600"></canvas>
    
    <p>Range of X values</p>
    <input type="text" value=limits[0] id=minX<p> To <input type="text" value=limits[1] id=maxX></p>
    <p>Range of Y values</p>
    <input type="text" value=limits[2] id=minY<p> To <input type="text" value=limits[3] id=maxY></p>
    <input type="submit" value="Submit">
    <input type="submit" value="Default">
    </body>
    </html>
    Thanks in advance!

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    136
    Thanks
    10
    Thanked 7 Times in 7 Posts
    Use Array.sort() to sort your arrays, then retrieve the values at their opposite ends for the min and max values. It makes for cleaner code, performs faster, and still enables you to retrieve the values dynamically (I suspect that the existing arrays are included exclusively for testing purposes).

    Do not use input controls to display min and max values, as the input control is intended for data input, and not for reporting on existing values. Instead, you might want to use the span control, as in:
    < div>< span class="label">X Range:< /span>< span id="Xmin">< /span>< span id="Xmax">< /span>< /div>
    < div>< span class="label">Y Range:< /span>< span id="Ymin">< /span>< span id="Ymax">< /span>< /div>

    Keep in mind that your span elements will not be displayed by default if they do not contain any values.

    To assign a value to a span, add to your javascript function:
    document.getElementById('Xmin').innerText = xValue; // where xValue is the variable that contains the value to be assigned


  •  

    Posting Permissions

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