Artigo Clube Delphi Edição 25 - Geração de gráficos na web

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Saiba como gerar gráficos a partir de bancos de dados e mostrá-los como GIFs em aplicações web.

Esse artigo faz parte da revista Clube Delphi edição 25. Clique aqui para ler todos os artigos desta edição

 

Atenção: por essa edição ser muito antiga não há arquivo PDF para download. Os artigos dessa edição estão disponíveis somente através do formato HTML. 

 

Geração de gráficos na web

 

Como gerar gráficos a partir de bancos de dados e mostrá-los como GIFs em aplicações web

Se uma imagem vale mais que mil palavras, um gráfico vale mais que dezenas de relatórios. Em um ambiente web, seja numa intranet corporativa ou na própria internet, gráficos gerados dinamicamente, com acesso direto ao banco de dados, podem acrescentar imenso valor a uma aplicação.

Usuários gerenciais apreciam muito a visão rápida e abrangente proporcionada por gráficos de barras e de torta, sintetizando muitas informações de forma simples e visual, funcionando como importantes ferramentas de apoio à decisão.

Produção com WebBroker

Produzir um gráfico em uma aplicação WebBroker não é realmente uma tarefa difícil, mas envolve uma combinação criteriosa de várias técnicas simples. Vamos construir uma aplicação de exemplo para gerar dinamicamente uma consulta SQL e a imagem do gráfico correspondente, conforme opções definidas pelo usuário.

Podemos pensar nos gráficos como respostas visuais a questões analíticas objetivas: “Quais são as cidades que mais consomem este produto?”, “Quais são os itens do estoque com maior rotatividade?”, “Qual o volume de vendas de cada vendedor no ano passado?”. De outra forma, são representações gráficas de consultas SQL com agregação – aquelas que incluem uma ou mais funções de agregação, como SUM ou COUNT, e que exigem uma cláusula GROUP BY para determinar categorias. Veja um exemplo típico na Figura 1.

Figura 1.  Gráficos são normalmente gerados como resultados de consultas com agregação

Critérios para o gráfico

Criaremos um projeto completo de aplicação web, que produz gráficos usando as informações das tabelas Orders (Pedidos) e Employee (Empregados) da base de dados de exemplo DBDEMOS do Delphi.

Os gráficos vão responder à seguinte questão: “Qual foi o volume de vendas por vendedor em determinado ano?”. Para tornar mais interessante o resultado, além do critério “Ano”, acrescentaremos um outro filtro: “incluindo somente os vendedores que tiveram faturamento anual acima de determinado valor” (veja um exemplo na Figura 2).

Figura 2.  Exemplos de parâmetros para uma consulta de vendas anuais por vendedor

Formato personalizado

Quere­mos ainda que o formato do gráfico possa ser definido pelo usuário, que poderá escolher se quer os gráficos no estilo de barras, cilindros ou torta. Assim, demonstramos como usar um formulário não apenas para transmitir parâmetros para a consulta, mas também para definir as propriedades desejadas para o gráfico.

Figura 3. Exemplo de gráfico gerado no formato de torta

Processamento de parâmetros

Quase sempre as questões do usuário que dão origem aos gráficos trazem parâmetros para especificar exatamente as informações desejadas. Então, a primeira coisa a se fazer para se produzir um gráfico em uma aplicação web é processar um formulário HTML com os parâmetros necessários.

Diferentemente de uma consulta comum, que produz resultados textuais como uma tabela HTML, a resposta de um gráfico é dada em dois passos.

No primeiro, é retornada uma página HTML especialmente construída para abrigar a imagem do gráfico, de acordo com os parâmetros do usuário. Essa página deverá conter uma tag IMG que aponta como fonte da imagem uma nova consulta à aplicação web, em vez de um arquivo no servidor.

É aí que entra em ação o segundo passo da resposta, no qual é retornada a imagem do gráfico propriamente dita.

Página do gráfico

Iniciamos o projeto criando uma nova Web Server Application no Delphi. No editor de ações do TWebModule inserimos dois action items (que chamaremos simplesmente de "itens"): um chamado "ChartPage", com Default igual a True e PathInfo igual a "/chartpage", e outro chamado "ChartImage", com PathInfo igual a "/chartimage".

O item ChartPage será responsável pelo primeiro passo da resposta: produzir a página HTML para o gráfico. Para a geração da página, adicionamos um componente PageProducer, nomeado "ChartPageProducer", e o atribuímos à propriedade Producer do item ChartPage. Assim, toda vez que for requisitado o PathInfo "/chartpage" à aplicação, será automaticamente retornado o conteúdo produzido pelo componente ChartPageProducer. Veja os dois itens configurados na Figura 4.

Figura 4. Configuração dos itens para a aplicação de exemplo

Conteúdo HTML

Mas que conteúdo será gerado? Criamos um código HTML muito simples com algumas “tags transparentes” (como o pessoal da Borland costuma chamar), que serão substituídas no processamento do evento OnHTMLTag do ChartPageProducer.  Este código deverá ser colocado na propriedade HTMLDoc do objeto PageProducer.

O código completo da aplicação de exemplo, incluindo o código HTML com as tags transparentes, pode ser baixado a partir do site da ClubeDelphi – veja a referência ao final do artigo.

A primeira é a tag <#titulo>, que será substituída por um título conveniente para o gráfico, de acordo com os valores dos parâmetros fornecidos pelo usuário. Mas é a segunda tag, <#grafico>, a protagonista deste passo. Ela deve ser substituída por uma string semelhante a <img src="/cgi-bin/webchart.exe/chartimage?...">, acrescida dos parâmetros recebidos na requisição da página (Ano, ValorMin e Formato).

O que fazemos aqui é avisar ao navegador do usuário que chame novamente a aplicação web para retornar a imagem do gráfico naquela posição. Os parâmetros transmitidos ao item ChartPage precisam ser repassados para o item ChartImage, porque as duas chamadas à aplicação são completamente desconectadas, não havendo persistência de memória entre elas.

Teremos duas vantagens se fizermos com que a página de resposta contenha um novo formulário de consulta abaixo do gráfico com os valores dos campos definidos conforme o formulário anterior. A primeira vantagem é que junto ao gráfico haverá a explicação implícita de seu conteúdo, nos valores "

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?