RStankov/gist:160533

## gistfile1.htm
<!DOCTYPE html>
<html>
<head>
	<title>Github - participation graph</title>
</head>
<body>
<script src="http://www.prototypejs.org/assets/2009/6/16/prototype.js" type="text/javascript"></script>
<script>
var GHPG = Class.create({
	initialize: function(data){
		if (!Object.isArray(data)) data = data.split("\n");

		this.total 	= this.graph(data[0]);
		this.own	= this.graph(data[1]);
	},
	graph: function(sequence){
		return sequence.split('').eachSlice(2, this.value.bind(this));
	},
	value: function(group){
		return this.charCodeValue(group[0]) * 64 + this.charCodeValue(group[1]);
	},
	charCodeValue: function(b){
		return 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!-'.indexOf(b);
	},
	draw: function(options){
		var canvas	= this.canvas(options || {}),
			context	= canvas.getContext("2d"),
			width	= canvas.getWidth() / this.total.length,
			height 	= canvas.getHeight(),
			max		= this.total.max(),
			scale  = max >= height ? parseFloat(height - 1) / max : 1;

		function render(value, index){
			value *= scale;
			context.fillRect(index * width, height - value, width - 1, value);
		}

		context.fillStyle = 'rgb(202, 202, 202)';
		this.total.each(render);

		context.fillStyle = 'rgb(51, 102, 153)';
		this.own.each(render);
	},
	canvas: function(options){
		if (Object.isString(options) || Object.isElement(options))
			return $(options);


		var canvas = new Element('canvas', { width: options.width || GHPG.CANVAS_WIDTH, height: options.height || GHPG.CANVAS_HEIGHT });

		($(options.parent) || document.body).appendChild(canvas);
		return canvas;
	}
});
GHPG.CANVAS_WIDTH  = 416;
GHPG.CANVAS_HEIGHT = 20;

var g = new GHPG([
'AhAYAkAVADAOAIAPAJAEAPAHAPAcA6BgBhBBBHBBA2AOAwAbAdAvBKBHA6AaAuA6AfAqAnArAmAbASAUAfAmA-BRAlAdAnA8AwA3AfAk',
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
]);
g.draw();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Github - participation graph</title>
	</head>
	<body>
	<script src="http://www.prototypejs.org/assets/2009/6/16/prototype.js" type="text/javascript"></script>
	<script>
	var GHPG = Class.create({
	initialize: function(data){
	if (!Object.isArray(data)) data = data.split("\n");

	this.total = this.graph(data[0]);
	this.own = this.graph(data[1]);
	},
	graph: function(sequence){
	return sequence.split('').eachSlice(2, this.value.bind(this));
	},
	value: function(group){
	return this.charCodeValue(group[0]) * 64 + this.charCodeValue(group[1]);
	},
	charCodeValue: function(b){
	return 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!-'.indexOf(b);
	},
	draw: function(options){
	var canvas = this.canvas(options \|\| {}),
	context = canvas.getContext("2d"),
	width = canvas.getWidth() / this.total.length,
	height = canvas.getHeight(),
	max = this.total.max(),
	scale = max >= height ? parseFloat(height - 1) / max : 1;

	function render(value, index){
	value *= scale;
	context.fillRect(index * width, height - value, width - 1, value);
	}

	context.fillStyle = 'rgb(202, 202, 202)';
	this.total.each(render);

	context.fillStyle = 'rgb(51, 102, 153)';
	this.own.each(render);
	},
	canvas: function(options){
	if (Object.isString(options) \|\| Object.isElement(options))
	return $(options);


	var canvas = new Element('canvas', { width: options.width \|\| GHPG.CANVAS_WIDTH, height: options.height \|\| GHPG.CANVAS_HEIGHT });

	($(options.parent) \|\| document.body).appendChild(canvas);
	return canvas;
	}
	});
	GHPG.CANVAS_WIDTH = 416;
	GHPG.CANVAS_HEIGHT = 20;

	var g = new GHPG([
	'AhAYAkAVADAOAIAPAJAEAPAHAPAcA6BgBhBBBHBBA2AOAwAbAdAvBKBHA6AaAuA6AfAqAnArAmAbASAUAfAmA-BRAlAdAnA8AwA3AfAk',
	'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
	]);
	g.draw();
	</script>
	</body>
	</html>