Create a PieChart with PHP and jQuery Raphael.js

Very often we find ourselves having to implement the mini-applicators showing the extraction of data taken from the database, usually for statistical purposes, perhaps because marketing needs them for its own market research, other times to get feedback from customers than a product, sometimes to show the results of a survey.

Using a graph allows you to have a glance which immediately allows us to interpret the data before reading them in tabular form.
It 'is usually a feature long appreciated by customers and makes it much less boring that long string of data to analyze.

Create graphics has never been difficult, but some solutions are better than others, we see to create something fast, solid and pleasing to the eye.

The solution

The combination that we propose is based on PHP and MySQL, with a dose of SVG (Scalable Vector Graphics) and jQuery.
Before explaining the logic with which we proceed let me introduce the javascript library for svg, which will allow us to achieve amazing results: Raphael.js

Raphael.js and gRaphael

Some time ago, browsing and playing with jQuery I wondered if there was a solution to draw a canvas crossbrowser who may be easily integrated with our beloved framework. After a brief search I happened here .

Raphael.js is a library written in Javascript which allows us to design a web page no matter what our minds can imagine using svg.

The library, which I invite you to learn surfing in the rich documentation on the site, has a younger brother, created specifically for graphics: gRaphael

The logic

The idea is to take data from MySQL database using PHP, jQuery on the client side to pass through and process them with gRaphael AJAX to create an interactive chart. For educational purposes we will create a simple table with hypothetical data from a survey on customer satisfaction for a given product.

The SQL

We create a database with one table with name 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,



  



 'Occurrences' int (11) NOT NULL,



  



 PRIMARY KEY ('id')







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









 INSERT INTO 'c_survey' ('id', 'level', 'Occurrences') VALUES







 (1, 'excellent', 50),







 (2, 'Good', 100),







 (3, 'Enough', 80),







 (4, 'Poor', 40);

The table has 3 fields:

1. an auto-increment id
2. a level that we value as "Excellent", "Good", "Enough," "Poor"
3. a numerical value for each level which represents the number of customers who have expressed such an assessment for our product

Here are the results seen with phpMyAdmin:

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