Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
220 lines (187 sloc) 7.49 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Remote Garden Sensor" content="">
<meta name="GeekSkunk" content="">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<link type="text/css" rel="stylesheet" href="css/graph.css">
<link type="text/css" rel="stylesheet" href="css/detail.css">
<link type="text/css" rel="stylesheet" href="css/legend.css">
<link type="text/css" rel="stylesheet" href="css/lines.css">
<script src="vendor/d3.min.js"></script>
<script src="vendor/d3.layout.min.js"></script>
<script src="rickshaw.min.js"></script>
<script src="vendor/moment.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<script src="http://d23cj0cdvyoxg0.cloudfront.net/xivelyjs-1.0.3.min.js"></script>
<title>MyGardenSpy</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<script>
// Set your API key first
xively.setKey( "hKcMzj9z2zXxwSKr8pvvyCdrsKnhdajFA7ocUt8xWLJOjsA8" );
var startOfYesterday = moment().subtract("day", 31).startOf('day');
var endOfYesterday = moment().startOf('day');
console.log(startOfYesterday);
console.log(endOfYesterday);
var query = {
start: startOfYesterday.toJSON(),
end: endOfYesterday.toJSON(),
interval: 3600,
// Reference https://xively.com/dev/docs/api/quick_reference/historical_data/
limit: 1000
};
xively.datastream.history( "1824193320", "bat_case", query, loadData);
function loadData(data) {
var unit = data.unit.label;
var series = [];
var filtedData = data.datapoints.filter(function(x) { return (x.value < 10000); });
for (var i=0; i < filtedData.length; i++ ) {
var date = moment(filtedData[i].at);
var value = parseInt(filtedData[i].value);
series[i] = {x: date.unix(), y: value};
}
drawGraph(series, unit);
}
function drawGraph(data, unit) {
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart1"),
width: 640,
height: 400,
renderer: 'line',
series: [
{
data: data,
color: '#6060c0',
name: unit
}
]
} );
graph.render();
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph
} );
var legend = new Rickshaw.Graph.Legend( {
graph: graph,
element: document.getElementById('legend')
} );
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
graph: graph,
legend: legend
} );
var axes = new Rickshaw.Graph.Axis.Time( {
graph: graph
});
axes.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph
});
yAxis.render();
}
</script>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">MyGardenSpy</a>
</div>
<div class="navbar-collapse collapse">
<form>
<ul class="nav navbar-nav navbar-left">
<li><a href="index.html">Current Conditions</a></li>
<li><a href="historical.html">Historical Data</a></li>
<li><a href="hardware.html">Hardware Status</a></li>
<li><a href="about.html">About</a></li>
</ul>
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a href="index.html">Current Conditions</a></li>
<li class="active"><a href="historical.html">Historical Data</a></li>
<li><a href="hardware.html">Hardware Status</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Historical Data</h1>
<span class="text-muted">Select Data Type, then Time Frame </span>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Data Type<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="historical.html">Air Temp</a></li>
<li><a href="historical_ground_1m.html">Ground Temp</a></li>
<li><a href="historical_soilm_1m.html">Soil Moisture</a></li>
<li><a href="historical_station_1m.html">Station Case</a></li>
<li><a href="historical_bat_1m.html">Battery Case</a></li>
<li><a href="historical_volt_1m.html">Battery Voltage</a></li>
<li><a href="historical_rssi_1m.html">Remote RSSI</a></li>
<li><a href="historical_remcpu_1m.html">Remote RPi CPU</a></li>
<li><a href="historical_basecpu_1m.html">Base RPi CPU</a></li>
</ul>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="historical_bat_1m.html">1 Month</a></li>
<li><a href="historical_bat_3m.html">3 Months</a></li>
<li><a href="historical_bat_12m.html">1 Year</a></li>
</ul>
<div class="row placeholders">
<!-- Main Content -->
<div id="main_content_wrap" class="outer">
<h4>Battery Case Temp</h4>
<section id="main_content" class="inner" style="height: 480px">
<div id="chart_container" >
<div id="chart1"></div>
<div id="legend_container">
<div id="smoother" title="Smoothing"></div>
<div id="legend"></div>
</div>
<div id="slider"></div>
</div>
</section>
<p>Historical graphs powered by <a href="https://github.com/jasonneylon/xively-rickshaw" target="_blank">xively-rickshaw</a></p>
</div>
<div class="row placeholders">
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--Not sure I need with my code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> -->
<script src="./js/bootstrap.min.js"></script>
<script src="./js/docs.min.js"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2526212-6', 'mygardenspy.com');
ga('send', 'pageview');
</script>
</body>
</html>