Δημιουργήστε ένα κυκλικό διάγραμμα με την PHP και jQuery Raphael.js

Πολύ συχνά βρισκόμαστε με την εφαρμογή των μίνι-εφαρμοστές που δείχνει την εξαγωγή των δεδομένων που λαμβάνονται από τη βάση δεδομένων, συνήθως για στατιστικούς λόγους, ίσως επειδή η εμπορία τους, τις ανάγκες για τη δική του έρευνα αγοράς της, άλλες φορές για να πάρει πληροφορίες από τους πελάτες από μια προϊόν, μερικές φορές για να δείξει τα αποτελέσματα της έρευνας.

Χρησιμοποιώντας ένα γράφημα σας επιτρέπει να έχετε μια ματιά που αμέσως μας επιτρέπει να ερμηνεύσουμε τα δεδομένα πριν από την ανάγνωση τους σε μορφή πίνακα.
Είναι συνήθως ένα χαρακτηριστικό καιρό εκτιμηθεί από τους πελάτες και την καθιστά πολύ λιγότερο βαρετό ότι μακρά σειρά των δεδομένων για την ανάλυση.

Δημιουργήστε γραφικά ποτέ δεν ήταν δύσκολη, αλλά μερικές λύσεις που είναι καλύτερες από άλλες, βλέπουμε να δημιουργήσει κάτι γρήγορο, σταθερό και ευχάριστο στο μάτι.

Η λύση

Ο συνδυασμός που προτείνουμε βασίζεται σε PHP και MySQL, με μια δόση του SVG (scalable vector graphics) και jQuery.
Πριν εξηγήσουμε τη λογική με την οποία προχωρούμε επιτρέψτε μου να εισαγάγει το javascript βιβλιοθήκη για SVG, το οποίο θα μας επιτρέψει να επιτύχουμε εκπληκτικά αποτελέσματα: Raphael.js

Raphael.js και gRaphael

Πριν από λίγο καιρό, η περιήγηση και το παιχνίδι με jQuery αναρωτήθηκα αν υπήρχε μια λύση για να σχεδιάσετε ένα crossbrowser καμβά που μπορεί εύκολα να ενσωματωθούν με την αγαπημένη μας πλαίσιο. Μετά από μια σύντομη αναζήτηση μου συνέβη εδώ .

Raphael.js είναι μια βιβλιοθήκη γραμμένη σε Javascript που μας επιτρέπει να σχεδιάσουμε μια ιστοσελίδα δεν έχει σημασία τι το μυαλό μας μπορεί να φανταστεί κανείς τη χρήση SVG.

Η βιβλιοθήκη, η οποία σας καλώ να μάθετε σερφ στην πλούσια τεκμηρίωση σχετικά με το site, έχει έναν μικρότερο αδερφό, το οποίο δημιουργήθηκε ειδικά για γραφικά: gRaphael

Η λογική

Η ιδέα είναι να λάβει τα δεδομένα από τη βάση δεδομένων MySQL χρησιμοποιώντας PHP, jQuery στην πλευρά του client να περάσει μέσα και την επεξεργασία τους με gRaphael AJAX για τη δημιουργία ενός διαδραστικού χάρτη. Για εκπαιδευτικούς σκοπούς θα δημιουργήσουμε ένα απλό πίνακα με υποθετικά στοιχεία από μια έρευνα σχετικά με την ικανοποίηση των πελατών για ένα συγκεκριμένο προϊόν.

Ο SQL

Δημιουργούμε μια βάση δεδομένων με έναν πίνακα με customers_satisfaction όνομα: c_survey.

 CREATE TABLE ΑΝ ΔΕΝ ΥΠΑΡΧΕΙ »c_survey» (



  



 «Ταυτότητα» int (11) NOT NULL AUTO_INCREMENT,



  



 «Επίπεδο» varchar (100) αντιπαραβάλλουν utf8_unicode_ci NOT NULL,



  



 «Παρουσίες» int (11) NOT NULL,



  



 PRIMARY KEY ("id")







 ) ENGINE = MyISAM DEFAULT charset = utf8 Συρραφή = utf8_unicode_ci AUTO_INCREMENT = 5?









 INSERT INTO »c_survey» («ταυτότητα», «επίπεδο», «Παρουσίες») τιμές







 (1, «εξαιρετική», 50),







 (2, 'Good', 100),







 (3, «αρκετά», 80),







 (4, «Κακή», 40)?

Στον πίνακα που έχει 3 πεδία:

1. αυτόματης αύξηση id
2. ένα επίπεδο που εκτιμούμε ως "Excellent", "Good", "Enough", "Κακή"
3. αριθμητική τιμή για κάθε επίπεδο που αντιπροσωπεύει τον αριθμό των πελατών που έχουν εκφράσει μια τέτοια εκτίμηση για το προϊόν μας

Εδώ είναι τα αποτελέσματα που παρατηρήθηκαν με το phpMyAdmin:

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