Gráfico em barra com javascript.

Neste artigo mostrarei como gerar um gráfico, com legenda em javascript, simples e sem complicações.

Abra um editor de texto de sua preferência e no topo adicione o CSS abaixo.

<style type="text/css">

#tbGrafico{
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:10px; 
color:#000000; 
 }
.cssLabel{
text-align:left;
opacity:0.70;
filter: alpha(opacity=70); 
width:200px;
position:absolute;
z-index:9900px;
margin-top:20px;
margin-left:0px;
padding:4px;
font-family:Verdana; 
color:#000;
font-size:11px;
}
</style>

Após a inclusão do css, vamos JavaScript

Criaremos uma função chamada Empresa com a seguintes propriedades {Nome,AreamCrescimentoAnual,CorBarra},

function Empresa()
{ // SERÁ USADA PARA CADASTRAR AS EMPRESAS
this.Nome;
this.Area;
this.CrescimentoAnual;
this.CorBarra;
}

A próxima função apenas mostra as propriedades de cada empresa.

function ExibirLabel(obj,Id)
{// ADICIONAMOS AO DIV LABELGRAFICO O CONTEUDO DE CADA OJETO 
// EMPRESA PASSADO POR ELE
 var alvo = document.getElementById("LabelGrafico"+Id);
 alvo.innerHTML  = "";
 alvo.innerHTML  = "<b>"+ obj.Nome +"</b><hr>";
 alvo.innerHTML += "Area de atuação: "+obj.Area;
 alvo.innerHTML += "
Cresimento Anual: "+obj.CrescimentoAnual + "%";
 alvo.style.display = '';
}

se estamos mostrando as propriedades, temos que ocultar J

function OcultarLabel(Id)
{// SIMPLESMENTE ESTAMOS OCULTANDO O ID CORRENTE.
var alvo = document.getElementById("LabelGrafico"+Id);
alvo.style.display = 'none';
}

Agora vamos ao coração do programa, a função GRAFICOS.

function Graficos(dados){
var  Abarra = 19;   // altura da barra 
var  Lbarra = 0;  // largura da barra
var  calc_largura = 0;  // calculo da largura da barra
var  calc_percent = 0;  // calculo do percent de valores
var  construtor = "";   // responsavel por montar todo o grafico
var  total = 0;         // contabilizador de valores 
var  i;
//AQUI ESTAMOS SOMANDO O CRESIMENTO ANUAL 
     // DE CADA EMPRESA
for (i = 0; i <dados.length;i++) {
 total+=parseInt(dados[i].CrescimentoAnual);
}

Lbarra = total; 
//NOSSA CONSUTRUÇÃO COMEÇA AQUI!
construtor = '<table id="tbGrafico" border="0" cellspacing="2" cellpadding="0">'
for (i=0;i<dados.length;i++){
//  CALCULO PARA PERCENTE DE CADA EMPRESA.
calc_percent = Math.round(dados[i].CrescimentoAnual*100/total);
calc_largura = Math.round(Lbarra*(calc_percent/100));
construtor  += '<tr><td><div id="LabelGrafico'+i+'" class="csslabel" ';
construtor+= 'style="display:none;background-color:'+dados[i].CorBarra+';';
construtor+= 'border:1px solid'+dados[i].CorBarra+';"></div>';
construtor+= '<div style="width:'+((calc_largura*1.9))+'px; height:'+Abarra+'px; ';
     // ESTAMOS AQUI AGREGANDO A COR PARA A BARRA DA EMPRESA.
construtor+= 'background-color:'+dados[i].CorBarra+';" ';
// AQUI ENTRA OS EVENTOS.
construtor+= 'onmouseover="ExibirLabel(dados['+i+'],'+i+');" ';
construtor+= 'onmouseout="OcultarLabel('+i+');" ></div> ';
construtor+= '</td><td> '+calc_percent+'%</td></tr>';
}
construtor  += '</table>';
return construtor;
}

Agora o que falta para nosso programa funcionar, é criamos as empresas e chamar a função gráfico.

// CRIAMOS UM ARRAY E DENTRO DE CADA INDICE ALOCAMOS
// UMA NOVA INSTANCIA DE EMPRESA , SIMPLES ASSIM!  J
var dados =new Array()
dados[0] = empresa = new Empresa();
dados[0].CorBarra ="#CCFFCC";
dados[0].Nome = 'CODIGO FONTE';
dados[0].CrescimentoAnual = 93.37;
dados[0].Area = 'TI';

dados[1] = empresa = new Empresa();
dados[1].CorBarra ="#CCFFFF";
dados[1].Nome = 'PIRAQUE';
dados[1].CrescimentoAnual = 54.94;
dados[1].Area = 'COMERCIO';

dados[2] = empresa = new Empresa();
dados[2].CorBarra ="#FFCC99";
dados[2].Nome = 'JEANS TK';
dados[2].CrescimentoAnual = 78.01;
dados[2].Area = 'TEXTIL';
// AGORA SÓ PASSAR ESSE ARRAY PARA O GRAFICOS e PRONTO RESULTADO NA HORA!  
document.write(Graficos(dados));

salve em uma página html e pronto! ;-)

bom pessoal, até o próximo artigo!

[]´s

Enviar um Artigo