tempStats.html HTML Source View


<!!DOCTYPE html>>
<html>
<head>
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="styles/jquery.mobile-1.0b2.min.css" />
	<link rel="stylesheet" href="styles/eth.css" />
	<script src="styles/jquery-1.6.4.min.js" type="text/javascript"></script> 
	<script src="styles/json2.min.js" type="text/javascript"></script> 
	<script src="styles/jquery.mobile-1.0b2.min.js" type="text/javascript"></script> 
	<script src="styles/RGraph.common.core.js" type="text/javascript"></script> 
	<script src="styles/RGraph.common.dynamic.js" type="text/javascript"></script> 
	<script src="styles/RGraph.common.tooltips.js" type="text/javascript"></script> 
	<script src="styles/RGraph.common.key.js" type="text/javascript"></script> 
    <script src="styles/RGraph.line.js" type="text/javascript"></script> 
</head>
<body>
	<div data-role="page" id="tempStatTopPage" data-title="Temperature Statistics - My Wireless Tag List">

		<div data-role="header" data-theme="d" data-position="inline">
			<a href="index.html" data-icon="delete" data-iconpos="notext" data-ajax="false">Cancel</a>
			<h1>Temperature Statistics</h1>
			<a class="ui-btn-right" id="download_temp_csv" data-icon="arrow-d" data-ajax=0 data-theme="b">Download CSV</a>
		</div>
		<div id="tempStatGraphs" style="margin-left:2%; margin-right: 2%;">
			
		</div>
	<script src="styles/client.js" type="text/javascript"></script> 
	<script type="text/javascript">
		var params = (window.location.search.length > 0 ? window.location.search.substring(1) : localStorage["mytaglist.stats.slaveid"]).split('&');
		var slaveId = params[0];
		$("#download_temp_csv").click(function () {
			window.location = "/ethDownloadTempCSV.aspx?id=" + slaveId;
		});

		Array.prototype.sum = function () {
			for (var i = 0, sum = 0; i < this.length; sum += this[i++]);
			return sum;
		}
		Array.prototype.average = function () {

			var n = 0;
			for (var i = 0, sum = 0; i < this.length; i++) {
				if (this[i]) {
					sum += this[i]; n++;
				}
			}
			return Math.round(sum * 10 / n) / 10;
		}

		function createOneDayGraph(stat, ymax2, ymin2) {
			var cvsid = "day_" + stat.date.replace(/\//g, '_');

			$("<canvas height=150></canvas>").data('date', stat.date).attr("id", cvsid)
			.attr("width", window.innerWidth * 0.95)
			.css("text-align", "center").appendTo($("#tempStatGraphs"));

			line3 = new RGraph.Line(cvsid, stat.temps);
			line3.Set('chart.tooltips', $.map(stat.temps, function (degf, i) { return Math.round(degf*10)/10 + "°F/" + Math.round((degf - 32) * 5.0 / 9.0 * 10) / 10 + "°C" }));

			line3.Set('chart.gutter.left', 30);
			line3.Set('chart.gutter.right', 30);
			line3.Set('chart.yaxispos', 'right');
			line3.Set('chart.tooltips.event', 'onclick');

			line3.Set('chart.background.grid', true);
			line3.Set('chart.background.grid.autofit.numvlines', 23);

			line3.Set('chart.units.post', '°F');

			line3.Set('chart.ymax', ymax2);
			line3.Set('chart.ymin', ymin2);
			line3.Set('chart.colors', ['red', 'blue']);
			line3.Set('chart.key', ['Temperature (°F)', 'Battery voltage (V)']);
			line3.Set('chart.key.position.x', 35);
			line3.Set('chart.key.background', 'rgba(255,255,255,0.5)');
			line3.Draw();

			line2 = new RGraph.Line(cvsid, stat.batteryVolts);
			line2.Set('chart.tooltips', $.map(stat.batteryVolts, function (v, i) { return Math.round(v*100)/100 + " volts"}));
			line2.Set('chart.background.grid', false);
			line2.Set('chart.tooltips.event', 'onclick');

			line2.Set('chart.gutter.left', 30);
			line2.Set('chart.gutter.right', 30);
			line2.Set('chart.labels', ['12AM', '', '', '3', '', '', '6AM', '', '', '9', '', '', '12PM', '', '', '3', '', '', '6PM', '', '', '9', '', '']);
			line2.Set('chart.units.post', 'V');
			line2.Set('chart.ymax', 3.1);
			line2.Set('chart.ymin', 2.4);
			line2.Set('chart.scale.decimals', 1);

			line2.Set('chart.title', stat.date + " (Average: " + stat.temps.average() + "°F)");
			line2.Set('chart.colors', ['blue']);
			line2.Draw();

		}

		var $loader = $("<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1>Loading Statistics...</h1></div>");
		$body = $("body");
		$loader.appendTo($body).css({ top: 100 });
		$body.addClass("ui-loading");

		var statData;
		var ymin2 = new Array(), ymax2 = new Array();

		function loadStats() {
			$.ajax({
				url: WSROOT + "ethLogs.asmx/GetTemperatureStats",
				/*beforeSend: function (xhr) {
				if (params.length > 1)
				xhr.setRequestHeader("Cookie", params[1]);
				},*/
				data: JSON.stringify({ "id": slaveId }),
				success: function (retval, textStatus) {
					statData = retval.d;
					for (var i = 0; i < statData.length; i++) {
						ymin2[i] = 220; ymax2[i] = -28;
						statData[i].temps = $.map(statData[i].temps, function (degC, i) { return degC == 0 ? NaN : degC * 9.0 / 5.0 + 32.0; });
						for (var j = 0; j < statData[i].temps.length; j++) {
							var degf = statData[i].temps[j];
							if (isNaN(degf)) continue;
							ymax2[i] = Math.max(degf, ymax2[i]);
							ymin2[i] = Math.min(degf, ymin2[i]);
						}
						ymax2[i] = Math.min(220, ymax2[i]);
						ymax2[i] = Math.ceil(ymax2[i] / 5 + 0.5) * 5;
						ymin2[i] = Math.floor(ymin2[i] / 5 - 0.5) * 5;
					}

					for (var i = 0; i < statData.length; i++) {
						createOneDayGraph(statData[i], ymax2[i], ymin2[i]);
					}
					window.addEventListener('resize', function () {
						if ($.mobile.activePage[0].id == 'tempStatTopPage') {

							$("canvas").remove();
							for (var i = 0; i < statData.length; i++) {
								createOneDayGraph(statData[i], ymax2[i], ymin2[i]);
							}
						}
					}, false);

					//$body.removeClass("ui-loading");
					$loader.remove();
				},
				error: function (xhr, textStatus, exception) {
					//$body.removeClass("ui-loading");
					$loader.remove();

					popup_error(xhr, $body);
				}
			});
		}
		if (params.length > 1) {
			$.ajax({
				url: WSROOT + "ethAccount.asmx/ReflectAspxAuthCookie",
				data: JSON.stringify({ "cookie": params[1] }),
				success: function (retval, textStatus) {
					loadStats();
				}
			});
		}
		else 
		{
			loadStats();
		}

	</script> 
	</div>

</body>
</html>