Login:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Quinta-feira, 20/03/2008 - 11:55 - Por Helton Eduardo Ritter
Seções relacionadas:

Gerando gráficos Flash em PHP com Fusion Charts

Antes de ler esta matéria, conheça o programa de treinamentos avançados do iMasters:

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:

    3. 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:

    4. 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.

Todos os artigos de Helton Eduardo Ritter

3 comentários publicados

  • 1. optimo post

    Quinta-feira, 20/03/2008, por Gnet User

    Os gráficos é a melhor maneira de apresentar um resultado visivelmente perceptível. O exemplo é óptimo é pena ser feio com uma ferramenta paga

    http://bibliaonline.iguga.com/?option=bible&part=audio&mmenuid=4&menuid=20 - aproveite para navegar na net e ouvir a Bíblia ao mesmo tempo

    Responder comentário

  • 2. O ficheiro RAR está danificado

    Sábado, 22/03/2008, por Pedro Teixeira

    O ficheiro RAR está danificado

    Responder comentário

  • 3. Variáveis...

    Quarta-feira, 26/03/2008, por Ricardo Fraga Lopes

    Muito bom o artigo. Fiz alguns gráficos com meus dados que ficaram ótimos.

    Gostaria, apenas, de saber do Helton se não há como passar valores para uma determinada variável na página que faz o SELECT e gera o XML?

    Por exemplo passar o número de um cliente ou de um mês para que ele possa exibir, em um mesmo arquivo, informações diversificadas?


    Obrigado pela atenção.

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Helton Eduardo Ritter é Técnico em informática pela Sociedade Educacional Três de Maio - SETREM e bacharelando em sistemas de informação pela mesma instituição onde também é funcionário atuando como webmaster desde 2006. Trabalha com web e PHP desde 2005 e tem interesse geral em softwares livres e linguagens de programação. Mantém um site portifólio, o www.sourcedreams.eti.br


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 59,90 no TI SHOP - Frete com 50% de desconto!
  • DVD Profissão: WebDesigner Curso exclusivo do autor Bruno Ávila, onde mostra como deve ser a formação e atuação do webdesigner no mercado profissional. Apenas R$ 39,50 no TI SHOP - Frete com 50% de desconto!
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 54,90 no TI SHOP - Frete com 50% de desconto!
  • CD-ROM DW + PHP + MySQL - Curso Avançado - 2ª Edição Curso avançado de interação Dreamweaver, PHP e MySQL, em CD-ROM, com mais de 80 tópicos, 50 aulas em vídeo e projeto final. Apenas R$ 59,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.