Gráficos em PHP Highcharts

Mostrarei como criar um gráfico gratuitamente usando PHP e Highcharts. Highcharts é uma ferramenta criada em Javascript, onde você determina os valores e coordenadas em arrays dentro do código e ele cria um gráfico simples e elegante com as informações desejadas.

[ Hits: 47.009 ]

Por: Fagner Fjas em 08/06/2010 | Blog: http://fjas.playnation.org


Início



Highcharts é uma ferramenta que pode ser usada gratuitamente, desde que não seja para fins comerciais. Desenvolvida em Javascript, tem a finalidade de gerar gráficos em páginas web, esse sistema oferece inúmeros tipos e modelos de gráficos disponíveis para a utilização.

A utilização do Highcharts não é muito complicada, será preciso apenas ordenar os valores em duas listas, dependendo do tipo de gráfico que será usado.

O pacote disponível na internet oferece cinco tipos diferentes de gráficos:
  • Gráfico em linhas
  • Gráfico em áreas
  • Colunas e barras
  • Gráficos em pizza
  • Combinações entre os tipos existentes.

Para cada um desses acima existem algumas opções diferentes de estilo, posições e quantidade de informações, ou seja, essa ferramenta lhe oferece muitas opções.

O download o Highcharts pode ser feito nesse link:
Nesse site está disponível também tutoriais sobre como montar gráficos com estilos diferentes.

Após o download, basta apenas descompactar os arquivos, de preferência na pasta www do seu servidor, já que iremos trabalhar com páginas web e php.

Ao acessar essa pasta pelo navegador, você terá uma lista com os tipos de gráficos disponíveis, exibindo informações fictícias para demonstrar a funcionalidade e aparência daquilo que foi gerado.

Detalhes que garantem o funcionamento

Se prestar atenção nos arquivos que compõem o pacote baixado, encontrará uma pasta com o nome "JS". Esse diretório é praticamente o motor que dá vida ao gráfico, ele contém os arquivos em javascript. Mas há outro arquivo muito importante que não vem no pacote e sem ele o Highcharts não funciona. No cabeçalho de qualquer arquivo da pasta "examples" encontramos as seguintes linhas:

<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->

A linha em observação faz referência a o arquivo "jquery.min.js" que está em um servidor do Google. Se tentarmos usar o Highcharts em uma rede onde o acesso a internet é restrito, como em escolas, redes lan sem conexão com internet ou em qualquer lugar onde o acesso é limitado apenas para as utilidades do trabalho, o gráfico não irá funcionar.

A maneira mais prática pra resolver essa situação é criar um arquivo jquery.min.js, dentro da pasta "JS". O primeiro passo é copiar a url que temos na linha em destaque no seu navegador:

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Dependendo do navegador, o conteúdo do arquivo será mostrado na tela ou aparecerá aquela opção pra download do arquivo. Se for a 1° caso, basta copiar todo o texto do navegador e colar num editor de texto, salva na pasta "JS" com o nome "jquery.min.js". Depois disso é só alterar a linha destacada para:

<script type="text/javascript" src="../js/jquery.min.js"></script>

    Próxima página

Páginas do artigo
   1. Início
   2. Organizando os dados
   3. Colocar as informações no gráfico
Outros artigos deste autor

Gedit - Um bom editor pra programar em PHP!

Leitura recomendada

Funções da categoria Miscelânea do PHP

Gerando gráficos com PHP e highcharts.com

O uso de templates em PHP

A simples classe Date Operations

Debian com Apache, PHP4, PHP5 e MySQL

  
Comentários
[1] Comentário enviado por removido em 08/06/2010 - 17:55h

Muito interessate. Pode ser usado com outras linguagens web ?

[2] Comentário enviado por lucasvegi em 08/06/2010 - 19:05h

Muito interessante. Por acaso estava precisando de algo equivalente a tecnologia que você apresentou e me caiu feito uma luva.

[3] Comentário enviado por fagnerfjas em 09/06/2010 - 09:21h

Respondendo ao Ilsahec:
Pode sim ser usado em qualquer outra linguagem, basta criar alguns arrays contendo os valores, e depois ordenar como foi explicado no artigo.

[4] Comentário enviado por Lisandro em 09/06/2010 - 09:27h

Parabéns pelo belo artigo!

[5] Comentário enviado por ottodutra em 30/07/2010 - 11:41h

Cara, ótimo artigo. Estas informações são importantíssimas para quem programa com ferramentas free. E nota-se que existem ótimos recusrosos free, é só pesquisar e as vezes contar com pessoas como você que divulgam estas ferramentas.

Valeu.

[6] Comentário enviado por fagnerfjas em 03/08/2010 - 02:52h

:) eu galera value mesmo pelos elogios, fico grato e até sem jeito mas isso me incentiva a escrever mais coisas no VOL!!!!

[7] Comentário enviado por f.rodrigues em 14/05/2012 - 10:31h

Bom dia

Meu nome é Fagner e sou iniciante em PHP, preciso fazer um grafico mas que busque as informações do banco,
Ex: Demontrativo de Mensal de valores - JAN - FEV, MAR... 100 / 200 / 400...

Esse exemplo puxa as informações do banco?

[8] Comentário enviado por fagnerfjas em 15/05/2012 - 10:46h

Sim, se você olhar na 2ª página do artigo, pode ver no cócigo há uma consulta no banco de dados pra pegar todas as informações necessária pra montar o gráfico,
mas quanto ao seu script você terá que refazer, pra pegar as informações relevantes ao seu sistema e organizar de acordo como pede o script do grafico.

mas esse artigo acho que cai como luva pra vc.

[9] Comentário enviado por nando_tecnologia em 17/09/2012 - 23:52h

Fagner estou tentando inserir um array utilizando o metodo que vc me repassou mas ele não reconhece. Alguma dica? Meu array está sendo exibido 'Fernando','Maria','João', mas mesmo assim quando passo para dentro do javascript não aparece o grafico.

Abraço,


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts