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: 49.564 ]

Por: Fagner Fjas em 08/06/2010 | Blog: https://fjas.com.br


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

Lista de extensões preferidas para Joomla!

Migração de dados no Joomla

Desenvolvendo um componente de calendário dinâmico em PHP

Instalação do MediaWiki em uma Project web do SourceForge

Instalando a extensão json para o php-5.1 no CentOS/Red Hat

  
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

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts