Napravite PieChart sa PHP i jQuery Raphael.js

Vrlo često se nalazimo da za provedbu mini aplikatora pokazuju ekstrakciju podataka dobivenih iz baze podataka, obično u statističke svrhe, možda zbog marketinških ih treba za svoje istraživanje tržišta, drugi puta da biste dobili povratne informacije od kupaca od proizvoda, ponekad pokazati rezultate ankete.

Korištenje grafikona omogućuje vam da pogled koji je odmah nam omogućuje tumačenje podataka prije nego što ih čitanja u tabličnom obliku.
To je obično značajka dugo cijenjen od strane kupaca i čini ga puno manje dosadno da dugi niz podataka za analizu.

Stvaranje grafike nikada nije bio težak, ali neki su rješenja bolja od drugih, vidimo da stvori nešto brzo, čvrsto i ugodan za oči.

Rješenje

Kombinacija koja mi predlažemo temelji se na PHP i MySQL, uz dozu SVG (Scalable Vector Graphics) i jQuery.
Prije objašnjavajući logika s kojima smo nastavili neka mi uvesti JavaScript biblioteke za SVG, koji će nam omogućiti da postići zadivljujući rezultati: Raphael.js

Raphael.js i gRaphael

Prije nekog vremena, pregledavanje i igranje sa jQuery sam pitao ako ima je rješenje povući platnu crossbrowser koji mogu lako biti integrirane zajedno s našim ljubljenim okvir. Nakon kratkog pretraživanja se dogodilo ovdje .

Raphael.js je knjižnica napisana u Javascript koji omogućuje nam da dizajn web stranice, bez obzira što naš um može zamisliti pomoću SVG.

Knjižnica, koja pozivam vas naučiti surfanje u bogatoj dokumentaciji na mjestu, ima mlađeg brata, izrađen posebno za grafiku: gRaphael

Logika

Ideja je da se podaci iz MySQL baza podataka PHP, jQuery na strani klijenta da prođe kroz njih i proces gRaphael AJAX stvoriti interaktivni grafikon. Za obrazovne svrhe ćemo stvoriti jednostavan tablicu s hipotetskim podacima iz ankete o zadovoljstvu kupaca za određeni proizvod.

SQL

Mi stvoriti bazu podataka s jednim stolom sa imenom customers_satisfaction: c_survey.

 CREATE TABLE ako ne postoji 'c_survey' (



  



 'Id' int (11) NOT NULL AUTO_INCREMENT,



  



 'Razina' varchar (100) usporediti utf8_unicode_ci NOT NULL,



  



 "Pojavljivanja" int (11) NOT NULL,



  



 PRIMARY KEY ('id')







 ) Motor = MyISAM DEFAULT charset = UTF8 = usporediti utf8_unicode_ci AUTO_INCREMENT = 5;









 INSERT INTO 'c_survey' ('id', 'na razini', 'pojavljivanja') vrijednosti







 (1, 'odličan', 50),







 (2, 'Dobro', 100),







 (3, 'Dosta', 80),







 (4, 'Poor', 40);

Tablica se sastoji od 3 polja:

1. automatskim brojačem id
2. razinu da smo vrijednost kao "odličan", "Good", "Dosta", "Poor"
3. brojčana vrijednost za svaku razinu koja predstavlja broj kupaca koji su izrazili takve ocjene za naše proizvode

Ovdje su rezultati vidjeli phpMyAdmin:

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