Neste tutorial mostrarei como gerar um gráfico, com legenda em
javascript, simples e sem complicações, como mostra a figura abaixo.
Abra um editor de texto de sua preferência e no topo adicione o código CSS:
<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 Java script
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 += "<br />Cresimento Anual: "+obj.CrescimentoAnual + "%";
alvo.style.display = '';
}
se estamos mostrando as propriedades, temos que ocultar.
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.
[code]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
.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.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.CorBarra+';';
construtor += 'border:1px solid'+dados.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.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;
}[/code]
Agora o que falta para nosso programa funcionar, é criamos as empresas e chamar a função gráfico.
[code]// CRIAMOS UM ARRAY E DENTRO DE CADA INDICE ALOCAMOS
// UMA NOVA INSTANCIA DE EMPRESA , SIMPLES ASSIM! 
var dados =new Array()
dados[0] = empresa = new Empresa();
dados[0].CorBarra ="#CCFFCC";
dados[0].Nome = 'LINHA DE CÓDIGO';
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));[/code]
bom pessoal, até o próximo tutorial.
Conheça o Autor
Palavras-Chave
Gráfico em barra com javascript.doc
Este artigo foi útil para você?
Comente
Versão para Impressão
Enviar por E-mail
Adicionar em Favoritos
