var
        canvas = document.getElementById('stock-canvas'),
        width = canvas.width,
        height = canvas.height,
        ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, width, height);

    var
        maxHigh = data.map(x => x.high).reduce((x, y) => x > y ? x : y),
        minLow = data.map(x => x.low).reduce((x, y) => x < y ? x : y),
        unitHigh = height / (maxHigh - minLow),
        unitWidth = width / 30,
        bottom = unitHigh * (maxHigh - minLow);

    for (var i = 0; i < data.length; i++) {
        var path = new Path2D();
        var x = unitWidth * i + unitWidth / 2;

        if (data[i].open < data[i].close) {
            ctx.strokeStyle = '#00ff00';
            ctx.fillStyle = '#00ff00';
        } else {
            ctx.strokeStyle = '#ff0000';
            ctx.fillStyle = '#ff0000';
        }

        path.moveTo(x, bottom - (data[i].low - minLow) * unitHigh);
        path.lineTo(x, bottom - (data[i].high - minLow) * unitHigh);
        ctx.stroke(path);

        ctx.fillRect(x - unitWidth / 3, bottom - (Math.max(data[i].open, data[i].close) - minLow) * unitHigh, unitWidth / 3 * 2, Math.abs(data[i].open - data[i].close) * unitHigh);
}