- Código Fonte
- Artigos e Tutoriais
- Vídeo Aulas
- Notícias
- Entrevistas
- Downloads
- Conteúdo MX
- Fórum
- Atividades
PUBLICIDADE
Este artigo tem nota
9,8
imprimir
indique
assine
retwiteAutor
Francke Peixoto
membro deste setembro de 2007
Tags
Compartilhe e guarde
PUBLICIDADE
Enquete
O buscador Bing, da Microsoft, conseguirá alcançar o Google?
segunda-feira, 29 de outubro de 2007
Gráfico em barra com javascript
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:
Após a inclusão do css, vamos Java script
Criaremos uma função chamada Empresa com a seguintes propriedades {Nome,AreamCrescimentoAnual,CorBarra},
A próxima função apenas mostra as propriedades de cada empresa.
se estamos mostrando as propriedades, temos que ocultar.
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.
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.
| Arquivo | Tipo | Tamanho | |
|---|---|---|---|
 Gráfico em barra com javascript.doc | Arquivo DOC | 69 Kb |  |
Este artigo foi útil para você?
Regras:
Os comentários seguem as seguintes regras:
Os comentários seguem as seguintes regras:
- Todos os comentários são enviados por membros cadastrados no site.
- A pontuação de comentários de conteúdo do próprio membro não serão computados.
- Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
- Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
- O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
- Há um limite de 10 comentários por dia para cada membro.
- Qualquer comentário após ter sido publicado poderá ser retirado através da opção (
denunciar)
Comente
© 2006-2009 R&W Informática Ltda. - Todos os direitos reservados.