Creare mini grafici in HTML e Javascript, con Peity

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 +).

Naked Password: scegliere password robuste diventa divertente

Quando ci si registra sui siti web, è sempre una buona prassi scegliere password robuste. Per pigrizia mentale spesso tendiamo ad usare sempre le stesse password e tendenzialmente deboli.

Naked Password è un plugin jQuery che agevola gli utenti (maschi) a scegliere password robuste. L’idea è di far spogliare una ragazza scegliendo password sempre più complicate. L’idea credo possa essere più “simpatica” che utile, ma, come dice il proverbio, tentar non nuoce.

Isotope, un plugin jQuery per layout magici

Con Isotope potete creare layout web magici, con animazioni in tempo reale ed effetti strabilianti. Questo plugin jQuery opera in diverse direzioni: mostra/nasconde elementi filtrandoli, riordina, dispone gli elementi in modo dinamico e intelligente (layout), dispone di ottime animazioni visive.

Se voleve vedere tutta la potenza di Isotope, guardatevi il sito ufficiale che mostra molti esempi di utilizzo. Inoltre il sito offre un’ottima sezione di documentazione per scoprire nei dettagli tutte le caratteristiche del plugin.