Izveidot PieChart ar PHP un jQuery Raphael.js

Ļoti bieži mēs esam, kam, lai īstenotu mini-aplikatori parādot ieguves dati no datu bāzes, parasti statistikas vajadzībām, varbūt tāpēc, ka mārketinga vajadzībām tos saviem tirgus izpētes, citas reizes, lai saņemtu atgriezenisko saiti no klientiem, nekā produkts, dažkārt, lai parādītu aptaujas rezultāti.

Izmantojot diagrammas ļauj jums acumirklī kas uzreiz ļauj interpretēt datus, pirms nolasīt tos tabulas veidā.
Tas parasti ir gari novērtē klienti un padara to daudz mazāk garlaicīgi, ka garš virkne datu, lai analizētu.

Izveidot grafikas nekad nav bijis grūti, bet daži risinājumi ir labāk nekā citi, mēs redzam, lai radītu kaut ko ātri, cietie un patīkami uz aci.

Risinājums

Kombinācija, mēs ierosinām, ir balstīta uz PHP un MySQL, ar devu SVG (Scalable Vector Graphics) un jQuery.
Pirms izskaidrot loģiku, ar kuru mēs turpinātu ļaujiet man iepazīstināt javascript bibliotēku, SVG, kas ļaus mums sasniegt pārsteidzošu rezultātu: Raphael.js

Raphael.js un gRaphael

Kādu laiku atpakaļ, pārlūkošanas un spēlējot ar jQuery Es prātoju, ja tur bija risinājums, lai pievērstu audekls crossbrowser kas var viegli integrēt ar mūsu mīļais sistēmu. Pēc īsa meklēšanu man gadījās šeit .

Raphael.js ir bibliotēka uzrakstīts Javascript, kas ļauj mums izstrādāt mājas lapu nav svarīgi, ko mūsu prāts var iedomāties, izmantojot svg.

Bibliotēka, kuru es aicinu jūs, lai uzzinātu, sērfošanai bagāts dokumentācija uz vietas, ir jaunākais brālis, kas izveidota speciāli grafikas: gRaphael

Loģika

Ideja ir, lai datus no MySQL datu bāzi, izmantojot PHP, jQuery par klienta pusē, kas iet cauri un tos apstrādāt ar gRaphael AJAX, lai izveidotu interaktīvu diagrammu. Izglītības mērķiem, mēs izveidot vienkāršu tabulu ar hipotētisko datiem aptauju par klientu apmierinātību attiecībā uz doto produktu.

SQL

Mēs izveidot datu bāzi, ar vienu tabulu ar nosaukumu customers_satisfaction: c_survey.

 CREATE TABLE IF NOT EXISTS "c_survey" (



  



 "ID" int (11) NOT NULL auto_increment,



  



 "Līmenis" varchar (100) apkopo utf8_unicode_ci NOT NULL,



  



 "Notikumi" int (11) NOT NULL,



  



 PRIMARY KEY (id)







 ) MOTORA = MyISAM DEFAULT CHARSET = UTF8 salīdzina = utf8_unicode_ci auto_increment = 5;









 INSERT INTO "c_survey" ("id", "līmenis", "Notikumi") VALUES







 (1, "teicami", 50)







 (2, 'Good', 100),







 (3, "Enough", 80)







 (4, 'Slikti', 40);

Tabulā ir 3 jomās:

1. auto-pieaugumu id
2. līmeni, ka mēs vērtību kā "Excellent", "Labi", "Enough", "Poor"
3. skaitlisku vērtību katram līmenim, kas atspoguļo klientu skaitu, kuras ir paudušas šādu novērtējumu par mūsu produktu

Šeit ir rezultāti redzēt ar phpMyAdmin:

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