Criar um PieChart com PHP e jQuery Raphael.js

Muitas vezes nos encontramos tendo para implementar os aplicadores mini-mostra a extração de dados retirados do banco de dados, geralmente para fins estatísticos, talvez porque o marketing precisa deles para sua própria pesquisa de mercado, outras vezes para obter feedback dos clientes do que um produto, às vezes, para mostrar os resultados de uma pesquisa.

Usando um gráfico lhe permite ter um olhar que imediatamente nos permite interpretar os dados antes de lê-los em forma tabular.
É geralmente é uma característica muito apreciada pelos clientes e faz com que seja muito menos chato que longa seqüência de dados para analisar.

Criar gráficos nunca foi tão difícil, mas algumas soluções são melhores que outros, vemos a criar algo rápido, sólido e agradável aos olhos.

A solução

A combinação que propomos é baseado em PHP e MySQL, com uma dose de SVG (Scalable Vector Graphics) e jQuery.
Antes de explicar a lógica com a qual passamos deixe-me apresentar a biblioteca javascript para svg, que nos permitirá alcançar resultados surpreendentes: Raphael.js

Raphael.js e gRaphael

Algum tempo atrás, navegando e jogando com jQuery eu me perguntei se havia uma solução para desenhar uma crossbrowser lona que pode ser facilmente integrado com o nosso quadro amado. Após uma breve pesquisa me aconteceu aqui .

Raphael.js é uma biblioteca escrita em Javascript que nos permite criar uma página web não importa o que nossa mente possa imaginar usando svg.

A biblioteca, que eu convido você a aprender surf na rica documentação sobre o site, tem um irmão mais novo, criado especificamente para gráficos: gRaphael

A lógica

A idéia é levar dados do banco de dados MySQL utilizando PHP, jQuery no lado do cliente para passar e processá-los com gRaphael AJAX para criar um gráfico interativo. Para fins educacionais, vamos criar uma tabela simples com dados hipotéticos de um estudo sobre a satisfação do cliente para um determinado produto.

O SQL

Nós criamos um banco de dados com uma tabela com customers_satisfaction nome: c_survey.

 CREATE TABLE IF NOT EXISTS "c_survey '(



  



 'Id' int NOT (11) NULL AUTO_INCREMENT,



  



 'Nível' varchar (100) COLLATE utf8_unicode_ci NOT NULL,



  



 'Ocorrências' int (11) NOT NULL,



  



 PRIMARY KEY ('id')







 ) ENGINE = MyISAM DEFAULT CHARSET = utf8 COLLATE = utf8_unicode_ci AUTO_INCREMENT = 5;









 INSERT INTO "c_survey '(' id ',' nível ',' Ocorrências ') VALUES







 (1, 'excelente', 50),







 (2, 'Bom', 100),







 (3, 'Chega', 80),







 (4, 'Fraco', 40);

A tabela possui três campos:

1. um ID de auto-incremento
2. um nível que nós valorizamos como "Excelente", "Good", "Chega", "pobres"
3. um valor numérico para cada nível que representa o número de clientes que tenham manifestado essa avaliação para o nosso produto

Aqui estão os resultados observados com o phpMyAdmin:

• <<
• 1
• 2
• 3
• 4
• 5
• 6
• >>