Rafael Clares

Gráficos 3D Animados com PHP  + XML + Flash

Olá Galera, após ter falado um pouco sobre gráficos com o PHPlot, na sequência estou apresentando maravilhoso gráfico gerado com o FusionCharts, esse cara aí nos permite criar belíssimos gráficos em flash!

O FusionCharts é um produto comercial, eu já tinha utilizado em uma outra ocasião porém não me recordo de terem uma versão free, mas a alguns dias entrei no site da FC e meus olhos brilharam com o anúncio ”Free Version” !

Chega de conversa, eu me empolguei !  ; )

O FusionCharts permite gerar gráficos nas liguagens PHP, ASP, CSNET, VBNET e Javascript, em todos os casos você pode setar através dos métodos do FC os valores para o gráfico, porém existe a forma que acredito ser a mais simples e prática para o exemplo que é através de XML. Podemos criar um arquivo xml com os dados desejados e informar na aplicação o endereço do XML ou podemos apenas criar no próprio código uma variável com os dados do XML, a segunda opção seria ideal no caso de ler uma tabela do banco.

Exemplo do XML para um gráfico de barras:

clique para ampliar

E básicamente é apenas disso que precisamos enviar para a o arquivo PHP e Flash.

A linha 1 do XML contém o o atributo xAxisName que repesenta as colunas do gráfico e também o atributo yAxisName que representa as linhas do gráfico, observe no gráfico abaixo:
O XML pode receber mais parâmetros na primeira linha, como título do gráfico e outros, consulte os docs.

clique para ampliar

Agora que já vimos que precisamos de um XML e sabemos como deve ser sua estrutura, vamos para o PHP.

Primeiro exemplo
- Usando um arquivo XML – Precisamos dos seguintes diretórios e arquivos:

- diretório data e dentro dele o arquivo xml chamado dados.xml (como o do exemplo)
- diretório charts com os arquivos flash que recebem o XML e geram o gráfico
- diretório includes com os arquivos FusionCharts.php e fusioncharts.js

Importante saber que essa estrutura de arquivos e diretório são usadas especificamente neste exemplo devido eu ter adaptado de  forma que fosse mais fácil compreender e trabalhar, de outra forma, a estrutura utilizada nos exemplos que vem no pacote do Fusioncharts é um pouquinho diferente mas nada de complicado fique tranquilo, você vai olhar e entender de cara.  ;)

Então voltando ao assunto principal, com essa estrutura de diretórios e seus respectivos arquivos precisamos apenas do arquivo PHP com as linhas abaixo.

<script language=”javascript” src=“charts/fusioncharts.js”></script>
<?php
 #incluindo o arquivo FC
 include(“includes/FusionCharts.php“);
 #metodo que renderiza o grafico na tela
 echo renderChart(“charts/FCF_Column3D.swf“, “data/dados.xml“, “”, “graf“, 600, 300);
?>

Acredite se quiser, com essa linha javascript e mais as 2 linhas PHP nós geramos o gráfico da imagem acima!

Como não há praticamente nada no arquivo PHP irei explicar apenas a linha que nos importa, a última linha.

 echo renderChart(“charts/FCF_Column3D.swf“, “data/dados.xml“, “”, “graf“, 600, 300);

Após incluirmos o arquivo FusionCharts na primeira linha do PHP nós chamamos a função renderChart que recebe alguns parâmetros e são eles na ordem:

1 parâmetro – caminho para o arquivo flash que irá gerar o gráfico.
2 parâmetro – caminho do arquivo XML que contém os dados que queremos exibir.
3 parâmetro – vazio, seria utilizado se ao invés de um arquivo estivessemos passando  uma variável, neste caso o parâmetro vazio seria o segundo que contém o caminho do arquivo.
4 parâmetro - nome do gráfico, dê o nome que quiser.
5 e 6 parâmetros – respectivamente largura e altura do gráfico na tela, altere como quiser.

Simples não?

Segundo exemplo
- Usando/concatenando uma váriavel PHP para gerar o XML

<script language=”javascript” src=“charts/fusioncharts.js”></script>
<?php
$strXML = “<graph xAxisName=’Meses’ yAxisName=’Acessos’>“;
$strXML .= “<set name=’Jan’ value=’462′ color=’AFD8F8′ />“;
$strXML .= “<set name=’Fev’ value=’857′ color=’F6BD0F’ />“;
$strXML .= “<set name=’Mar’ value=’671′ color=’8BBA00′ />“;
$strXML .= “<set name=’Abr’ value=’494′ color=’FF8E46′/>“;
$strXML .= “<set name=’Mai’ value=’761′ color=’008E8E’/>“;
$strXML .= “<set name=’Jun’ value=’960′ color=’D64646′/>“;
$strXML .= “<set name=’Jul’ value=’629′ color=’8E468E’/>“;
$strXML .= “<set name=’Ago’ value=’622′ color=’588526′/>“;
$strXML .= “<set name=’Set’ value=’376′ color=’B3AA00′/>“;
$strXML .= “<set name=’Out’ value=’494′ color=’008ED6′/>“;
$strXML .= “<set name=’Nov’ value=’761′ color=’9D080D’/>“;
$strXML .= “<set name=’Dez’ value=’960′ color=’A186BE’/>“;
$strXML .=  “</graph>“;
include(“includes/FusionCharts.php“);
echo renderChart(“charts/FCF_Line.swf“, “”, $strXML, “chart1“, 600, 300);
?>

Notem que as mudanças são:

- Ao invés de utilizarmos um arquivo XML, nós criamos e concatenamos a variável strXML com os valores requeridos no arquivo XML, como podem ver a estrutura do XML não muda, temos o atributo name que se refere à coluna o value que corresponde à altura da barra no gráfico e color que possui a cor em hexadecimal da barra.

- Já na função renderChart, o  segundo parâmetro está vazio e o terceiro possui a variável strXML assim como comentei mais acima, relembrando…

O segundo parâmetro é vazio quando passamos à função renderChart uma váriável php e o terceiro parâmetro é vazio quando passamos um arquivo XML.

Notem também que o nome do arquivo flash informado no primeiro parâmetro mudou, isso pq o FC dispoem de diversos tipos de gráficos que utilizam a mesma estrutura XML, deem uma vasculhada nos exemplos contidos na documentação do FC para ver os tipos de gráficos disponíveis. O arquivo flash utilizado neste exemplo irá gerar exatamente o gráfico abaixo:

clique para ampliar

Quando os gráficos que são gerados eles são animados, daí o flash. O FC É perfeito e estamos falando apenas das funções básicas da versão free, se quiserem se impressionar ainda mais olhem a versão comercial do FC, é de brilhar os olhos! ;)

Links:

FusionCharts vs. free:  http://www.fusioncharts.com/free/Download.asp?gMenuItemId=5

Nosso exemplo em ação e mais tipos de gráficos com o mesmo XML:  Exemplo

Tá legal, foi fácil entender o exemplo mas vocês terão que estruturar os diretórios como mostrei para que esses códigos do exemplo possam funcionar, a dica que dou é …

Baixe o FC e explore sua estrutura de arquivos. Verá que você não precisa fazer exatamente como eu fiz, teste os exemplos contidos no pacote mesmo. Se quiser a que eu modifiquei apenas para testes do exemplo acima, deixe um comentário aí que te mando por email, não quero colocar o link aqui! Mas não deixe de baixar o pacote completo do FC.

Últimas considerações:

- Se pretende colocar seu exemplo em um servidor linux não esqueça que o Linux entende FusionCharts e fusioncharts como 2 diretórios diferentes, ou seja, digamos que ele é CaSe sEnSiTiVe.

- Não deixe de explorar os métodos utilizados pela classe PHP, nesse exemplo não trabalhamos com a classe em si e seus métodos como no exemplo do PHPlot !

- Depois me arrisco em um post para mostrar um exemplo utilizando BD. 

Abraços e até mais,

Rafael Clares