A saída de dados de um sistema é seu objetivo principal. Veremos aqui como dar saída em dados gráficos em Flash, gerados a partir de XML que é resultado de um processamento Server Side PHP.

A proposta do pacote FusionCharts da empresa indiana InfoSoft é possibilitar a geração de gráficos visualmente atrativos e usando tecnologias do servidor tais como .NET, ASP, JSP, PHP ou qualquer outra em que se possa gerar um arquivo XML.

Este pacote não é gratuito, entretanto pode ser usado para testes (somente) sem custo. Leia com atenção a licença de uso. Há também a versão anterior (www.fusioncharts.com/free). Esta sim é free, mas desatualizada. A maneira de criar os gráficos é semelhante.

Para iniciar, faça o download do pacote no site (www.fusioncharts.com), para isso é preciso um pequeno cadastro. Faça o download do pacote “FusionCharts v3 Evaluation (11.8 MB)”. Ele contém a documentação e exemplos de todos os tipos de gráficos que podem ser criados.

Há várias maneiras de se obter um gráfico. Veremos aqui uma delas apenas (a que considero mais fácil e eficiente). Faremos um gráfico de pizza 3D.

1. Crie um diretório que possa ser acessado pela web, neste servidor deve estar rodando PHP.
2. Copie para este diretório os arquivo essenciais de um gráfico FusionCharts:

FusionCharts.js – Biblioteca do pacote FusionCharts. Copie este arquivo da pasta “JSClass” que está no pacote que foi baixado.

Pie3D.swf – Arquivo que vai ler o XML e resultar em um gráfico. Está na pasta “Charts” do pacote baixado.

3. Crie os arquivos:

Pie3D.html – Este é o arquivo que vai mostrar o gráfico. Ele contém um link para a classe JavaScript.

Pie3D_Data.php – Este arquivo vai responder a requisição feita por “Pie3D.html” com um documento XML gerado a partir do banco de dados.

4. Crie um banco de dados no seu servidor Mysql conforme a estrutura do deste arquivo.

Ambiente ajustado, podemos seguir. O arquivo “Pie3D.html” deve ter o seguinte conteúdo:

Note que é bastante simples, na linha 4 usamos o arquivo JS que é a biblioteca de funções. Instanciamos um novo objeto gráfico na linha 10 e em seguida passamos uma propriedade na linha 11 e na 12 executamos o método que vai escrever, dar saída no gráfico na tela dentro da div da linha 7.

O método “render” deve estar abaixo da div em que o gráfico deve ser exibido. Caso contrário o JavaScript vai tentar um “innerHTML”( FusionCharts.js, linha 142) num ID de um elemento que ainda não existe.

Na linha 11 dissemos que os dados de nosso gráfico estão no arquivo “Pie3D_Data.php”. Pois bem, a resposta deste arquivo deve ser um XML que vamos gerar a partir de nosso banco de dados. Confira o código-fonte do arquivo “Pie3D_Data.php” a seguir:

Neste caso estou usando o banco de dados “test” e a tabela “pesquisa”. Perceba que, na primeira linha, foi aberta uma tag “chart” e na linha 14 esta foi fechada. Executando este arquivo, deve resultar em um código fonte conforme a figura seguinte.

Quando é feita uma requisição ao arquivo “Pie3D_Data.php”, sua resposta é um XML. Pois bem, nosso primeiro gráfico está pronto!

Clicando sobre uma das fatias da pizza, ela se destaca das demais, e ainda pode-se rotacionar 360o o gráfico, vê-lo no formato 2D e imprimí-lo. Perceba que aqui não se precisou da biblioteca GD do PHP, a qual encontra-se indisponível em muitos hosts por demandar um processamento maior no servidor.

O que acha de incrementar a interatividade deste gráfico? Assista ao vídeo e confira!

O custo ainda é um fator determinante quando o quesito qualidade tem valor baixo. Espero que esta dica venha agregar valor aos seus projetos.