Creare una PieChart con PHP, Raphael.js e jQuery
Pagina 1 di 6
Molto spesso ci troviamo a dover implementare delle miniapplicazioni che mostrino delle estrazioni di dati presi dal Database, quasi sempre a fini statistici, magari perchè il marketing ne ha bisogno per le proprie indagini di mercato, altre volte per avere un feedback dai clienti rispetto ad un prodotto, talvolta per mostrare i risultati di un sondaggio.
Utilizzare un grafico permette di avere un colpo d'occhio immediato che consente di interpretare i dati prima di leggerli in forma tabellare.
E' solitamente una feature parecchio apprezzata dai committenti e rende molto meno noiosa quella lunga sequela di dati da analizzare.
Creare grafici non è mai stato difficile, ma alcune soluzioni sono meglio di altre, vediamo quindi di creare qualcosa di veloce, solido e piacevole per gli occhi.
La soluzione
La combinazione che vi propongo è a base di PHP e Mysql, con una dose di svg (Scalable Vector Graphics) e di jQuery.
Prima di spiegare la logica con la quale vogliamo procedere lasciatemi introdurre la libreria Javascript per l'svg che ci permetterà di ottenere risultati sorprendenti: Raphael.js
Raphael.js e gRaphael
Qualche tempo fa curiosando e giocando con jQuery mi chiesi se esistesse una soluzione crossbrowser per disegnare un canvas che magari fosse facilmente integrabile con il nostro amato framework. Dopo una breve ricerca capitai qui.
Raphael.js è una libreria scritta in Javascript che ci permette di disegnare in una pagina web qualunque cosa la nostra mente possa immaginare utilizzando svg.
La libreria, che vi invito a conoscere navigando nella ricca documentazione presente sul sito, ha un fratello minore, creato appositamente per i grafici: gRaphael
La logica
L'idea è di prendere i dati dal database Mysql tramite PHP, passarli a jQuery lato client tramite AJAX e processarli con gRaphael per creare un grafico interattivo. A scopo didattico creeremo una semplice tabella con gli ipotetici dati di un sondaggio sulla customer satisfaction per un dato prodotto.
L'SQL
Creiamo un database con nome customers_satisfaction avente una sola tabella: 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, 'Ottimo', 50),
(2, 'Buono', 100),
(3, 'Sufficiente', 80),
(4, 'Scarso', 40);
La tabella possiede 3 campi:
- un id autoincrementale
- un livello che valorizziamo con "Ottimo", "Buono", "Sufficiente", "Scarso"
- un valore numerico per ogni livello che rappresenti il numero di clienti che hanno espresso tale valutazione per il nostro prodotto
Ecco il risultato visto con phpMyAdmin:
