SVG Dashboard

luca 22/01/2012 14

PHP and Pachube

To get data from Pachube, you need an api key, related to your account. From Pachube website, you can generate keys with different privileges. If you only want to read data from a public feed, you need to choose READ as permitted methods:

At the top of PHP source, some constants are defined about Pachube connection: the api key, the feed id, the datastream id and the element position in the received row (normally, a data row from Pachube has the format <datastream_id>,<timestamp>,<value>):

$value = $_GET["value"];

To keep things simple, choose to receive data in CSV format, using an URL as explaned in the guide:

$root = __DIR__;
$svg_template = simplexml_load_file("$root/template.svg");

To connect to Pachube website, we’re going to use cURL library: with its curl_init method, you get an handle related to Pachube URL. Before you can connect, you need to set some propertiesRETURNTRANSFER to get response body from cURL and HTTPHEADER to specify your api key:

$result = $svg_template->xpath("//*[@id='temp_level']");
if(count($result) == 1) $temp_level = $result[0];
else exit("Unable to find a node with temp_level ID");
$result = $svg_template->xpath("//*[@id='temp_value']");
if(count($result) == 1) $temp_value = $result[0];
else exit("Unable to find a node with temp_value ID");

$result = $svg_template->xpath("//*[@id=’temp_value’]");
if(count($result) == 1) $temp_value = $result[0];
else exit("Unable to find a node with temp_value ID");

When the connection is done, check its HTTP_CODE: if it’s 200, it means the connection was successful and Pachube returned a correct value. Split the response body using comma (CSV) as a separator and get the value in the position specified:

$temp_level['height'] = $value * 5;
$temp_value[0] = $value;

At last create an iframe to display thermometer page passing the read value as parameter:

if($value < 15) {
  $temp_value['style'] = "font-size:72px;fill:#0000ff";
} elseif($value < 25) {
  $temp_value['style'] = "font-size:72px;fill:#00ff00";
} else {
  $temp_value['style'] = "font-size:72px;fill:#ff0000";

The result (with debug mode on):

Pages: 1 2 3 4


  1. Lucio 30/06/2012 at 16:51 - Reply

    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.

  2. A MacLeod 06/05/2013 at 22:24 - Reply

    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!

    • luca 07/05/2013 at 08:19 - Reply

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

  3. Mosesliete 16/04/2018 at 23:05 - Reply

    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.

Leave A Response »

Click here to cancel reply.

This website uses cookies to ensure you get the best experience on our website maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.