Test1

by kb36472

JavaScript

var chartCount = 0;
class chart {
	constructor(gnx, gx, gny, gy){
  	this.canvas = document.createElement("CANVAS");
    document.body.appendChild(this.canvas); 
    this.canvas.width = 400;
    this.canvas.height = 400;
    this.canvas.style = "border:1px solid #000000;";
    this.ctx = this.canvas.getContext("2d");
    this.id = "htmlCanvasGraph#" + chartCount; chartCount++;
    this.gnx = gnx;
    this.gx = gx;
    this.gny = gny;
    this.gy = gy;
    this.ry = this.canvas.height/(this.gny + this.gy);
    this.rx = this.canvas.width/(this.gnx + this.gx);
    this.outline();
  }
  cx(x){ //convert a graph value to a canvas value
  	return (x+this.gnx)*this.rx;
  }
   cy(y){ //convert a graph value to a canvas value
  	return this.canvas.height - (y+this.gny)*this.ry;
  }
  outline(){ //creates the axis and graph lines
    this.drawline(0-this.gnx,this.gx,0,0,3, "#000000");//BLACK
    this.drawline(0,0,0-this.gny,this.gy,3, "#000000");
    var i = 0;
    while(i<this.gx){ //quadrants 1 and 4
     	i += 10;
      this.drawline(i,i,this.gy,-1*this.gny,1, "#808080"); //GREY 
    } // FOR SOME REASON EVERY SINGLE LINE IS THAT ^ COLOR
  } //ALSO IF YOU LOOK CLOSELY OR CHANGE IT TO BLACK YOU CAN SEE THE  LINES SLIGHTLY FADE OUT AS MOVEING LEFT TO RIGHT, NO IDEA WHY
  drawline(x1,x2,y1,y2,w,c){
    this.ctx.lineWidth = w;
    this.ctx.strokeStyle = c;
  	this.ctx.moveTo(this.cx(x1), this.cy(y1));
    this.ctx.lineTo(this.cx(x2), this.cy(y2));
    this.ctx.stroke();
  }
}
const graph1 = new chart(100,100,100,100)