In this recipe, we'll create a configurable Graph class that draws the x and y axis with tick marks and values, and then we'll construct a method called drawEquation()
that allows us to graph f(x) functions. We'll instantiate a Graph object and then draw a sine wave, a parabolic equation, and a linear equation.
Follow these steps to create a Graph class that can draw an x and y axis with values, and also graph multiple f(x) equations:
Define the constructor for the
Graph
class that draws the x and y axis:function Graph(config){ // user defined properties this.canvas = document.getElementById(config.canvasId); this.minX = config.minX; this.minY = config.minY; this.maxX = config.maxX; this.maxY = config.maxY; this.unitsPerTick = config.unitsPerTick; // constants this.axisColor = "#aaa"; this.font = "8pt Calibri"; this.tickSize = 20; // relationships this.context = this.canvas.getContext("2d"); this...