Skapa en PieChart med PHP och jQuery Raphael.js

Ofta befinner vi oss behöva för att genomföra mini-applikatorer visar utvinning av uppgifter från databasen, oftast för statistiska ändamål, kanske för marknadsföring behöver dem för sina egna marknadsundersökningar, till andra tider få feedback från kunderna än ett produkt, ibland för att visa resultaten av en undersökning.

Med hjälp av en graf kan du ha en blick som omedelbart tillåter oss att tolka data innan du läser dem i tabellform.
Det är oftast en funktion lång uppskattas av kunderna och gör det mycket mindre tråkigt att lång sträng av data att analysera.

Skapa grafik aldrig varit svårt, men vissa lösningar är bättre än andra, ser vi att skapa något snabb, stabil och tilltalande för ögat.

Lösningen

Den kombination som vi föreslår bygger på PHP och MySQL, med en dos av SVG (Scalable Vector Graphics) och jQuery.
Innan förklara logiken som vi vidare låt mig presentera den JavaScript-bibliotek för SVG, vilket ger oss möjlighet att uppnå fantastiska resultat: Raphael.js

Raphael.js och gRaphael

För en tid sedan, surfa och leka med jQuery Jag undrade om det fanns en lösning att dra en duk crossbrowser som lätt kan integreras med våra älskade ramar. Efter en kort sökning råkade jag här .

Raphael.js är ett bibliotek skrivet i Javascript som tillåter oss att designa en webbsida oavsett vad våra sinnen kan tänka sig att använda SVG.

Biblioteket, som jag inbjuder dig att lära dig surfa i de rika dokumentation på plats, har en yngre bror, som skapats speciellt för grafik: gRaphael

Logiken

Tanken är att ta data från MySQL databas med PHP, jQuery på klientsidan att passera och bearbeta dem med gRaphael AJAX för att skapa ett interaktivt diagram. I undervisningssyfte kommer vi att skapa en enkel tabell med hypotetiska data från en undersökning om kundnöjdhet för en viss produkt.

SQL

Vi skapar en databas med en tabell som har customers_satisfaction namn: c_survey.

 CREATE TABLE IF NOT EXISTS "c_survey '(



  



 'Id' int (11) NOT NULL AUTO_INCREMENT,



  



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



  



 "Händelser" int (11) NOT NULL,



  



 Primärnyckel ('id')







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









 INSERT INTO "c_survey" ("id", "nivå", "händelser") VÄRDEN







 (1, "utmärkt", 50),







 (2, "bra", 100),







 (3, "nog", 80),







 (4, "Dålig", 40);

Bordet har tre fält:

1. en auto-steg-id
2. en nivå som vi värderar som "Utmärkt", "Bra", "nog", "Dålig"
3. ett numeriskt värde för varje nivå som representerar antalet kunder som har uttryckt en sådan bedömning för vår produkt

Här är resultaten ses med phpMyAdmin:

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