Como montar gráficos com dados dinâmicos em HTML5 via PHP e MySQL
Olá pessoal, tudo certo?
Hoje tive minha primeira experiência com o HTML 5 e posso dizer que fiquei realmente bastante satisfeito com o resultado de tudo isso.
Até então, em um sistema que desenvolví na empresa, os dados eram exibidos em forma de gráfico utilizando a biblioteca em PHP JPgraph, que por sinal muito boa, entretanto não possuia interatividade com o usuário e pecava um pouco na aparência, foi quando comecei a procurar por outras soluções, que localizei a biblioteca baseada no elemento Canvas, utilizando HTML 5, chamada RGraph. Lí a documentação, gostei do que ví, entretanto minha necessidade era trazer estes dados do banco, e com isto começa nosso post.
Utilizando gráfico em HTML5 com dados dinâmicos via PHP e MySQL!
Obs: Precisava de alguns dados para deixar nosso post ainda melhor, então perguntei 4 idades a meus queridos amigos seguidores e eles serão utilizados em nosso teste.
Abaixo a tabela, com os dados:
E agora, vamos começar o nosso processo para trazer estes dados ao gráfico.
Antes, vamos relembrar a estrutura de um documento HTML5:
1 2 3 4 5 6 7 8 | <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html> |
Como vemos, não mudou muita coisa, certo?
Vamos dividir o post em 3 partes, ok? Primeiramente chamando os arquivos que carregam os métodos do gráfico.
1 2 3 4 5 6 7 8 | <head>
<script src="libraries/RGraph.common.core.js" ></script>
<script src="libraries/RGraph.common.annotate.js" ></script>
<script src="libraries/RGraph.common.context.js" ></script>
<script src="libraries/RGraph.common.tooltips.js" ></script>
<script src="libraries/RGraph.common.resizing.js" ></script>
<script src="libraries/RGraph.bar.js" ></script>
</head> |
Não esqueça de colocar no diretório a pasta libraries com os scripts dentro.
Em seguida, vamos trazer do banco nossos dados utilizando o php:
1 2 3 4 5 6 7 8 9 10 11 | $myQuery = "SELECT twitter, idade FROM exemplo_2"; $consultar = mysql_query($myQuery); $i = 1; while($resultado = mysql_fetch_array($consultar)){ $idade[$i] = $resultado['idade']; $i++; } $dadosIdades = join(",", array($idade[1],$idade[2],$idade[3],$idade[4],$idade[5])); $dadosIdades = "[$dadosIdades]"; |
Agora vamos descrever todo este procedimento acima:
Primeiramente realizamos uma query normal e trazemos os dados de cada pessoa, incluindo-os nas posições de uma variável chamada idade.
Logo após, unimos todos estes dados e formamos um array só, já com as posições separadas por vírgula, e em seguida colocamos este array entre “[]“.
Feitos isso, será necessário trazer estes dados para o JavaScript, e agora?
Calma calma, não priemos cânico (Chapolin sempre, rs)
Utilizando PHP, vamos realizar esta tarefa:
1 2 3 4 5 6 7 8 | echo "<script>" . "\n"; echo "var dadosIdades = $dadosIdades" . "\n"; echo "var idadevilourenco = $idade[1];"; echo "var idadembrena = $idade[2];"; echo "var idadefausto = $idade[3];"; echo "var idadegenes = $idade[4];"; echo "var idadeandre = $idade[5];"; echo "</script>" . "\n"; |
Veja só, coloquei o meu array que estava em PHP na variável “dadosIdades” agora em JavaScript e cada idade de seus respectivos donos em uma variável diferente.
Ok, quase pronto, agora vamos criar nosso gráfico.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script> window.onload = function () { var meuGraficoIdades = new RGraph.Bar('meuCanvasGraficoIdades', dadosIdades); meuGraficoIdades.Set('chart.background.barcolor1', 'white'); meuGraficoIdades.Set('chart.background.barcolor2', 'white'); meuGraficoIdades.Set('chart.title', 'Exemplo Idades - www.vilourenco.com.br'); meuGraficoIdades.Set('chart.title.vpos', 0.6); meuGraficoIdades.Set('chart.labels', ['@vilourenco', '@monteirobrena', '@g0nc1n', '@webgenes', '@andredmolin']); meuGraficoIdades.Set('chart.tooltips', ['@vilourenco tem ' + idadevilourenco + ' anos', '@monteirobrena tem ' + idadembrena + ' anos', '@g0nc1n tem ' + idadefausto + ' anos', '@webgenes tem ' + idadegenes + ' anos', '@andredmolin tem ' + idadeandre + ' anos']); meuGraficoIdades.Set('chart.text.angle', 45); meuGraficoIdades.Set('chart.gutter', 35); meuGraficoIdades.Set('chart.shadow', true); meuGraficoIdades.Set('chart.shadow.blur', 5); meuGraficoIdades.Set('chart.shadow.color', '#aaa'); meuGraficoIdades.Set('chart.shadow.offsety', -3); meuGraficoIdades.Set('chart.colors', ['#00CED1']); meuGraficoIdades.Set('chart.key.position', 'gutter'); meuGraficoIdades.Set('chart.text.size', 10); meuGraficoIdades.Set('chart.text.font', 'Georgia'); meuGraficoIdades.Set('chart.text.angle', 0); meuGraficoIdades.Set('chart.grouping', 'stacked'); meuGraficoIdades.Set('chart.strokecolor', 'rgba(0,0,0,0)'); meuGraficoIdades.Draw(); } </script> |
Notem que no início, eu instancio minha variável meuGraficoIdade, que passa a herdar as propriedades da classe RGraph.Bar.
1 | var meuGraficoIdades = new RGraph.Bar('meuCanvasGraficoIdades', dadosIdades); |
O que eu fiz nesta linha?
Conforme dito, foi instanciada a variável, e em seguida eu passo como parâmetro o id do meu elemento Canvas (falaremos disto mais abaixo) onde será abrigado meu gráfico, e passo o array com os dados das idades, que foram transferidos do php para o javascript, lembra? (Explicado acima)
Ok, olhando com carinho, é possível perceber que você consegue customizar o gráfico inteiro.
Neste exemplo, utilizei apenas as propriedades:
chart.title – Para alterar o título do gráfico.
chart.labels – Para inserir o ‘nome’ das barras.
chart.tooltips – Para inserir a legenda de cada barra.
chart.colors – Alterar a cor do gráfico.
chart.text.angle – Alterar o ângulo do texto dos ‘nomes’ das barras.
Lembra-se que separei a idade de cada dono e inserí no JavaScript? Pois bem, eles servirão para informar a idade de cada um quando clicado sobre as barras, são os famosos tooltips!
Olhe aonde eu as utilizei:
1 | meuGraficoIdades.Set('chart.tooltips', ['@vilourenco tem ' + idadevilourenco + ' anos', '@monteirobrena tem ' + idadembrena + ' anos', '@g0nc1n tem ' + idadefausto + ' anos', '@webgenes tem ' + idadegenes + ' anos', '@andredmolin tem ' + idadeandre + ' anos']); |
Ok, agora, voltando a parte de html, vamos inserir o elemento canvas, atribuí-lo um id para que seja reconhecido pelo script JavaScript e que seja desenhado nosso gráfico.
1 2 3 | <div style="width: 450px;">
<canvas id="meuCanvasGraficoIdades" width="700" height="350">[No canvas support]</canvas>
</div> |
Relendo o script:
Este mesmo id do Canvas, foi informado na primeira linha do script responsável por montar o gráfico, ou seja, informando o local em que será desenhado.
E temos a frase “No canvas support”, que entrará em campo caso seu navegador ainda não esteja apto a utilizar HTML5.
Veja aqui o resultado.
Obs: Clique nas barras para ver os tooltips.
Bom pessoal, espero que tenham gostado do post, darei início a vários posts falando sobre esta maravilha que é o HTML 5 e ensinando sobre novos tipos de gráficos.
Lembrando que, eu de forma alguma estou contra ou desmerecendo o nosso querido e velho Flash, mas, como diria @vedovelli: “Tenho que estar atento a tecnologia que pagará minhas contas”.
E se você gostou, detestou, amou, adorou, deixeu seu feedback, eu prezo por um post que seja agradável de ler e entender, e sua ajuda contribuirá para essa constante melhora.
Um grande abraço e boa semana.
Curti bastante, preciso dar uma olhada com mais calma pra entender melhor, já que meu conhecimento em Javascript/PHP/ etc é bem básico, e pra HTML5 é só semântico.
Bem, ta aí o poder do HTML5, só acho uma pena ele não ser uma linguagem de marcação como o xhtml/html, mas sim uma que necessita de uma linguagem de programação (que precisa de alguem que saiba programar), que no caso, não sou eu.
Parabéns Vi! Abs!
Show de bola Viní, curti bastante o resultado. Ficou muito top o gráfico.
Abraços!
[quote]Bem, ta aí o poder do HTML5, só acho uma pena ele não ser uma linguagem de marcação como o xhtml/html[/quote]
HTML é uma linguagem de marcação, independente da sua versão.
Cara, parabéns muito bom mesmo. Aos poucos a #html5 vai se tornando mais simples para nós desenvolvedores e programadores, Parabéns cara, o blog é demais..
Hahaha! Detonei no gráfico!
Parabéns pelo post, Vinícius. Fico contando os dias para que o HTML5 se torne um padrão concluído e de fato, para simplificar nossa vida de desenvolvedores. Enquanto isso não acontece, o jpGraph também é uma boa opção para se gerar gráficos a partir de código PHP.
Ae garoto!!! Ótimo post, HTML 5 é o futuro mesmo. A questão é: será q a Adobe concorda???
Aeeee excelente post! Explicando tim tim por tim tim!!! Vou tentar fazer quando voltar para SP!! Abração!
Opa, muito obrigado Fausto!
Pode crer, também tô aguardando esse dia, e muito!
Abraço!
Valeu Sérgio!!
Com certeza, html5 veiu para ficar, e inovar!
Abs.
Fala Luiz!!
Muito obrigado!
Com certeza, html 5 é fantástico, acredito que pelo menos por enquanto a Adobe ainda torça o nariz um pouco para a nova tecnologia, coisa que no futuro pode servir um de complemento para o outro..
Abraço!
Ved!!
Muito obrigado cara, valeu mesmo!
Opa, você vai gostar quando for mecher, é realmente fantástico!!
Abraços!!
Showw!! Parabéns cara, fiz aqui e achei mtooo legal. Explicou mto bem, deu para entender numa boa. =D
Muito obrigado Jonas!
Fico feliz que tenha gostado cara!!
Abraços!
cara, adorei seu gráfico. como eu faço para colocar ele na horizontal: desde já agradeço pelo post
gostei do tutorial, mas so meio lerdo em tutoriais e não entendi quase nada se poder explicar que arquivos tenho que baixar e como salvo o nomes do arquivos, porque a unica coisa que eu entendi foi o banco de dados se possivel fazer mais detalhadamente.
Ex: salve com este nome, agora vamos para o script numero dois que ficara na mesma pasta.
gostei do resulatdo se possivel desponibiliza uma pasta zipada com todos arquivos.
Não é mais necessário disponibilizar os arquivos, fussei bastante e consegui fazer o script do grafico. Mas tenho uma duvida, o script que conversa com mysql e busca o valor das variaveis, salva o com que nome?o script php?
se possivel disponibiliza o arquivo php que puxa os dados do mysql.
Nem precisa mais, demoro tanto que deu tempo eu aprender mysql+php+html5 e você nem respondeu, valeu pela consideração com o post. (y)
poxa amigo não conseguir fazer da um erro na linha 5 no while. vc sabe me dizer o que deve ser?
mysql_fetch_array(): supplied argument is not a valid MySQL
Opa, respondí no seu e-mail Ramon!
Abraços.
Pingback: PHPBlogs» Blog Archive » Como montar gráficos com dados dinâmicos em HTML5 via PHP e MySQL
Boa Dia
Pessoal aqui não deu muito certo não sera que poriam me dar um help ?
Att
Cadmiel Jorge
Muito bom o seu post. Tem algum tempo que procuro uma biblioteca de gráficos que seja agradável ao usuário. Com certeza vou dar uma estudada e vou utilizar esta ferramenta.
W00t!
Lindo!
Acabei de decidir o que vou estudar nas férias.
Muito obrigado!
Amigo gostei do seu tutorial!Porem estou com uma duvida.Como faço pra puxar todos os dados de um banco de dados(não especificos como vc fez).E separar por data(jugando resultados a cada 30 dias)!
Fique com Deus!!!!