Maak een PieChart met PHP en jQuery Raphael.js

Heel vaak vinden we onszelf dat u de mini-applicators met de extractie van gegevens uit de database, meestal voor statistische doeleinden, misschien omdat ze marketing nodig heeft voor zijn eigen marktonderzoek uit te voeren, naar andere tijden te krijgen feedback van klanten dan een product, soms om de resultaten van een enquête laten zien.

Met behulp van een grafiek kunt u een blik die onmiddellijk ons ​​in staat stelt om de gegevens te interpreteren voordat ze te lezen in tabelvorm.
Het is meestal een functie lange gewaardeerd door klanten en maakt het een stuk minder saai dat de lange reeks van gegevens te analyseren.

Maak een grafiek is nooit moeilijk geweest, maar sommige oplossingen zijn beter dan anderen, zien we iets snel, solide en een lust voor het oog maken.

De oplossing

De combinatie die wij voorstellen is gebaseerd op PHP en MySQL, met een dosis van SVG (Scalable Vector Graphics) en jQuery.
Voor het uitleggen van de logica waarmee we verder laat ik me even de JavaScript-bibliotheek voor svg, die zal ons toelaten om verbluffende resultaten te bereiken: Raphael.js

Raphael.js en gRaphael

Enige tijd geleden, browsen en het spelen met jQuery Ik vroeg me af of er een oplossing voor een doek crossbrowser, die gemakkelijk kunnen worden geïntegreerd met onze geliefde kader te tekenen. Na een korte zoekactie ik toevallig hier .

Raphael.js is een bibliotheek geschreven in Javascript die ons in staat om een ​​webpagina te ontwerpen, ongeacht wat onze geest kan zich voorstellen met behulp van svg.

De bibliotheek, die ik nodig u uit om te leren surfen in de rijke documentatie op de site, heeft een jongere broer, speciaal gemaakt voor de graphics: gRaphael

De logica

Het idee is om data te nemen van MySQL database met behulp van PHP, jQuery op de client side te passeren en te verwerken met gRaphael AJAX om een interactieve grafiek te maken. Voor educatieve doeleinden maken we een eenvoudige tabel met hypothetische gegevens uit een enquête over de tevredenheid van de klant voor een bepaald product.

De SQL-

We creëren een database met een tabel met de naam van customers_satisfaction: 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,



  



 'Voorkomen' int (11) NOT NULL,



  



 PRIMARY KEY ('id')







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









 INSERT INTO 'c_survey' ('id', 'niveau', 'Voorkomen') VALUES







 (1, 'excellent', 50),







 (2, 'Goed', 100),







 (3, 'Genoeg', 80),







 (4, 'Slecht', 40);

De tafel heeft drie velden:

1. een auto-increment id
2. een niveau dat we waarde als "Excellent", "Goed", "Genoeg", "Poor"
3. een numerieke waarde voor elk niveau waarbij het aantal klanten die hebben aangegeven een dergelijke beoordeling voor ons product vertegenwoordigt

Hier zijn de resultaten gezien met phpMyAdmin:

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