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.578 ]

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


Colocar as informações no gráfico



A escolha do gráfico deverá ser feita observando os tipos de informações que serão expressas, pois há vários modelos diferentes, e alguns desses têm peculiaridades que mostram de um modo diferente cada grupo de valor.

Um exemplo disso são os gráficos combinados, que apesar de terem uma estrutura bonita e formar um estilo interessante, não convém ser usado para exibir informações diretas e simples, com notas de alunos por bimestre, seria melhor usar em estruturas de dados mais complexas, como venda e rentabilidade relacionadas com datas e produtos. Não quero dizer que seja impossível de usar o gráfico que quiser da maneira que quiser, mas sim que dependendo da maneira que vá utilizá-lo deverá fazer algumas modificações no código em java script.

Segue abaixo um exemplo de como expressei o código, isso deve ser feito em um dos arquivos da pasta "exemples", lembrando que cada um dos arquivos faz referência a um tipo de gráfico diferente:

<?php
$recargas = new recargas; // CHAMA O OBJETO COM AS FUNÇÕES
?>
<script type="text/javascript">
$(document).ready(function() {
   var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         defaultSeriesType: 'bar'
      },
      title: {
         text: 'Ranking de Recargas por Operador'
      },
      subtitle: {
         text: 'OPERADORES: <? selectdb()  //FUNÇÃO QUE MOSTRA O NOME DOS OPERADORES ?>'
      },
      xAxis: {

         categories: [<? mostra_valor() //FUNÇÃO QUE RETORNA O VALOR DOS OPERADORES ?>],
         title: {
            text: null
         }

Esse código é apenas um exemplo de como fiz o uso do PHP para montar um gráfico com os dados que tinha registrado num banco de dados, as informações são inseridas dinamicamente com o php, a cada vez que os dados do banco são alterados, o gráfico muda automaticamente.

Para finalizar alguns screenshots de gráficos gerados pelo Highcharts:
Página anterior    

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

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

Migração de dados no Joomla

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

Gerando gráficos com PHP e highcharts.com

Debugando aplicações PHP usando phpdbg - parte 01

  
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