stats.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> 

	<link rel="stylesheet" href="styles/demo_table.css" />
    <script src="styles/jquery.dataTables.js" type="text/javascript"></script> 
</head>
<body>
	<div data-role="page" id="statTopPage" data-title="Door 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>Door Statistics</h1>
			<a class="ui-btn-right" id="download_event_csv" data-icon="arrow-d" data-ajax=0 data-theme="b">Download CSV</a>
		</div>
		<div id="statGraphs" >
			
		</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_event_csv").click(function () {
			window.location = "/ethDownloadMotionCSV.aspx?id=" + slaveId;
		});

		function TimeOfDayString(sec) {
			var str = '';
			var ampm = Math.floor(sec / 3600 / 12);
			var hours = Math.floor(sec / 3600);
			var min = Math.round((sec-hours*3600) / 60);
			var min_str = "00"+min;
			return "{0}:{1} {2}".format(hours%12, min_str.substr(min_str.length-2), ampm ? "PM" : "AM");
		}
		function DetailedTimeSpanString(sec) {
			var str='';
			var days = Math.floor(sec / 60 / 60 / 24);
			if (days >= 1) { str = days + " days "; sec -= days * 60 * 60 * 24 }
			var hours = Math.floor(sec / 60 / 60);
			if (hours >= 1) { str = str + hours + " hours "; sec -= hours * 60 * 60 }
			var min = Math.floor(sec / 60);
			if (min >= 1) { str = str + min + " minutes "; sec -= min * 60 }
			str = str + Math.round(sec) + " seconds";
			return str;
		}
		jQuery.fn.dataTableExt.oSort['title-numeric-asc'] = function (a, b) {
			var x = a.match(/title="*(-?[0-9\.]+)/)[1];
			var y = b.match(/title="*(-?[0-9\.]+)/)[1];
			x = parseFloat(x);
			y = parseFloat(y);
			return ((x < y) ? -1 : ((x > y) ? 1 : 0));
		};

		jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function (a, b) {
			var x = a.match(/title="*(-?[0-9\.]+)/)[1];
			var y = b.match(/title="*(-?[0-9\.]+)/)[1];
			x = parseFloat(x);
			y = parseFloat(y);
			return ((x < y) ? 1 : ((x > y) ? -1 : 0));
		};
		Array.prototype.sum = function () {
			for (var i = 0, sum = 0; i < this.length; sum += this[i++]);
			return sum;
		}
		/*Array.prototype.average = function () {
			return this.sum()/this.length;
		}*/

		function createOneDayGraph(stat, ymax1, ymax2) {
			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").bind('click', function (event) {
				var date = $(event.target).data('date');
				$.ajax({
					url: WSROOT + "ethLogs.asmx/GetDetailLog",
					/*beforeSend: function (xhr) {
					if(params.length > 1)
					xhr.setRequestHeader("Cookie", params[1]);
					},*/
					data: JSON.stringify({ "id": slaveId, "date": date }),
					success: function (retval, textStatus) {
						/*var dataSource = new Array();
						for (var i = 0; i < retval.d.length; i++) {
						var ee = retval.d[i];
						dataSource.push([ee.datetime, ee.eventType, ee.durationSec]);
						}*/
						//"aaData": dataSource,

						$("#statDetailTitle").text(date);
						var oTable = $('#detailTable').dataTable({
							"bFilter": false,
							"bRetrieve": true,
							"bPaginate": false,
							"aoColumnDefs": [
								{ "aTargets": [0],
									"asSorting": [ "asc", "desc" ],
									"fnRender": function (o) {
										return "<span title=" + o.aData[0] + ">" + TimeOfDayString(o.aData[0]) + "</span>";
									},
									"sType": "title-numeric"
								},
								{ "sClass": "center", "aTargets": [1] },
								{ "aTargets": [2],
									"fnRender": function (oObj) {
										return "<span title=" + oObj.aData[2] + ">" + DetailedTimeSpanString(oObj.aData[2]) + "</span>";
									},
									"sType": "title-numeric",
									"sDefaultContent": "N/A"
								}
							]
						});
						oTable.fnClearTable();
						for (var i = 0; i < retval.d.length; i++) {
							var ee = retval.d[i];
							oTable.fnAddData([ee.secOfDay, ee.eventType, ee.durationSec]);
						}

						//alert($.mobile.activePage[0].id);
						$.mobile.changePage($("#statDetailPage"), { transition: "none", role: "dialog" });
						//alert($.mobile.activePage[0].id);
					}
				});
			}).appendTo($("#statGraphs"));

			line3 = new RGraph.Line(cvsid, stat.avgOpenedDuration);
			line3.Set('chart.gutter.left', 30);
			line3.Set('chart.gutter.right', 60);
			line3.Set('chart.tickmarks', 'square');
			line3.Set('chart.units.post', ' sec');
			line3.Set('chart.background.grid.autofit.numvlines', 23);
			
			line3.Set('chart.tooltips', $.map(stat.avgOpenedDuration, function(sec,i){return "Average " + DetailedTimeSpanString(sec);}));

			line3.Set('chart.yaxispos', 'right');
			line3.Set('chart.noendxtick', true);
			line3.Set('chart.background.grid', true);
			line3.Set('chart.ymax', ymax2);
			line3.Set('chart.colors', ['red','blue']);
			line3.Set('chart.key', ['Average open duration (sec)', '# of times opened']);
			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.nOpened);
			line2.Set('chart.tooltips', $.map(stat.nOpened, function(n,i){return n+" times";}));
			line2.Set('chart.background.grid', false);
			line2.Set('chart.gutter.left', 30);
			line2.Set('chart.gutter.right', 60);
			line2.Set('chart.labels', ['12AM', '', '', '3', '', '', '6AM', '', '', '9', '', '', '12PM', '', '', '3', '', '', '6PM', '', '', '9', '', '']);
			line2.Set('chart.tickmarks', 'circle');

			line2.Set('chart.ymax', ymax1);
			line2.Set('chart.noxaxis', true);
			line2.Set('chart.noendxtick', true);
			line2.Set('chart.title', stat.date + " (" + stat.nOpened.sum() + " times total)");
			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 ymax1 = new Array(), ymax2 = new Array();

		function loadStats() {
			$.ajax({
				url: WSROOT + "ethLogs.asmx/GetDoorStats",
				/*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++) {
						ymax1[i] = ymax2[i] = 0;
						for (var j = 0; j < statData[i].nOpened.length; j++) {
							ymax1[i] = Math.max(statData[i].nOpened[j], ymax1[i]);
							ymax2[i] = Math.max(statData[i].avgOpenedDuration[j], ymax2[i]);
						}
						//ymax2[i] = Math.min(3600 * 2, ymax2[i]);
						ymax1[i] = Math.ceil(ymax1[i] / 5 + 0.5) * 5;
						ymax2[i] = Math.ceil(ymax2[i] / 10 + 0.5) * 10;
					}

					for (var i = 0; i < statData.length; i++) {
						createOneDayGraph(statData[i], ymax1[i], ymax2[i]);
					}
					window.addEventListener('resize', function () {
						if ($.mobile.activePage[0].id == 'statTopPage') {
							$("canvas").remove();
							for (var i = 0; i < statData.length; i++) {
								createOneDayGraph(statData[i], ymax1[i], ymax2[i]);
							}
							//$("canvas").css("width", window.innerWidth * 0.95);
						}
					}, 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>

	<div data-role="page" id="statDetailPage" style="-webkit-user-select: auto; -webkit-touch-callout: default;">
		<div data-role="header" data-theme="d" data-position="inline">
			<h1 id="statDetailTitle"></h1>
		</div>
		<div data-role="content" data-theme="c">
			<table cellpadding="0" cellspacing="0" border="0" class="display" id="detailTable">
				<thead>
					<tr>
						<th>
							Time
						</th>
						<th>
							Type
						</th>
						<th>
							How Long
						</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>