Oh, this is fantastic. You guys are really making progress and in a very good direction.
I 'stole' your temperature charting code. I made a few changes to make it more easily customizable for other users. I'm including the altered code. Anyone who wants to chart their own temperatures it's really easy.
1) copy and past the code into a file on your computer named MyTempChart.html
(if you Double click the file as is, you will see the ioBridge server's data.)
2) To point the chart at your own data: open the file with a text editor like textedit (or notepad for Windows users) and change 4 variables:
TempChannel : The channel the temperature probe is plugged into. This is zero based so if you plugged your temp sensor into channel 1 don't put 1, put 0.
MinTemp, MaxTemp: The minimum and maximum temp you want to be able to chart. If your temp is outside of these ranges the chart will just peg.
ioBridgeFeedURL: Login to ioBridge , go to your Modules, under actions there is a Feed link. Copy this link. Should be something like:
http://www.iobridge.com/interface/feed/FD_0BosKdymNbB3LyiFYUVII was able to copy the link by right clicking and choosing copy link location but if you don't use Firefox it will be slightly different.
Save the file and double click it. There you go.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<script type="text/javascript">
// THESE ARE CUTOMIZABLE
var ChartTitle = "IOBridge Temp Feed";
var ioBridgeFeedURL = "http://www.iobridge.com/interface/feed/FD_0BosKdymNbB3LyiFYUVI";
var MinTemp = 90;
var MaxTemp = 115;
var TempChannel = 0; //The channel the temperature probe is plugged into. NOTE: zero based. This is 0-3, not 1-4.
var PollingPeriod = 10; //seconds
</script>
<head>
<title>IOBridge Temperature Graph</span></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("feeds", "1");
</script>
<script type="text/javascript">
var MaxDataLength = 1800;
var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
function simpleEncode(valueArray) {
var chartData = [];
var encodingStart = valueArray.length - MaxDataLength;
if (encodingStart < 0) {
encodingStart = 0;
}
for (var i = encodingStart; i < valueArray.length ; i++) {
var currentValue = valueArray[i];
if (!isNaN(currentValue) && currentValue >= 0) {
if (currentValue > MaxTemp )
chartData.push('9');
else if (currentValue < MinTemp )
chartData.push('A');
else
chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * (currentValue - MinTemp) / (MaxTemp - MinTemp) )));
}
else {
chartData.push('_');
}
}
return chartData.join('');
}
function my_state() { }
function storeTemp(temp) {
$("#my_mirror").text(temp);
my_state.values.push(temp);
}
function updateGraph(temp) {
var chart_url = "http://chart.apis.google.com/chart?"
var chart_type = "cht=lc";
var chartSec = my_state.values.length - 1;
chartSec = chartSec * 10;
var chart_size = "&chs=400x400&chtt="+ChartTitle+"&chds=0,"+simpleEncoding.length+"&chxt=x,y,x,y&chxl=2:||Time (s)||3:|||Degrees (F)||&chxr=1,"+MinTemp+","+MaxTemp+"|0,0,"+chartSec;
if (my_state.values.length > 1)
var chart_data = "&chd=s:"+ simpleEncode(my_state.values);
else
var chart_data = "&chd=s:"+ simpleEncode(my_state.values) + simpleEncode(my_state.values);
var url = chart_url + chart_type + chart_size + chart_data;
var i = $("<img>").attr("src", url);
$("#data_graph").empty().append(i);
}
function checkTemp() {
$.getJSON(ioBridgeFeedURL + "&callback=?",
function (data) {
storeTemp(data.module.channels[TempChannel].AnalogInput);
updateGraph();
});
}
$(document).ready(function() {
my_state.values = [];
checkTemp();
$("#my_pollingperiod").text(PollingPeriod);
$("#my_charttitle").text(ChartTitle);
my_state.check_interval = setInterval("checkTemp()", PollingPeriod * 1000);
});
</script>
</head>
<body>
<div id="container">
<div id="data_graph"> </div> <p>
<div id="header" >
Current Temperature is <span id="my_mirror"></span>°F<br><br>
This chart will automatically add another data point every <span id="my_pollingperiod"></span> seconds.
</div>
</div>
</body>
</html>
