Crear un PieChart amb PHP i jQuery Raphael.js

Molt sovint ens trobem a nosaltres mateixos haver d'implementar els aplicadors mini-mostra l'extracció de les dades obtingudes de la base de dades, en general amb finalitats estadístiques, potser perquè la seva comercialització necessita per a la seva investigació de mercat, altres vegades per obtenir retroalimentació dels clients d'un producte, de vegades per mostrar els resultats d'una enquesta.

Utilitzant un gràfic li permet tenir una mirada que immediatament ens permet interpretar les dades abans de llegir-los en forma de taula.
És en general una característica llargament apreciat pels clients i ho fa molt menys avorrit que llarga sèrie de dades per analitzar.

Crear gràfics mai ha estat difícil, però algunes solucions són millors que altres, veiem a crear alguna cosa ràpid, sòlid i agradable a la vista.

La solució

La combinació que proposem es basa en PHP i MySQL, amb una dosi de SVG (Scalable Vector Graphics) i jQuery.
Abans d'explicar la lògica amb la qual es procedeix permeteu-me presentar a la biblioteca de Javascript per SVG, que ens permetrà aconseguir resultats sorprenents: Raphael.js

Raphael.js i gRaphael

Fa algun temps, navegar i jugar amb jQuery em vaig preguntar si hi havia una solució per dibuixar un crossbrowser llenç que pot ser fàcilment integrat amb el nostre marc estimat. Després d'una breu recerca em va passar aquí .

Raphael.js és una llibreria escrita en Javascript que ens permet dissenyar una pàgina web, no importa el que la nostra ment pot imaginar l'ús de SVG.

La biblioteca, que us convido a aprendre a surfejar en la rica documentació en el lloc, té un germà menor, creat específicament per a gràfics: gRaphael

La lògica

La idea és prendre les dades de base de dades MySQL amb PHP, jQuery al costat del client per passar pel procés i amb gRaphael AJAX per crear un gràfic interactiu. Per als propòsits educatius crearem una senzilla taula amb dades hipotètics d'un estudi sobre la satisfacció del client per a un producte determinat.

El SQL

Creem una base de dades amb una taula amb customers_satisfaction nom: c_survey.

 CREATE TABLE IF NOT EXISTS "c_survey '(



  



 'Id' int NO (11) NULL AUTO_INCREMENT,



  



 'Nivell' VARCHAR (100) COLLATE utf8_unicode_ci NOT NULL,



  



 "Ocurrències" int (11) NOT NULL,



  



 PRIMARY KEY ('id')







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









 INSERT INTO 'c_survey' ('id', 'nivell', 'Aparicions') VALUES







 (1, 'excel lent', 50),







 (2, 'Bé', 100),







 (3, 'Ja n'hi ha prou', 80),







 (4, 'Pobre', 40);

La taula té tres camps:

1. un identificador d'increment automàtic
2. un nivell que nosaltres valorem com "Excel lent", "Good", "Prou", "pobres"
3. un valor numèric per a cada nivell que representa el nombre de clients que han expressat aquest tipus d'avaluació per al nostre producte

Aquests són els resultats observats amb phpMyAdmin:

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