Peity è un piccolo plugin jQuery che converte il contenuto di un elemento HTML in un semplice grafico a torta, a linee o a barre.
Peity genera mini grafici da inserire inline direttamente nell’html della pagina. Il piccolo plugin traduce i valori contenuti nell’elemento html in grafici. Quindi, se vogliamo un grafico a torta, all’interno di un elemento DIV o SPAN inseriamo 1/10 per vedere uno spicchio sottile, oppure 20/20 per vedere una torta completa. Per i grafici a linee o a barre, dobbiamo invece specificare una serie numerica, come per esempio: 10, -20, 3, 0, 11.
Per iniziare
Inserire Peity nei nostri progetti sarà semplicissimo. Scaricate il plugin jQuery e includetelo nell’header della vostra pagina:
<script src="jquery.peity.min.js"></script>
Create l’elemento o gli elementi html dove dovranno essere visualizzati i mini grafici
<span class="pie">1/5</span> <span class="pie">226/360</span> <span class="pie">0.52/1.561</span>
Infine applicate il plugin agli elementi html lanciando questo semplice comando:
$("span.pie").peity("pie")
Chiaramente Peity è personalizzabile, nei colori, nelle dimensioni dei grafici, nello spessore del tratto, ecc. Il plugin è open source e compatibile con questi browser: Chrome, Firefox, IE9+, Opera, Safari.
Demo
Ho provato ad utilizzarlo e questo è il risultato (dovete premere il pulsante play per eseguire il codice che vedere).
Potete giocarci pure voi, modificando l’esempio qui sopra (premendo il tasto +).