Faz alguns dias, precisei criar um gerador de gráfico em barras, sem utilizar soluções como o Crystal Reports, Report Services, Google Chart entre tantas outra opções disponíveis no mercado.
A solução foi simples, e atendeu a demanda do projeto, que tinha uma limitada quantidade de recursos de máquina.
Abaixo veja a imagem de um gráfico básico gerado pela aplicação.
Neste protótipo não dei nenhum enfoque ao tratamento dos dados recebidos, o que ficará sob sua responsabilidade realizar. Também não me preocupei com o layout. Esta foi apenas uma prova de conceito.
No projeto final, acrescentei algumas rotinas para ajuste do tamanho do gráfico.Também, com o uso de XML, este gráfico é populado automaticamente após um clique em um botão para visualizar o gráfico.
Mas indo direto ao ponto, o gráfico consiste de basicamente uma tabela com 2 linhas 2 colunas chamada tblDesenho. Na segunda coluna, as duas linhas foram mescladas e dentro dela foi adicionado uma outra tabela chamada tblLegenda
Neste protótipo, foi associado ao evento do botão adicionar a seguinte rotina:
function adValor(altura,tipo,legenda)
{
//--------------------------------
//O trecho abaixo foi acrescentado para que se monte o gráfico de acordo com o tipo escolhido
//--------------------------------
tp = tipo;
ftrAjuste =2;
var largura;
switch (tipo)
{
case "1":
//Gráfico de barras
largura = 15
break;
case "2":
//Histograma
largura = 1;
break;
case "3":
//Gráfico de linha
largura =15;
break;
default:
largura = 10;
break;
}
//--------------------------------
//Colunas do gráfico.
//Este trecho busca a linha dois da tabela tblDesenho
//--------------------------------
var colunaGrafico = document.getElementById("linha2").insertCell(0);
//--------------------------------
//Cria um elemento do tipo imagem que irá compor a barra
//--------------------------------
var barra = document.createElement("img");
//--------------------------------
//Escolhe a imagem de fundo da barra, utiliza a alternância de imagens
//--------------------------------
if (tipo=='1')
{
barra.src="cor" + conta + ".gif";
}
else
{
barra.src = "cor1.gif";
}
//--------------------------------
//Define a altura das barras.
//--------------------------------
barra.height = altura * 1.8;
barra.width = largura ;
colunaGrafico.appendChild(barra);
//--------------------------------
//adiciona a imagem na célula criada
//--------------------------------
colunaGrafico.align= "center";
colunaGrafico.vAlign = "baseline";
if (tipo=='1')
{
//--------------------------------
//Montando a legenda lateral do gráfico
//Insere uma nova linha na tabela tblLegenda
//--------------------------------
var linhaLegenda = document.getElementById("tblLegenda").insertRow(0);
var colunaLegenda = linhaLegenda.insertCell(0);
//--------------------------------
//Insere uma nova célula na linha recêm criada
//Usa a mesma cor que foi utilizada na barra.
//--------------------------------
var barraLeg = document.createElement("img");
barraLeg.src="cor" + conta + ".gif";
barraLeg.height = 10;
barraLeg.width = 10;
colunaLegenda.appendChild(barraLeg);
//--------------------------------
//Acrescenta o texto da legenda
//--------------------------------
colunaLegenda.innerHTML += "<font size='2'> - " + legenda + "</font>";
}
//--------------------------------
//Parte superior da tabela- Valores que são inseridos no topo
//--------------------------------
var colunaValor = document.getElementById("linha1").insertCell(0);
colunaValor.align= "center";
colunaValor.vAlign = "middle";
colunaValor.innerHTML = "<font size='1'>" + altura + "</font>";
conta +=1;
if (conta>12)
{
conta=0;
}
}
Abaixo, é possível visualizar o protótipo em funcionamento
Tiago Larios
