Small-ish graph scrip for a post of mine

Two classes with no dependencies.

by Oliver Caldwell

CSS

body {
	background-color: #CCCCCC;
}

canvas {
	background-color: #FFFFFF;
}

JavaScript

/**
 * Base graph class, handles containment of data points and the overarching
 * interface of all graph classes.
 *
 * @class
 * @param {Number} width
 * @param {Number} height
 * @param {*} [initialDataSource]
 */
function Graph(width, height, initialDataSource) {
	this.setDataSource(initialDataSource);
	this.initialiseCanvas(width, height);
}

/**
 * Initialises the canvas element and stores it's context object. It will also
 * set the initial width and height.
 *
 * @param {Number} width
 * @param {Number} height
 */
Graph.prototype.initialiseCanvas = function (width, height) {
	this._canvas = document.createElement('canvas');
	this._context = this._canvas.getContext('2d');
	this.setSize(width, height);
};

/**
 * Updates the current size of the graph.
 *
 * @param {Number} width
 * @param {Number} height
 */
Graph.prototype.setSize = function (width, height) {
	this._canvas.width = this._width = width;
	this._canvas.height = this._height = height;
};

/**
 * Fetches the actual canvas DOM node. This can be used to place the canvas
 * within your page.
 *
 * @return {HTMLElement}
 */
Graph.prototype.getCanvasElement = function () {
	return this._canvas;
};

/**
 * Updates the current data source. The values contained within are used to
 * render the actual graph.
 *
 * @param {*} dataSource
 */
Graph.prototype.setDataSource = function (dataSource) {
	this._dataSource = dataSource;
};

/**
 * Renders the current data source onto the canvas.
 */
Graph.prototype.renderGraph = function () {
	this.clearCanvasElement();
	this.drawDataSourceOntoCanvasElement();
};

/**
 * Clears the current canvas state.
 */
Graph.prototype.clearCanvasElement = function () {
	this._context.clearRect(0, 0, this._width, this._height);
};

/**
 * Draws the current data source onto the canvas.
 *
 * @abstract
 */
Graph.prototype.drawDataSourceOntoCanvasElement = function () {};





/**
 * Line graph, used for plotting a value over time.
 *
 * @class
 * @augments Graph
 */
function...