Rui Carneiro, Rui Pereira, Tiago Orfão

Transcrição

1 Geração de Gráficos SVG através de PHP Rui Carneiro, Rui Pereira, Tiago Orfão Faculdade de Engenharia da Universidade do Porto, R. Dr. Roberto Frias, Porto. Resumo Serve o presente artigo para descrever o projecto final que foi desenvolvido no seguimentos do outros dois trabalhos sobre o mesmo tema: representação de gráficos em SVG com transformações XSLT. O objectivo deste trabalho foi construir uma API em PHP, para a geração de gráficos SVG, através de uma base de dados, usando para isso transformações XSLT. No relatório é feita uma introdução da descrição da API e elaborada uma demonstração da aplicação. Também são enumeradas várias aplicações que esta ferramenta poderá ter num panorama geral. Em seguida é explicado todo o processo de especificação da informação, assim como as fontes de conhecimento que a ferramenta consegue processar. Este documento ainda descreve toda a arquitectura e implementação da biblioteca usada para gerar gráficos em SVG. No final é elaborada a conclusão na qual se pretende representar as elações retiradas deste trabalho. 1 Introdução A aplicação SVG CHARTS API é uma ferramenta que pretende ser usada para a geração de gráficos, a partir de dados numa base de dados MySQL, utilizando, para isso, PHP. É um programa orientado para aplicações Web. No desenvolvimento desta ferramenta foram utilizadas as seguintes tecnologias e linguagens: XML - Extensible Markup Language XSLT - Extensible Stylesheet Language Transformations SVG - Scalable Vector Graphics SAXON9 - Open-Source XSLT and XQuery Processor PHP - Hypertext Preprocessor Para a apresentação desta nova API foi desenvolvida uma página simples de promoção, com o intuito de incentivar e facilitar o uso, no que toca à configuração de vários aspectos inerentes à construção de gráficos. A interface desenvolvida está dividida em três fases simples de preenchimento obrigatório. Na primeira fase são apresentados vários campos de texto necessários principalmente para a conexão à base de dados. Os dados pedidos são o endereço do servidor, nome da base de dados, tabela ou vista, utilizador e password. Aquando

2 2 Rui Carneiro, Rui Pereira, Tiago Orfão da submissão dos dados, caso estes estejam correctos, o utilizador passa à segunda fase. A segunda fase tem como objectivo configurar os dados da tabela escolhida anteriormente. Existem duas caixas de selecção: categoria e valores. Estas contêm os nomes dos campos da tabela, sendo impreterível que o utilizador preencha os dados da forma como idealiza o seu gráfico. É também necessário, por parte do utilizador, escolher um dos três tipos de gráficos disponíveis: linhas, barras ou circular. Após a escolha do tipo de gráfico, é apresentada a última fase, onde é mostrado o gráfico gerado. 2 Aplicações Umas das principais aplicações desta ferramenta é a capacidade de gerar gráficos dinamicamente sem ter a preocupação de mudar a imagem manualmente, bastando apenas alterar os valores na base de dados. Ou seja, esta aplicação é ideal para sistemas de informação que organizem conhecimento em base de dados, precisando de gráficos para representar informação que sofra frequentes alterações. De seguida, alguns exemplos: Produção de gráficos relativamente a bolsa de valores, em que existe uma alteração de informação num curto espaço de tempo. Evolução das temperaturas ao longo do tempo. Evolução de visitas num website ao longo do tempo. 3 Utilização do XML A nossa biblioteca recorre às potencialidades fornecidas pelos dialectos XML para conseguir atingir o seu objectivo de criação de gráficos. De acordo com o que foi desenvolvido no anterior trabalho, é possível gerar um ficheiro XML no formato SVG que represente um gráfico de linhas, barras ou circular, a partir dum ficheiro fonte, também XML, formatado especialmente para conter os dados que vão ser representados no gráfico. Uma vez que a nossa ambição para este projecto seria gerar gráficos a partir de valores contidos numa base de dados, não está associado ao nosso trabalho um ficheiro XML fonte que sirva de suporte à aplicação. De facto, o nosso código trata de gerar um ficheiro fonte, devidamente validado de acordo com a formatação definida pelo documento-tipo criado no trabalho anterior, ao qual irá ser aplicada a transformação XSL que gerará o ficheiro com a representação gráfica dos dados. Será importante referir também que a nossa aplicação contém dois ficheiros XSLT que serão invocados para realizar as transformações, barline.xsl e circle.xsl, mais um ficheiro que auxilia a transformação para gráfico circular, taylor.xsl. Assim, de acordo com o tipo de gráfico será invocado ou o primeiro ficheiro, para gráficos de barras e linhas, ou o segundo, para gráficos circulares.

3 Geração de Gráficos SVG através de PHP 3 A transformação é realizada pelo processador Saxon-B 9, na sua versão Java, que está incluído na aplicação.

4 4 Rui Carneiro, Rui Pereira, Tiago Orfão 4 Arquitectura De seguida, o diagrama de arquitectura física do projecto: Figura 1. Diagrama de Arquitectura Física do Projecto. Neste projecto, a maioria do processamento encontra-se da parte do servidor, principalmente devido à utilização de PHP e Java. Esta carga poderia ser atenuada caso o XSLT fosse processado pelo cliente com recurso a AJAX. Infelizmente, esta tecnologia não suporta ainda a última especificação XSLT que usamos nas nossas transformações. Do lado do servidor, as transformações são feitas recorrendo a SAXON-B 9, em Java. Esta opção, novamente, poderia ser evitada caso a última versão de PHP existente, suportasse XSLT 2.0. Outra característica da arquitectura do nosso projecto é a possibilidade de se ligar a qualquer base de dados MySQL (que permita ligações exteriores) e recolher os dados de uma determinada tabela ou vista desse servidor. 5 Detalhes de Implementação Sendo o objectivo deste projecto desenvolver uma API que possa ser utilizada por todos, optámos por dividir o código em duas classes principais: mysql - Contém todas as funções necessárias para a ligação à base de dados desejada. Possui ainda uma função que permite fazer querys e outra que permite desenhar os resultados dessa query em tabela. chart - É a responsavel pela geração do XML fonte. Foram implementadas funções para cada tipo de gráfico existente. Para isso, basta apenas criar devidamente um objecto do tipo chart e de seguida chamar a função desejada.

5 Geração de Gráficos SVG através de PHP 5 Existe ainda um ficheiro (xsl.php) responsável pela execução, através de PHP, do transformador SAXON-B 9 em Java. Esta página utiliza os ficheiros gerados previamente pela classe chart e os ficheiros XSLT desenvolvidos no trabalho anterior. Através de uma variável recebida por get, com o tipo do gráfico pretendido, é selecionado o ficheiro xslt e xml correspondente, e apresentado o retorno do transformador. Desta forma, logo após toda a informação da base de dados ser devidamente tratada, basta chamar esta página para se visualizar o gráfico gerado. 6 Avaliação dos Resultados De forma a garantir a robustez do nosso trabalho, foram feitos alguns testes. Logo à partida, ao gerar o XML fonte, este respeita o DTD especificado no trabalho anterior. A nível de transformações, a validação foi feita de modo a respeitar o dialecto SVG e a ter um aspecto agradável. Este segundo ponto pode variar bastante conforme o tipo de gráfico e dados escolhidos. Um bom exemplo de um resultado gerado pelo nosso projecto é o seguinte: Figura 2. Exemplo de um gráfico gerado.

6 6 Rui Carneiro, Rui Pereira, Tiago Orfão 7 Conclusão Apesar das dificuldades encontradas a nível de disponibilidade por parte dos elementos do grupo, pensamos ter atingido os objectivos definidos para este trabalho. A nossa biblioteca é capaz de gerar gráficos a partir duma base de dados MySQL, permitindo assim uma apresentação fácil de quaisquer valores numéricos em páginas web, de forma simples e eficaz. Em termos de desenvolvimento futuro, o mais importante seria melhorar os ficheiros de transformação XSL, de forma a tornar os gráficos mais versáteis, com uma disposição mais agradável em termos estéticos e capazes de conter maior informação sobre os dados, como por exemplo apresentar um título e legendas para os eixos. Seria também interessante recorrer a uma linguagem de script, como javascript, para tornar os gráficos mais dinâmicos em termos de interface com o utilizador. Não podemos terminar sem referir a esperança de que este pequeno trabalho possa, de futuro, servir como apoio ou incentivo a novos desenvolvimentos nesta área. Referências [W3C] W3C (World Wide Web Consortium). Scalable Vector Graphics (SVG) Abril [XSLT2] W3C (World Wide Web Consortium). XSL Transformations (XSLT) Version Abril [OXYG] SyncRO Soft Ltd. Oxygen XML Editor Abril [SAX] Michael H. Kay SAXON-B 9 Junho [PHP] The PHP Group. PHP: Hypertext Preprocessor Junho [TS1] Rui Carneiro, Rui Pereira, Tiago Orfão. Scalable Vector Graphics (SVG), Março [TS1] Rui Carneiro, Rui Pereira, Tiago Orfão. Transformação de dados estatísticos em gráficos SVG, Abril 2008.