//Configuracoes var dashboard = document.getElementById('grafico_colunas'); var docHeight = document.documentElement.clientHeight- 20; // - 20 jsFiddle hack var docWidth = document.documentElement.clientWidth - 20; dashboard.height = docHeight; dashboard.width = docWidth; var ctx; var _y = docHeight-20;// jsfiddle hack // objeto para ser preenchido do tipo Grafico Barras var grafico = { columnHeight: 50, cor: '#000', gap: 5, dataProvider:null, colunas:function(valor){ ctx = dashboard.getContext('2d'); ctx.beginPath(); // posicionar no bottom ctx.rect(0,_y,valor,this.columnHeight); ctx.fillStyle=this.cor; ctx.fill(); // adicionar valor superior ctx.font = '12pt Calibri'; ctx.fillStyle="#000"; ctx.fillText(valor,valor+this.gap,_y+ this.columnHeight*0.6); ctx.closePath(); if(_y > dashboard.height) { _y = -columnHeight; ctx.clearRect(0,0,dashboard.width,dashboard.height); ctx.translate(0,0); ctx.save(); } }, init: function(){ for(var i=0;i<this.dataProvider.length;i++) { this.colunas(this.dataProvider[i],this.cor); _y-=(this.columnHeight+ this.gap);// incremento a posicao vertical } } } // usando um provedor de dados para preencher grafico.cor = "#75bc48"; grafico.dataProvider = [11,18,29,7,10,90,30,60,20,40,80,44,50,30,90,70,20,10,99]; grafico.columnHeight = 20; // seta largura da coluna grafico.init(); // inicializa
canvas { background:#f3f3f3; overflow:scroll !important; transform: translate3d(0,0,0); }
<canvas width="100" height="100" id="grafico_colunas"></canvas>