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

Disegnare grafici direttamente da Javascript

In questi mesi ho approfondito l’uso di jQuery, un framework javascript che ha il vantaggio di essere leggero e intuitivo nell’uso. Inoltre jQuery permette di estendere le proprie funzionalità con l’aggiunta di plugin che sono resi disponibili sul sito ufficiale del progetto.

Oggi vi segnalo Flot, un plugin ci consente di disegnare grafici on the fly, direttamente lato client. I vantaggi principali di Flot sono la facilità d’uso (tutte le opzioni sono facoltative, quindi il plugin è pronto all’uso immediatamente), la bellezza dei risultati e la possibilità di rendere interattivi i grafici. Sebbene Flot sia semplice, è abbastanza avanzato per essere usato come ottimo strumento per applicazioni di data mining e di business intelligence in stile Web 2.0.

Il plugin è compatibile con tutti i principali browser moderni. Il motore che genera il grafico è il tag <canvas>, introdotto da Safari e adesso supportato da quasi tutti i principali browser. L’unica eccezione è fatta per Internet Explorer che non supporta tale tag. Per ovviare al problema, bisogna ricorrere ad ExCanvas, una libreria che emula in tutto e per tutto il tag <canvas>.

Per cominciare, occorre includere le opportune librerie:

Ora è sufficiente posizionare nel corpo della pagina il placeholder che verrà utilizzato per contenere il grafico e il codice javascript:

Flot, jquery plugin

Creare grafici al volo con Google Chart API

Come al solito da Google arrivano sempre idee geniali. Questa volta si tratta di Google Chart API, un sistema veloce e immediato per disegnare grafici per il proprio sito o applicazione web.

Il sistema di funzionamento è semplicissimo: non occorrono chiamate a webservice, autenticazioni o chiavi di accesso. E’ infatti sufficiente inviare una richiesta http e ricevere in risposta il grafico generato. Incapsuliamo la richiesta dentro l’attributo SRC del tag IMG ed il gioco è fatto. Attualmente vengono supportati questi tipi di grafici: a linee, a barre e a torta.

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

Gli ingegneri della Google ammettono di aver progettato queste API per un uso interno ma poi si sono resi conto che poteva essere utile anche agli utenti del web. Il progetto nasce dai laboratori Svizzeri di Zurigo di Google.

Analizzare i guadagni AdSense con CSV AdStat 4.0

Se volete analizzare e studiare l’andamento dei guadagni AdSense del vostro sito, vi consiglio di provare CSV AdStats 4.0. Il progetto che non dava segni di vita da parecchio tempo ora ha ripreso a vivere con la versione 4.0. L’applicazione di tipo desktop è semplice da usare ed è gratuita (freeware). All’avvio vengono chiesti i dati di accesso al proprio account AdSense che serviranno per poter scaricare i dati in formato csv sull’applicazione. E’ possibile impostare un download automatico ogni determinato periodo di tempo personalizzabile.

analizzare i guadagni di adsense Il punto forte di CSV AdStats è la possibilità di tracciare i grafici dei dati AdSense. Oltre che vedere l’andamento degli introiti, si possono disegnare il numero di click, di impressioni, l’effective CPM e una moltitudine di altri dati derivati, come il guadagno medio per ora, la progressione e la media giornaliera/settimanale/mensile e annuale. I grafici si possono aggiungere uno sull’altro per poterli comparare. E’ inoltre possibile decidere il lasso di tempo da analizzare. Il software tiene conto anche dei criteri che sono stati impostati nell’account AdSense, dividendo così i dati per tipo.

Il programma prevedere anche una notification window che compare ad ogni aggiornamento e che spunta dalla tray icon, informandoci sui valori salienti del nostro account AdSense. Oltre a questo, esiste una notifica sonora.

adsense csv

L’applicazione non è molto stabile ed ho dovuto riavviarla per 3/4 volte, prima di ottenere un’importazione completa dei dati. Le importazioni successive risultano essere parziali, quindi più veloci e stabili.

CVS Stats 4.0 appare come uno strumento completo che ci può dare una visione globale dei dati che spesso risultano incomprensibili o insignificanti. Ora vedere come un cambiamento grafico del sito come si ripercuote sugli incassi AdSense è semplice e immediato.

screenshot globale di csv adstats