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. " [...] continue lendo...