Creaţi un PieChart cu PHP, jQuery şi Raphael.js

Foarte des trebuie să pună în aplicare aplicatorii mini-arată extragerea de datele preluate din baza de date, de obicei în scopuri statistice, probabil din cauza de marketing are nevoie de ele pentru activităţi de cercetare de piaţă propriu, alteori pentru a obţine feedback de la clienţii cu privire la o produs, uneori, pentru a arată rezultatele unui sondaj.

Folosind un grafic poate avea o privire imediat ne permite să interpreteze datele înainte de a citi-le în formă de tabel.
Este destul de des o caracteristică apreciat de clienti si o face mult mai puţin plictisitor decât un lung şir de date pentru a analiza.

Crearea grafica nu a fost niciodată greu, dar unele solutii sunt mai bune decât altele, atunci vom crea ceva rapid, solid şi plăcut ochiului.

Soluţia

Combinaţie care propunem se bazează pe PHP si MySQL, cu o doză de SVG (Scalable Vector Graphics) şi jQuery.
Înainte de a explica logica cu care vrem să facem permiteţi-mi să introducă biblioteca Javascript pentru SVG, care ne va permite să obţină rezultate surprinzătoare: Raphael.js

Raphael.js şi gRaphael

Cu ceva timp în urmă, navigare şi joc cu jQuery M-am întrebat dacă a existat o crossbrowser soluţie pentru a trage o panza care ar putea fi integrat cu uşurinţă în cadrul nostru iubit. După o scurtă căutare I s-a întâmplat aici .

Raphael.js este o bibliotecă scrisă în Javascript care ne permite să proiectăm o pagină web, indiferent de ceea ce mintea noastra poate imagina folosind SVG.

Biblioteca, pe care vă invit să înveţe surfing în documentaţia bogat de pe site-ul, are un frate mai mic, creat special pentru grafică: gRaphael

Logica

Ideea este de a lua datele din baza de date MySQL folosind PHP, jQuery a trecut la partea de client folosind AJAX şi le prelucrează cu gRaphael pentru a crea o diagramă interactivă. Pentru scopuri educaţionale, vom crea un tabel simplu cu date ipotetice de la un sondaj privind satisfactia clientilor pentru un anumit produs.

SQL

Am crea o baza de date cu un tabel cu numele customers_satisfaction: c_survey.

 CREATE TABLE IF NOT EXISTS "c_survey" (



  



 "Id" int NU (11) NULL auto_increment,



  



 "Nivel" varchar (100) COLLATE utf8_unicode_ci NOT NULL,



  



 "Evenimentele" int (11) NOT NULL,



  



 Cheie primară ("id")







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









 INSERT INTO 'c_survey "(" id "," nivel "," Evenimentele ") VALORI







 (1, "excelent", 50),







 (2, 'Bine', 100),







 (3, "Enough", 80),







 (4, "Slab", 40);

Tabelul are 3 domenii:

1. un ID de auto-increment
2. un nivel care am valoare ca "Excelent", "Good", "Destul", "săraci"
3. o valoare numerică pentru fiecare nivel care reprezinta numarul de clienti care au exprimat o astfel de evaluare pentru produsul nostru

Aici sunt rezultatele observate cu phpMyAdmin:

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