JavaScript
function Statcenter ($config) {
this._canvas = document.getElementById($config.id);
this._canvas.style.display = 'block';
this._canvas.width = 840;
this._canvas.height = 500;
this._context = this._canvas.getContext('2d');
this._fpmHistory = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
this._loop = this._loop.bind(this);
this._loop();
}
Statcenter.prototype = {
_loop: function () {
this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
for (var i = 0; i < this._fpmHistory.length; i++) {
var value = Math.floor(this._fpmHistory[i] );
this._context.fillStyle = "black";
this._context.fillRect((3*2) * i, 200 - 4 - value, 2*2, 2);
this._context.fillStyle = "grey";
this._context.fillRect((3*2) * i, 200 - 2 - value, 2*2, value);
}
var fpm = Math.floor(this._fpmHistory[this._fpmHistory.length-1]),
fph = Math.floor(fpm * 60),
fpd = Math.floor(fph * 24);
this._context.font = '26px helvetica';
this._context.fillStyle = '#222';
this._context.fillText('followers: ' + this.followers, 620, 25*1 + 10);
this._context.fillText('following: ' + this.following, 620, 25*2 + 10);
this._context.fillText('left: ' + (goal - this.followers), 620, 25*3 + 10);
this._context.fillText('fpm: ' + fpm, 620, 25*4 + 10);
this._context.fillText('fph: ' + fph, 620, 25*5 + 10);
this._context.fillText('fpd: ' + fpd, 620, 25*6 + 10);
this._context.fillText('eta: ' + Math.round((goal - followers) / fpm) + 'm', 620, 25*7 + 10);
this._drawStat('fpm', fpm);
webkitRequestAnimationFrame(this._loop);
},
pushFpm:...