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

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 "

A exibição deste artigo foi interrompida.

  Este é um post disponível para assinantes MVP

Este post também está disponível para assinantes da ClubeDelphi DIGITAL
ou para quem possui Créditos DevMedia.  Clique aqui para saber mais!

Saiba como acessar este post através de Créditos DevMedia:

Assinatura de Créditos – Aqui este post custa R$ 1,47
Com esse plano você compra R$ 180,00 em créditos e ganha, em média, 80% de desconto no preço do post.  
Assine agora

Plano ocasional - Aqui este post custa: R$ 1,96 (assinante) ou R$ 2,45 (não-assinante)
Você compra um mínimo de R$ 60,00 em créditos e ganha, em média, 50% de desconto no preço do post.  
Compre agora

Plano conveniência – Neste plano este post custa R$ 4,90
Neste plano você compra somente um post, pagando seu preço sem desconto.  
Compre agora