Il seguente tutorial ha l’obiettivo di mostrare come è possibile realizzare una dashboard accessibile via web per visualizzare in modo grafico dei dati… il tutto utilizzando lo standard di grafica vettoriale SVG.
Introduzione
Ero alla ricerca di un modo per visualizzare in maniera grafica i dati di un mio feed su Pachube, creando una dashboard che fosse disponibile via web e senza utilizzare tecnologie proprietarie (Flash…) quando ho trovato questo blogpost di Andrew Hazelden dove mostrava come fosse possibile modificare dinamicamente un file grafico SVG. La stessa tecnica viene utilizzata da un altro progetto opensource di raccolta dati, Nimbits.
I vantaggi principali nell’uso di SVG sono i seguenti:
- è un formato standard, tutti i principali browser sono in grado di visualizzarlo;
- è un formato vettoriale, le immagini possono quindi essere ridimensionate senza perdere qualità;
- è basato su XML, quindi facilmente modificabile.
In questo tutorial vi mostrerò quindi come:
- preparare un file template con un editor SVG (Inkscape);
- modificare tale template in base a dati esterni utilizzando il linguaggio PHP;
- ricevere dati da un feed Pachube sempre con PHP.
Potete scaricare tutto il materiale (template SVG, sorgenti PHP) dal repository su GitHub; inoltre è disponibile una demo online all’indirizzo: http://www.lucadentella.it/demo/pachube.php
Nella prossima pagina vedremo come creare il template della nostra dashboard…
8 Comments »