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.
