<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free Responsive Templates
http://www.free-responsive-templates.com
Released for free under a Creative Commons Attribution 3.0 Unported License (CC BY 3.0)
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prior Prime Dashboard</title>
<link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<!-- EXTERNAL LIBS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script>
// onload callback
function drawChart() {
var public_key = 'G2pRD1LNAqirE1JwYg1A';
// JSONP request
var jsonData = $.ajax({
url: 'https://data.sparkfun.com/output/' + public_key + '.json',
data: {page: 1},
dataType: 'jsonp',
}).done(function (results) {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature');
$.each(results, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.analog_temperature),
]);
});
var chart = new google.visualization.LineChart($('#chart').get(0));
chart.draw(data, {
title: 'Autoclave Temperature',
curveType: 'function',
legend: { position: 'bottom' }
});
});
var jsonData2 = $.ajax({
url: 'https://data.sparkfun.com/output/' + public_key + '.json',
data: {'gte' :{'timestamp' : 'now - 6 hours'}},
dataType: 'jsonp',
}).done(function (results) {
var data2 = new google.visualization.DataTable();
data2.addColumn('datetime', 'Time');
data2.addColumn('number', 'Analog Voltage');
$.each(results, function (i, row) {
data2.addRow([
(new Date(row.timestamp)),
parseFloat(row.analog_v1),
]);
});
var chart2 = new google.visualization.LineChart($('#chart2').get(0));
chart2.draw(data2, {
title: 'Autoclave Analog Voltage 1',
curveType: 'function',
legend: { position: 'bottom' }
});
});
}
// load chart lib
google.load('visualization', '1', {
packages: ['corechart']
});
// call drawChart once google charts is loaded
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<!-- begin #header -->
<div id="header">
<div id="navcontainer">
<div id="navcontainerBox">
<h1><img src="http://www.priorclave.co.uk/a/img/global/logo.png"> Dashboard</h1>
<ul id="navlist">
<li id="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
</ul>
</div>
</div>
<div class="girlContainer">
<h1>Statistics</h1>
<form>
<table style="width:75%">
<tr>
<td>Autoclave Name:</td>
<td><input type="text" name="AutoclaveName" value="Sea Cucumber" size="20" readonly></td>
</tr>
<tr>
<td>Cycle Count:</td>
<td><input type="text" name="CycleCount" value="345" size="20" readonly></td>
</tr>
<tr>
<td>Average Cycle Water Consumption: </td>
<td><input type="text" name="AverageWater" value="0" size="20" readonly>Gallons / Cylce</td>
</tr>
<tr>
<td>Average Cycle Electricity Consumption:</td>
<td><input type="text" name="AverageElectricity" value="22.3" size="20" readonly>Watts / cycle</td>
</tr>
<tr>
<td>Idle Water Consumption: </td>
<td><input type="text" name="IdleWater" value="1.2345" size="20" readonly>Gallons</td>
</tr>
<tr>
<td>Idle Electricity Consumption:</td>
<td><input type="text" name="IdleElectricty" value="12" size="20" readonly> Watts</td>
</tr>
<tr>
<td> Current Machine Status:</td>
<td><input type="text" name="Status" value="Idle" size="20" readonly></td>
</tr>
<tr>
<td>Faults:</td>
<td><input type="text" name="Faulys" value="None" size="20" readonly></td>
</tr>
<tr>
<td>Select Cycle To Graph</td>
<td>
<select name="Cycles">
<option value="C1">Cycle 1</option>
<option value="C2">Cycle 2</option>
<option value="C3">Cycle 3</option>
<option value="C4">Cycle 4</option>
</select>
</td>
</tr>
</table>
</form>
</div>
<div class="clearer"></div>
</div>
</div>
<!-- end #header -->
<!-- begin #container -->
<div id="container">
<!-- begin #mainContent -->
<div id="mainContent">
<h2>Graph One</h2>
<p>
<div id="chart" style="width: 100%;"></div>
<h2>Graph Two</h2>
<p>
<div id="chart2" style="width: 100%;"></div>
</p>
<div class="clearer"></div>
</div>
<!-- end #mainContent -->
</div>
<!-- end #container -->
</div>
<!-- end #container -->
<!-- begin #footer -->
<div id="footer">
<p>
Copyright © Josh Corp. All rights reserved. Designed by <a href="http://www.free-responsive-templates.com" title="free responsive templates">Free Responsive Templates</a>
</p>
</div>
<!-- end #footer -->
</body>
</html>