Vytvořte PieChart s PHP a jQuery Raphael.js

Velmi často se ocitáme muset provést mini-aplikátory ukazuje získávání dat z databáze, obvykle pro statistické účely, možná proto, že marketing je potřebuje pro svůj výzkum trhu, jindy získat zpětnou vazbu od zákazníků, než výrobku, někdy se ukazují výsledky průzkumu.

Pomocí graf vám umožňuje mít přehled, který okamžitě nám umožňuje interpretovat data před jejich čtení ve formě tabulky.
To je obvykle funkce dlouhodobě oceňují zákazníci a je mnohem méně nudné, že dlouhé řetězce dat pro analýzu.

Vytvořte grafiku nikdy nebylo obtížné, ale některá řešení jsou lepší než ostatní, vidíme, vytvořit něco rychlého, pevné a příjemné na pohled.

Řešení

Kombinace, které navrhujeme, je založen na PHP a MySQL, s dávkou SVG (Scalable Vector Graphics) a jQuery.
Předtím, než vysvětlovat logiku, s níž budeme postupovat dovolte mi představit javascript knihovny pro SVG, který nám umožní dosáhnout úžasných výsledků: Raphael.js

Raphael.js a gRaphael

Před nějakou dobou, prohlížení a hraní si s jQuery jsem přemýšlel, jestli tam byl řešením nakreslit plátno crossbrowser, který může být snadno integrovat s naším milovaným rámce. Po krátkém hledání jsem náhodou zde .

Raphael.js je knihovna napsána v JavaScriptu, která nám umožňuje navrhnout webové stránky, bez ohledu na to, co naše mysl může představit pomocí SVG.

Knihovna, která vás zvu, abyste se naučili surfovat na bohaté dokumentaci na místě, má mladšího bratra, vytvořený speciálně pro grafiky: gRaphael

Logika

Cílem je, aby se data z databáze MySQL pomocí PHP, jQuery na straně klienta projít a zpracovat je s gRaphael AJAX pro vytváření interaktivního grafu. Pro výukové účely budeme vytvořit jednoduchou tabulku s hypotetickým data z průzkumu spokojenosti zákazníků pro daný produkt.

SQL

Máme vytvořit databázi s jednou tabulkou s názvem 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,



  



 "Události" int (11) NOT NULL,



  



 Primární klíč ("ID")







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









 INSERT INTO "c_survey" ("ID", "úroveň", "Události") VALUES







 (1, "vynikající", 50),







 (2, "dobré", 100),







 (3, "dost", 80),







 (4, "špatný", 40);

V tabulce má 3 pole:

1. Auto-ID přírůstek
2. takové úrovni, aby si vážíme jako "vynikající", "dobré", "Dost", "chudý"
3. číselné hodnoty pro každou úroveň, která odpovídá počtu zákazníků, kteří vyjádřili toto hodnocení našich výrobků

Zde jsou výsledky vidět s phpMyAdmin:

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