Graphing

by egon

HTML

<canvas id="view"></canvas>

CSS

#view {
    border: 1px solid #000;
    width: 700px;
    height: 500px;
    margin: 30px;
}

JavaScript

var view = document.getElementById("view"),
    ctx = view.getContext("2d");
view.width = 700;
view.height = 500;

ctx.fillStyle = "#000";
ctx.fillRect(40, 40, 200, 200);

function GraphWindow(canvas) {
    this.canvas = canvas;
    this.datasets = {};
    this.children = {};
    this.properties = {
        background: "#fff"
    };
}

function drawChildren(canvas, children, bounds){
    for (var childName in children) {
        var child = children[childName];
        child.draw(canvas, bounds);
    }
}

GraphWindow.prototype = {
    draw: function () {
        var canvas = this.canvas;
        var fullRect = new Rect(0, 0, 700, 500);
        canvas.fillStyle = this.properties.background;
        canvas.fillRect(fullRect.left, fullRect.top, fullRect.width, fullRect.height);
        drawChildren(canvas, this.children, fullRect);
    }
};

function Rect(left, top, right, bottom) {
    this.left = left;
    this.top = top;
    this.right = right;
    this.bottom = bottom;
}

Rect.prototype = {
    get width() { return this.right - this.left; },
    get height() { return this.bottom - this.top; },
    get topLeft() { return {x:this.left, y:this.top}},
    get topRight() { return {x:this.right, y:this.top} },
    get bottomLeft() { return {x:this.left, y:this.bottom} },
    get bottomRight() { return {x:this.right, y:this.bottom} },
    shrinkSides: function (r) {
        return new Rect(this.left + r.left, this.top + r.top, this.right - r.right, this.bottom - r.bottom);
    },
    growSides: function (r) {
        return new Rect(this.left - r.left, this.top - r.top, this.right + r.right, this.bottom + r.bottom);
    }
};

function drawRect(canvas, bounds){
    canvas.rect(bounds.left, bounds.top, bounds.width, bounds.height);
}

function Frame(window) {
    this.window = window;
    this.children = {};
    this.margin = new Rect(10, 10, 10, 10);
    this.properties = {
        border: {
            width: 0.5,
            color: "#f00"
        }
   ...