Tachimetro in Javascript e HTML5 che si aggiorna automaticamente via Ajax

L’altro giorno mi è capitato di implementare un widget per visualizzare il conteggio di quante persone si trovano all’interno della biblioteca in un certo momento. Ho pensato ad un indicatore analogico vecchio stampo, stile tachimetro da automobile e dopo alcuni tentativi ho trovato questo: https://github.com/Mikhus/canv-gauge

tachimetroE’ open source, è interamente fatto in Javascript e sfrutta il nuovo tag <CANVAS> di HTML5. Per questo motivo non funziona su internet explorer.. oh beh, tanto meglio!

Il dato mi arriva in formato JSON da un web service che ho creato appositamente, ma si può utilizzare qualsiasi dato in qualsiasi modo, l’importante è chiamare la funzione gauge.SetValue(valore) per aggiornare la lancetta sul tachimetro.

Una volta decompresso il file zip scaricato da GitHub, vi troverete il file gauge.js da includere nella vostra pagina web, più due pagine html di esempi che vi mostreranno le varie possibilità di configurazione del tachimetro.

Il javascript di base da includere nella vostra pagina è minuscolo e comprende già tutto quello che occorre.

Così però il tachimetro è ben poco attraente: segna zempre zero e ha la grafica predefinita. Adesso provate a migliorarlo impostando qualche opzione in più nel Javascript che avete inserito prima..

Una volta applicate le modifiche, dovreste ottenere qualcosa del genere:

tachimetro2

molto meglio, vero?

Ora non rimane che aggiungere l’aggiornamento periodico del valore indicato dal tachimetro usando una richiesta AJAX, nel mio caso fatta a un web service che
restituisce il valore in formato JSON costruito in questo modo:

{"presenti": [[157]]}

Per comodità ho usato jQuery, per cui tutto ciò che ci serve è modificare la funzione gauge.onready() includendo la chiamata AJAX:

Fatto!