Gauges and a line chart with gspread

Ross Olsen

unread,

Dec 30, 2014, 3:18:04 PM12/30/14

to web...@googlegroups.com

First let me thanks to Toshi for all the great help.

My project: I have a wood boiler Gasifcation type) I would like to someday control secondary air based on sensors and log these events. Right now I have one Google Gauge on my page working from a post in this group I am trying to log using gspread but that keeps crashing. I am learning little by little. I am asking for help in connecting the other ds18b20 to more gauges and logging them to display the temps. I will have : Boiler supply,Boiler return, Stack temp(going to try a ds18b20 here also) Outside air & draft status.

Here is my html, I have tried to add one more gauge and the value shows up in the devices-monitor page. I can get all three sensors to show up there now. just not in a gauge.

<html>
	<head>
	<script type="text/javascript" src="//www.google.com/jsapi"></script>
	<script type="text/javascript" src="/webiopi.js"></script>
	<script type="text/javascript">
	webiopi().ready(function() {
	//temp2 is the DS18B20 device name specified in config file
	tmp = new Temperature("temp2","temp3");{
	setInterval(updateUI,1000);

	}
	function updateUI() {
	tmp.getFahrenheit(temperatureCallback);
	}
	// callback function used to display the temperature
	function temperatureCallback(tmp, data) {
	// jQuery functions
	gaugeData.setValue(0, 0, data);
	gauge.draw(gaugeData, gaugeOptions);
	}
	});
	</script>
	<script type="text/javascript">
	google.load('visualization', '1', {packages: ['gauge']});
	google.setOnLoadCallback(drawGauge);
	var gaugeOptions = {min: 10, max: 260, yellowFrom: 150, yellowTo: 170,
	redFrom: 170, redTo: 260, minorTicks: 5};
	var gauge;
	function drawGauge() {
	gaugeData = new google.visualization.DataTable();
	gaugeData.addColumn('number', 'Boiler');
	gaugeData.addColumn('number', 'Return');
	gaugeData.addRows(1);
	gaugeData.setCell(0, 0, 0);
	gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));{
	gauge.draw(gaugeData, gaugeOptions);
	}
	}
	</script>
	</head>
	<body>
	<div id="gauge_div" style="width:480px; height: 240px;"></div>

	<iframe src="https://docs.google.com/spreadsheets/d/1-Dfaev5kOZJLwUJ0aesLR7ZkPoMhUc8IMhxh9nFK_Jc/pubchart?oid=1350726221&format=interactive"></iframe>

	</body>
	</html>