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
Queremos 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).
...
