SVG Dashboard

by luca
14 comments

The following tutorial will show how you can create a web dashboard to graphically display data using the standard vectorial format SVG.

Introduction

I was looking for a way to show in a graphic form data coming from a feed on Pachube: I needed to create a dashboard available via web and without proprietary technologies (Flash…). I found this blogpost by Andrew Hazelden where he describes how you can dinamically change an SVG file. The same trick is used by another opensource data collector software, Nimbits.

The main advantages in using SVG format are:

  • it’s a standard format, the most popular Internet browsers can display it;
  • it’s a vector format, drawings can be resized without quality loss;
  • it’s based on XML, so it can be changed easily.

In this tutorial I’m going to show you how to:

  • create a template drawing with an SVG editor (Inkscape);
  • change that template using PHP language;
  • receive data from a Pachube feed,using PHP.

You can download all the files (SVG template, PHP sources) from my GitHub repository; you can also see an online demo at the following URL: http://www.lucadentella.it/demo/pachube.php

In the next page, we’re going to learn how to create our dashboard’s template…

Related Posts

14 comments

How to add flair to a webpage that shows your project data - Hack a Day Friday January 27th, 2012 - 07:00 PM

[…] temperature display may not knock your socks off, but it’s a simple demonstration of how you can used vector graphics as a web readout for data (translated). [Luca] wrote this four page tutorial to help others, he makes it look really easy, […]

Reply
How to add flair to a webpage that shows your project data » Geko Geek Friday January 27th, 2012 - 08:30 PM

[…] temperature display may not knock your socks off, but it’s a simple demonstration of how you can used vector graphics as a web readout for data (translated). [Luca] wrote this four page tutorial to help others, he makes it look really easy, […]

Reply
How to add flair to a webpage that shows your project data | ro-Stire Friday January 27th, 2012 - 10:05 PM

[…] temperature display may not knock your socks off, but it’s a simple demonstration of how you can used vector graphics as a web readout for data (translated). [Luca] wrote this four page tutorial to help others, he makes it look really easy, […]

Reply
How to add flair to a webpage that shows your project data | My Blog Saturday January 28th, 2012 - 12:36 AM

[…] heat arrangement might not hit your hosiery off, though it’s a elementary proof of how we can used matrix graphics as a web readout for data (translated). [Luca] wrote this 4 page educational to assistance others, he creates it demeanour […]

Reply
How to add flair to a webpage that shows your project data « Gadgets « The Depot of Talk Saturday January 28th, 2012 - 05:01 AM

[…] temperature display may not knock your socks off, but it’s a simple demonstration of how you can used vector graphics as a web readout for data (translated). [Luca] wrote this four page tutorial to help others, he makes it look really easy, […]

Reply
How to add flair to a webpage that shows your project data « « SNAP-DIYSNAP-DIY Saturday January 28th, 2012 - 09:16 AM

[…] temperature display may not knock your socks off, but it’s a simple demonstration of how you can used vector graphics as a web readout for data (translated). [Luca] wrote this four page tutorial to help others, he makes it look really easy, […]

Reply
How to add flair to a webpage that shows your project data | CisforComputers Sunday January 29th, 2012 - 06:01 AM

[…] temperature display may not knock your socks off, but it’s a simple demonstration of how you can used vector graphics as a web readout for data (translated). [Luca] wrote this four page tutorial to help others, he makes it look really easy, […]

Reply
Tutorial : changer dynamiquement un SVG Sunday January 29th, 2012 - 09:23 AM

[…] XML est facilement modifiable par les langage de scripting web. Tous les détails en anglais et en italien sont sur le blog de lucadentella, les code sources des exemples SVG et PHP sont sur GITHub et enfin […]

Reply
Lucio Saturday June 30th, 2012 - 04:51 PM

Gentile Luca Dentella,
ho trovato interessantissimo il suo tutorial che riguarda il dashboard svg. Le chiederei gentilmente, se possibile, di fornirmi un esempio per visualizzare in forma grafica sul browser i valore di tensione letti sugli ingressi analogici dell’arduino uno in forma vu meter lineare (tipo il suo termometro) oppure classico a lancetta.
Ringraziando anticipatamente, Le porgo distinti saluti.
lucio.ra@libero.it

Reply
A MacLeod Monday May 6th, 2013 - 10:24 PM

Thanks for taking the time to document this, I used it as a basis for my own arduino project (a web-connected heating oil level monitor.)

Getting a nice SVG-based level indication turned out to be easier than I had feared… strangely, getting it to send warning emails was trickier!

http://s230.photobucket.com/user/macleodaj/media/Junk/oil_level_gauge.jpg.html

Reply
luca Tuesday May 7th, 2013 - 08:19 AM

Hi! Thanks for your feedback and great SVG web interface!

Reply
lucadentella.it – Yún – Utilizzare PHP Thursday December 5th, 2013 - 10:33 AM

[…] Dashboard in SVG […]

Reply
Yún – How to use PHP | LinkSprite Learning Center Monday June 27th, 2016 - 04:16 AM

[…] you have already read about some of my projects (dashboard, web charts…), you’ve certainly noticed that I’d like to use the PHP language for developing […]

Reply
Mosesliete Monday April 16th, 2018 - 11:05 PM

Wonderful site, how do u get all this information?I’ve read a few posts on your site and I like your writing style. Thanks a million, keep up the great work.

Reply

Leave a Comment

two × one =