Creare mini grafici in HTML5 con Peity

Peity è un plugin jQuery per la creazione di mini grafici da inserire all’interno di testi di pagine web.

Il peso del plugin è davvero ridicolo (3.9Kb) e grazie all’utilizzo del tag <canvas> di HTML5 permette di disegnare grafici a barre, linee e torte in pochissime righe di codice.

Basterà richiamare il plugin con JavaScript e passare i dati e il tipo di grafico voluto con HTML5

Ecco alcuni metodi di utilizzo.

GRAFICO A TORTA

Chiamate peity(“pie”) in una selezionate  jQuery selection.

JAVASCRIPT

$("span.pie").peity("pie");

HTML

<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>

A questo punto potete passare alla ‘funzione’ il colore e il raggio della torta. Esempio: peity(“pie”, { radius: 42 }).

HTML

<p class="radius">
  <span class="r10">1/10</span>
  <span class="r9">2/10</span>
  <span class="r8">3/10</span>
  <span class="r7">4/10</span>
  <span class="r6">5/10</span>
  <span class="r5">6/10</span>
  <span class="r4">7/10</span>
  <span class="r3">8/10</span>
  <span class="r2">9/10</span>
  <span class="r1">10/10</span>
</p>

JAVASCRIPT

$(".radius span").each(function() {
  var elem = $(this);
  var radius = elem.attr("class").match(/\d+/) * 4;

  elem.peity("pie", {
    colours: ["#C6D9FD", "#4D89F9"],
    radius: radius
  });
});

Per gli altri tipi di grafici e le modalità di configurazione vi rimando al sito dove potrete anche scaricare il plugin gratuitamente