graphing

graph

function Graph(config){
    this.canvas = config.canvas;
    this.minX = config.minX;
    this.minY = config.minY;
    this.maxX = config.maxX;
    this.maxY = config.maxY;
 
    this.context = this.canvas.getContext("2d");
    this.centerY = Math.abs(this.minY / (this.maxY - this.minY)) * this.canvas.height;
    this.centerX = Math.abs(this.minX / (this.maxX - this.minX)) * this.canvas.width;
    this.iteration = 0.1;
    this.numXTicks = 10;
    this.numYTicks = 10;
    this.xTickHeight = 20;
    this.yTickWidth = 20;
    this.scaleX = this.canvas.width / (this.maxX - this.minX);
    this.scaleY = this.canvas.height / (this.maxY - this.minY);
    this.axisColor = "#aaa";
 
    // draw x y axis and tick marks
    this.drawXAxis();
    this.drawYAxis();
    this.drawXAxisTicks();
    this.drawYAxisTicks();
}
 
Graph.prototype.drawXAxis = function(){
    var context = this.context;
    context.beginPath();
    context.moveTo(0, this.centerY);
    context.lineTo(this.canvas.width, this.centerY);
    context.strokeStyle = this.axisColor;
    context.lineWidth = 2;
    context.stroke();
};
 
Graph.prototype.drawYAxis = function(){
    var context = this.context;
    context.beginPath();
    context.moveTo(this.centerX, 0);
    context.lineTo(this.centerX, this.canvas.height);
    context.strokeStyle = this.axisColor;
    context.lineWidth = 2;
    context.stroke();
};
 
Graph.prototype.drawXAxisTicks = function(){
    var context = this.context;
    var xInterval = this.canvas.width / this.numXTicks;
    for (var n = xInterval; n < this.canvas.width; n += xInterval) {
        context.beginPath();
        context.moveTo(n, this.centerY - this.xTickHeight / 2);
        context.lineTo(n, this.centerY + this.xTickHeight / 2);
        context.strokeStyle = this.axisColor;
        context.lineWidth = 2;
        context.stroke();
    }
};
 
Graph.prototype.drawYAxisTicks = function(){
    var context = this.context;
    var yInterval = this.canvas.height / this.numYTicks;
    for (var n = yInterval; n < this.canvas.height; n += yInterval) {
        context.beginPath();
        context.moveTo(this.centerX - this.yTickWidth / 2, n);
        context.lineTo(this.centerX + this.yTickWidth / 2, n);
        context.strokeStyle = this.axisColor;
        context.lineWidth = 2;
        context.stroke();
    }
};
 
Graph.prototype.drawEquation = function(equation, color, thickness){
    var canvas = this.canvas;
    var context = this.context;
 
    context.save();
    this.transformContext();
 
    context.beginPath();
    context.moveTo(this.minX, equation(this.minX));
 
    for (var x = this.minX + this.iteration; x <= this.maxX; x += this.iteration) {
        context.lineTo(x, equation(x));
    }
 
    context.restore();
    context.lineJoin = "round";
    context.lineWidth = thickness;
    context.strokeStyle = color;
    context.stroke();
 
};
 
Graph.prototype.transformContext = function(){
    var canvas = this.canvas;
    var context = this.context;
 
    // move context to center of canvas
    this.context.translate(this.centerX, this.centerY);
 
    // stretch grid to fit the canvas window, and 
    // invert the y scale so that that increments
    // as you move upwards
    context.scale(this.scaleX, -this.scaleY);
};
 
go = function(){
    var canvas = document.getElementById("c");
    canvas.width = 600;
    canvas.height = 600;
    
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,600,600);
    
    var myGraph = new Graph({
        canvas: canvas,
        minX: -10,
        minY: -100,
        maxX: 10,
        maxY: 100
    });
    
    myGraph.drawEquation(function(x){
        return 27 * Math.sin(x);
    }, "green", 2);
 
    myGraph.drawEquation(function(x){
        return Math.pow(x, 5);
    }, "blue", 2);
 
    myGraph.drawEquation(function(x){
        return 7 * x;
    }, "red", 2);
};

go();