solon/livedata.html

## gistfile2.txt

      
    Raw
  

              gistfile2.txt
            
          
## livedata.html
<!--

livedata.html

A demonstration of live data loading from Pachube.
Sensor data is updated automatically using AJAX, without needing to manually reload the page.

This demo requires jQuery, a popular JavaScript framework.
Download it from http://code.jquery.com/jquery-1.4.2.min.js
and save it in the same directory as this HTML page.

-->
<html>
<head>
  <title>Pachube live reloading demo</title>
  <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

</head>
<body onload="getOutputFromPachube();">
<script type="text/javascript">
var api_key = 'YOUR_PACHUBE_API_KEY_HERE';
var feed_id = 504; // replace this with the ID of your feed
var my_url = "http://www.pachube.com/api/feeds/"+feed_id+".json?key="+api_key;

function getOutputFromPachube() {
  $.ajax({
    url: my_url,
    dataType: 'jsonp',
    success: function(obj) {
      successCallback(obj, "success");
    },
    error: function(obj) {
      errorCallback(obj, "error");
    },
  });
}

// This function will be called if our request is successful.
function successCallback(data, strStatus) {

  // example: displaying all data to the textarea
  document.getElementById("output").innerHTML = "";
  $.each(data.datastreams, function(i, item) {
    var message = "sensor " + i + ": " + item.values[0].value;
    document.getElementById("output").innerHTML += message + "\n";
  });

  // example: displaying a specific item
  document.getElementById("sensor_0").innerHTML = data.datastreams[0].values[0].value;
}

function errorCallback(XMLHttpRequest, strStatus, errorThrown) {
   document.getElementById("output").innerHMTL += "Status: "+strStatus +
      "<br>Error thrown: " + errorThrown +
      "<br>object: " + XMLHttpRequest;
}

setInterval(getOutputFromPachube, 15000); // reload every 15 seconds
</script>

<textarea id="output" cols="50" rows="10"></textarea>

<table>
  <tr>
    <td><strong>Sensor 0 value: </strong></td>
    <td><span id="sensor_0"></span></td>
  </tr>
</table>
</body>
</html>
	<!--

	livedata.html

	A demonstration of live data loading from Pachube.
	Sensor data is updated automatically using AJAX, without needing to manually reload the page.

	This demo requires jQuery, a popular JavaScript framework.
	Download it from http://code.jquery.com/jquery-1.4.2.min.js
	and save it in the same directory as this HTML page.

	-->
	<html>
	<head>
	<title>Pachube live reloading demo</title>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

	</head>
	<body onload="getOutputFromPachube();">
	<script type="text/javascript">
	var api_key = 'YOUR_PACHUBE_API_KEY_HERE';
	var feed_id = 504; // replace this with the ID of your feed
	var my_url = "http://www.pachube.com/api/feeds/"+feed_id+".json?key="+api_key;

	function getOutputFromPachube() {
	$.ajax({
	url: my_url,
	dataType: 'jsonp',
	success: function(obj) {
	successCallback(obj, "success");
	},
	error: function(obj) {
	errorCallback(obj, "error");
	},
	});
	}

	// This function will be called if our request is successful.
	function successCallback(data, strStatus) {

	// example: displaying all data to the textarea
	document.getElementById("output").innerHTML = "";
	$.each(data.datastreams, function(i, item) {
	var message = "sensor " + i + ": " + item.values[0].value;
	document.getElementById("output").innerHTML += message + "\n";
	});

	// example: displaying a specific item
	document.getElementById("sensor_0").innerHTML = data.datastreams[0].values[0].value;
	}

	function errorCallback(XMLHttpRequest, strStatus, errorThrown) {
	document.getElementById("output").innerHMTL += "Status: "+strStatus +
	"<br>Error thrown: " + errorThrown +
	"<br>object: " + XMLHttpRequest;
	}

	setInterval(getOutputFromPachube, 15000); // reload every 15 seconds
	</script>

	<textarea id="output" cols="50" rows="10"></textarea>

	<table>
	<tr>
	<td><strong>Sensor 0 value: </strong></td>
	<td><span id="sensor_0"></span></td>
	</tr>
	</table>
	</body>
	</html>