Vytvorte PieChart s PHP a jQuery Raphael.js

Veľmi často sa ocitáme musieť vykonať mini-aplikátory ukazuje získavanie dát z databázy, zvyčajne na štatistické účely, možno preto, že marketing je potrebuje pre svoj ​​výskum trhu, inokedy získať spätnú väzbu od zákazníkov, ako výrobku, niekedy sa ukazujú výsledky prieskumu.

Pomocou graf vám umožňuje mať prehľad, ktorý okamžite nám umožňuje interpretovať dáta pred ich čítanie vo forme tabuľky.
To je zvyčajne funkcie dlhodobo oceňujú zákazníci a je oveľa menej nudné, že dlhé reťazce dát pre analýzu.

Vytvorte grafiku nikdy nebolo ťažké, ale niektoré riešenia sú lepšie ako ostatné, vidíme, vytvoriť niečo rýchleho, pevné a príjemné na pohľad.

Riešenie

Kombinácie, ktoré navrhujeme, je založený na PHP a MySQL, s dávkou SVG (Scalable Vector Graphics) a jQuery.
Predtým, než vysvetľovať logiku, s ktorou budeme postupovať dovoľte mi predstaviť javascript knižnice pre SVG, ktorý nám umožní dosiahnuť úžasných výsledkov: Raphael.js

Raphael.js a gRaphael

Pred nejakou dobou, prehliadanie a hranie sa s jQuery som premýšľal, či tam bol riešením nakresliť plátno crossbrowser, ktorý môže byť ľahko integrovať s naším milovaným rámca. Po krátkom hľadaní som náhodou tu .

Raphael.js je knižnica napísaná v JavaScripte, ktorá nám umožňuje navrhnúť webové stránky, bez ohľadu na to, čo naša myseľ môže predstaviť pomocou SVG.

Knižnica, ktorá vás pozývam, aby ste sa naučili surfovať na bohaté dokumentáciu na mieste, má mladšieho brata, vytvorený špeciálne pre grafikov: gRaphael

Logika

Cieľom je, aby sa dáta z databázy MySQL pomocou PHP, jQuery na strane klienta prejsť a spracovať ich s gRaphael AJAX pre vytváranie interaktívneho grafu. Pre výukové účely budeme vytvoriť jednoduchú tabuľku s hypotetickým dáta z prieskumu spokojnosti zákazníkov pre daný produkt.

SQL

Máme vytvoriť databázu s jednou tabuľkou s názvom customers_satisfaction: c_survey.

 CREATE TABLE IF NOT exists "c_survey" (



  



 "ID" int (11) NOT NULL AUTO_INCREMENT,



  



 "Úroveň" varchar (100) COLLATE utf8_unicode_ci NOT NULL,



  



 "Udalosti" int (11) NOT NULL,



  



 Primárny kľúč ("ID")







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









 INSERT INTO "c_survey" ("ID", "úroveň", "Udalosti") VALUES







 (1, "vynikajúci", 50),







 (2, 'Dobrý', 100),







 (3, "dosť", 80),







 (4, "zlý", 40);

V tabuľke má 3 polia:

1. Auto-ID prírastok
2. takej úrovni, aby si vážime ako "vynikajúci", "dobré", "Dosť", "chudobný"
3. číselné hodnoty pre každú úroveň, ktorá zodpovedá počtu zákazníkov, ktorí vyjadrili toto hodnotenie našich výrobkov

Tu sú výsledky vidieť s phpMyAdmin:

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