Line Chart With Input Values Display

INFORMATION & CODE

Line Chart with Input Values Display

What the Code Does

This code provides a web-based tool for plotting 2D coordinate data directly onto an HTML5 canvas. It consists of an HTML structure containing an interactive data input text area and a preview button, a CSS stylesheet that styles the user interface elements, and JavaScript logic that processes the input coordinates and dynamically renders a graphical chart.

How the Code Works

The application works by reading comma-separated X and Y coordinate pairs from the text area whenever the user clicks the "Preview" button. The JavaScript parses these values into respective arrays, calculates the minimum and maximum boundaries of the dataset to determine proper scaling, and translates the data points to fit a customized Cartesian coordinate system drawn on the canvas. It then visually plots the data by rendering lime-colored square markers for each coordinate, connecting them with line segments, and automatically generating proportional axis labels and grid ticks.

To use the code, save the HTML, CSS, and JavaScript segments into three separate files named respectively (e.g., index.html, styles.css, and scripts.js) within the same directory. Open the index.html file in any modern web browser. You will see a table interface containing a pre-filled list of X and Y coordinates; simply modify these numbers in the text area (using the format x,y on separate lines) and click the Preview button to instantly generate and update the corresponding line and scatter plot on the canvas.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Line Chart With Value Input</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <table style="position: absolute; top: 20px;left: calc(50% - 190px);background: #ccffff;width:347; border: 1px solid #000000; height: 186; margin: auto;">
	    <tr><td style="border-style: solid; border-width: 1px; font-family: "VT323", cursive; font-size: 22px; text-align: center; width: 125;">Data (x,y):</td>
	      <td rowspan="3" style="border-style: solid; border-width: 1px; width: 289px;">
		    <canvas id="myCanvas" width="300px" height="230px"></canvas>
	    </td></tr>
	    <tr><td style="width: 125; border-left-style: solid; border-left-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; text-align: center; height: 159px;">
		    <textarea id="txy" name="txtXY" style="width: 65px; height: 140px; background: #ffffdd" tabindex="1">
1,3
2,7
3,6
4,0
5,6
6,7.5
7,9
8,6
9,8
10,3</textarea></td></tr>
	    <tr><td style="text-align: center; border-left-style: solid; border-left-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; width: 125; height: 35px;">
		    <input name="btnPrev" type="button" value="Preview" id="prv" tabindex="2" onclick="plot()" /></td></tr>
      </table>
    <script src="scripts.js"></scripts>
  </body>
</html>

CSS


                      .table {
        position: absolute;
        top: 100px;
        left: calc(50% - 190px);
        background: #ccffff;
        max-width: 380px;
        border: 1px solid #000000;
        height: 244px;
        margin: -150px auto 150px auto;
		  }
      #prv {
        background: linear-gradient(#00bbff, #00bbff, #77eeff, #0077ff, #0077ff);
        border: 3px solid #00a;
        border-radius: 6px;
        color: #fff;
        font-weight: 900;
      }

JAVASCRIPT


                      var canvas = document.getElementById('myCanvas')
      var txy= document.getElementById('txy')
      //txy.focus()

      function plot(){
        x= new Array()
        y= new Array()
        var rData= txy.value
        row= rData.split("\n")
        for (var i in row){
          xy= row[i].split(",")
          x.push(xy[0])
          y.push(xy[1])
        }
        plotData(x,y, canvas)
        }
      function plotData(arrayX, arrayY, Canvas){
        var ctx = Canvas.getContext('2d'), canvW= Canvas.offsetWidth, canvH= Canvas.offsetHeight
        ctx.setTransform(1, 0, 0, 1, 0, 0)
        ctx.fillStyle="rgb(255,240,240)"
        ctx.fillRect(0,0,canvW,canvH)

        ctx.strokeStyle='tan'
        ctx.beginPath()
        ctx.moveTo(0.1*canvW, 0.05*canvH)
        ctx.lineTo(0.08*canvW, 0.08*canvH)
        ctx.moveTo(0.1*canvW, 0.05*canvH)
        ctx.lineTo(0.12*canvW, 0.08*canvH)
        ctx.moveTo(0.1*canvW, 0.05*canvH)
        ctx.lineTo(0.1*canvW, 0.9*canvH)
        ctx.lineTo(0.95*canvW, 0.9*canvH)
        ctx.lineTo(0.92*canvW, 0.88*canvH)
        ctx.moveTo(0.95*canvW, 0.9*canvH)
        ctx.lineTo(0.92*canvW, 0.92*canvH)
        ctx.stroke()
        ctx.translate(0.1*canvW, 0.9*canvH)
        ctx.scale(1,-1)
        ctx.stroke()

       var minX= Math.min.apply(null, arrayX), minY= Math.min.apply(null, arrayY)
       var maxX= Math.max.apply(null, arrayX), maxY= Math.max.apply(null, arrayY)    
       var wX=maxX-minX, wY=maxY-minY
       var gW=0.95*canvW-0.1*canvW, gH=0.9*canvH-0.05*canvH
       var facX=gW/wX, facY=gH/wY
    
       ctx.beginPath()
       ctx.fillStyle='lime'
       ctx.strokeStyle='lightbrown'
       ctx.lineWidth= 0.002*(canvW+canvH)
       var sqW=0.02*canvW, sqH=0.02*canvH
       var newX, newY
       for (var i in arrayX){
         newX= (arrayX[i]-minX)*facY
         newY= (arrayY[i]-minY)*facY
         ctx.fillRect(newX-sqW/2, newY-sqH/2, sqW, sqH)
    	 if (i==0)
           ctx.moveTo(newX,newY) 
    	 else
           ctx.lineTo(newX,newY)
       }
       ctx.stroke()
       
       ctx.scale(1,-1)
       ctx.fillStyle='navy'
       ctx.textBaseline= 'middle'
       ctx.textAlign= 'center'
       var fntSize=0.02*(canvW+canvH)
       ctx.font= fntSize+"pt serif"
       var txtB= '('+minX+','+minY+')'
       var txtBW=ctx.measureText(txtB).width
   	   if (txtBW>0.1*canvW) txtBW=0.1*canvW
         ctx.fillText(txtB, -txtBW/2, 0.05*gH, txtBW)
         ctx.beginPath()
         for (i=1;i<=5;i++){
    	   ctx.moveTo(i*gW/6, 0.02*canvH)
    	   ctx.lineTo(i*gW/6, -0.02*canvH)
           txtB= Math.round((i/6*wX+minX)*100)/100
           txtBW=ctx.measureText(txtB).width
           if (txtBW>0.06*canvW) txtBW=0.06*canvW
             ctx.fillText(txtB, i*gW/6, 0.06*canvH, txtBW)

     	  ctx.moveTo(0.02*canvW, -i*gH/6)
    	  ctx.lineTo(-0.02*canvW, -i*gH/6)
          txtB= Math.round((i/6*wY+minY)*100)/100
          txtBW= ctx.measureText(txtB).width
          if (txtBW>0.06*canvW) txtBW=0.06*canvW
            ctx.fillText(txtB, -0.06*canvW, -i*gH/6, txtBW)
        }
        ctx.strokeStyle='darkorange'
        ctx.stroke()
      }

MENU

INFORMATION & CODE