Olá! Friday, 29 de March de 2024.



Dicas CódigoFonte.net
Wednesday, 14 de November de 2007

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.



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 = ""+ obj.Nome +"
"; 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
'; construtor+= '
'; construtor+= ' '+calc_percent+'%'; } construtor += ''; 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

Comentários do artigo [Novo comentário]

GILBERTO OLIVEIRA - 22 de November de 2008 - 20:00
Não aparece o gráfico.
Que pode ter ocorrido?
HELLISMARTIN VIEIRA LOURENÇO - 22 de March de 2009 - 02:24
muito bom
juan francisco - 26 de February de 2012 - 14:27
Muito bom , colocei Aki e deu :D
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010