Lag en PieChart med PHP, jQuery og Raphael.js

Svært ofte vi må gjennomføre mini-applikatorer viser uttak av data hentet fra databasen, vanligvis for statistiske formål, kanskje fordi markedsføring trenger dem for sine egne markedsundersøkelser, til andre tider få tilbakemeldinger fra kundene med hensyn til et produkt, noen ganger for å vise resultatene av en undersøkelse.

Ved hjelp av en graf kan ha en umiddelbar blikk tillater oss å tolke dataene før du leser dem i tabellform.
Det er ganske ofte en funksjon verdsatt av kunder og gjør det mye mindre kjedelig enn en lang streng av data å analysere.

Lag grafikk har aldri vært vanskelig, men noen løsninger er bedre enn andre, vi da lage noe raskt, solid og behagelig for øyet.

Løsningen

Kombinasjonen at jeg foreslår er basert på PHP og MySQL, med en dose på SVG (Scalable Vector Graphics) og jQuery.
Før forklarer logikken som vi ønsker å gjøre la meg introdusere Javascript bibliotek for SVG som vil hjelpe oss å oppnå overraskende resultater: Raphael.js

Raphael.js og gRaphael

For en tid siden, surfing og spille med jQuery Jeg lurte på om det fantes en løsning crossbrowser å tegne et lerret som kan enkelt integreres med vår elskede rammeverk. Etter et kort søk skjedde jeg her .

Raphael.js er et bibliotek skrevet i Javascript som tillater oss å designe en nettside uansett hva våre sinn kan tenke oss å bruke SVG.

Biblioteket, som jeg inviterer deg til å lære surfing i den rike dokumentasjonen på området, har en yngre bror, laget spesielt for grafiske: gRaphael

Logikken

Ideen er å ta data fra MySQL database ved hjelp av PHP, passerte jQuery til klientsiden med AJAX og behandle dem med gRaphael å skape et interaktivt diagram. For pedagogiske formål vil vi lage en enkel tabell med hypotetiske data fra en undersøkelse om kundetilfredshet for et gitt produkt.

SQL

Vi oppretter en database med en tabell med navnet customers_satisfaction: c_survey.

 CREATE TABLE HVIS IKKE eksisterer 'c_survey' (



  



 'Id' int (11) NOT NULL AUTO_INCREMENT,



  



 'Nivå' varchar (100) COLLATE utf8_unicode_ci NOT NULL,



  



 "Forekomster 'int (11) NOT NULL,



  



 PRIMARY KEY ('id')







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









 INSERT INTO 'c_survey' ('id', 'nivå', 'Forekomster') VALUES







 (1, 'utmerket', 50),







 (2, 'Good', 100),







 (3, 'Nok', 80),







 (4, 'Dårlig', 40);

Tabellen har tre felt:

1. en automatisk økning id
2. et nivå som vi verdsetter som "Excellent", "Good", "Enough", "Poor"
3. en numerisk verdi for hvert nivå som representerer antall kunder som har uttrykt en slik vurdering for produktet

Her er resultatene sett med phpMyAdmin:

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