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:

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.

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:

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:

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.

Notem que no início, eu instancio minha variável meuGraficoIdade, que passa a herdar as propriedades da classe RGraph.Bar.

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:

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.

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.