more graph work

app.js

@@ -56,6 +56,7 @@ app.use(function(req, res, next) {
 
 // development error handler
 // will print stacktrace
+
 /*
 if (app.get('env') === 'development') {
   app.use(function(err, req, res, next) {

models/temperature.js

@@ -3,7 +3,7 @@ var mongoose = require('mongoose');
 var temperatureSchema = new mongoose.Schema({
 	temperature: Number,
 	humidity: Number,
-	location: String,
+	location: {type : String, default : "Undefined Location"},
 	updated: {type: Date, default: Date.now}
 });
 

public/javascripts/sensor_information.js

@@ -1,15 +1,51 @@
 $(document).ready(function(){	
 
+	displayChart("#info-chart-year", "#legend-year", 2015, null);
+	displayChart("#info-chart-month", "#legend-month", 2015, 9);
+
+});
+
+$("#option-year").on("change", function(){
+
+	var year = this.value;
+
+	displayChart("#info-chart-year", "#legend-year", year, null);
+
+});
+
+$("#option-month").on("change", function(){
+
+	var text = this.options[this.selectedIndex].text;
+	var month = this.value;
+	var year = text.substring(text.length, text.length -4);
+
+	displayChart("#info-chart-month", "#legend-month", year, month);
+	
+});
+
+function displayChart(chart_id, chart_legend_id, year, month){
+
 	Chart.defaults.global.responsive = true;
 
 	var loc = $("#sensor-location").text();
-	console.log(loc);
 	loc = loc.split().join("+");
 
-	$.get("/api/sensorbylocation?location=" + loc, function(request){
+	var api_url = "/api/sensorbylocation";
+
+	if (month ==null){
+		api_url += "/year?location=" + loc + "&year=" + year;
+	}
+
+	else {
+		api_url += "/month?location=" + loc + "&month=" + month + "&year=" + year;
+		console.log("api 2");
+	}
+
+	$.get(api_url, function(request){
 
 		var json = request;
 		var data = {labels : [], datasets : []};
+		console.log(json);
 
 		data.datasets.push({
             label: "Max Temperature",
@@ -33,46 +69,180 @@ $(document).ready(function(){
         });
 
 		for (var i in json){
-			data.labels.push(json[i]._id.month + "/" + json[i]._id.day + "/" + json[i]._id.year);
+
+			if (month == null){
+				data.labels.push(json[i]._id.month + "/" + json[i]._id.day);
+			}
+			else {
+				data.labels.push(json[i]._id.day);
+			}
+
 			data.datasets[0].data.push(json[i].max);
 			data.datasets[1].data.push(json[i].min);
 		}
 
-		
-
-
 		// Get context with jQuery - using jQuery's .get() method.
-		var ctx = $("#info-chart").get(0).getContext("2d");
+		var ctx = $(chart_id).get(0).getContext("2d");
 		// This will get the first returned node in the jQuery collection.
 		var myLineChart = new Chart(ctx).Line(data);
 
+		$(chart_legend_id).html(myLineChart.generateLegend());
+
 	});
 
+}
 
-});
 
-var test123 = {
+
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
+
-    datasets: [
+
-        {
+
-            label: "My First dataset",
+
-            fillColor: "rgba(220,220,220,0.2)",
+
-            strokeColor: "rgba(220,220,220,1)",
+
-            pointColor: "rgba(220,220,220,1)",
+
-            pointStrokeColor: "#fff",
+
-            pointHighlightFill: "#fff",
+
-            pointHighlightStroke: "rgba(220,220,220,1)",
+
-            data: [65, 59, 80, 81, 56, 55, 40]
+
-        },
+
-        {
+
-            label: "My Second dataset",
+
-            fillColor: "rgba(151,187,205,0.2)",
+
-            strokeColor: "rgba(151,187,205,1)",
+
-            pointColor: "rgba(151,187,205,1)",
+
-            pointStrokeColor: "#fff",
+
-            pointHighlightFill: "#fff",
+
-            pointHighlightStroke: "rgba(151,187,205,1)",
+
-            data: [28, 48, 40, 19, 86, 27, 90]
+Chart.defaults.global = {
-        }
+    // Boolean - Whether to animate the chart
-    ]
+    animation: true,
-};
+
+    // Number - Number of animation steps
+    animationSteps: 60,
+
+    // String - Animation easing effect
+    // Possible effects are:
+    // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
+    //  easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
+    //  easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
+    //  easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
+    //  easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
+    //  easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
+    //  easeOutElastic, easeInCubic]
+    animationEasing: "easeOutQuart",
+
+    // Boolean - If we should show the scale at all
+    showScale: true,
+
+    // Boolean - If we want to override with a hard coded scale
+    scaleOverride: false,
+
+    // ** Required if scaleOverride is true **
+    // Number - The number of steps in a hard coded scale
+    scaleSteps: null,
+    // Number - The value jump in the hard coded scale
+    scaleStepWidth: null,
+    // Number - The scale starting value
+    scaleStartValue: null,
+
+    // String - Colour of the scale line
+    scaleLineColor: "rgba(0,0,0,.1)",
+
+    // Number - Pixel width of the scale line
+    scaleLineWidth: 1,
+
+    // Boolean - Whether to show labels on the scale
+    scaleShowLabels: true,
+
+    // Interpolated JS string - can access value
+    scaleLabel: "<%=value%>",
+
+    // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
+    scaleIntegersOnly: true,
+
+    // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
+    scaleBeginAtZero: false,
+
+    // String - Scale label font declaration for the scale label
+    scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+
+    // Number - Scale label font size in pixels
+    scaleFontSize: 12,
+
+    // String - Scale label font weight style
+    scaleFontStyle: "normal",
+
+    // String - Scale label font colour
+    scaleFontColor: "#666",
+
+    // Boolean - whether or not the chart should be responsive and resize when the browser does.
+    responsive: false,
+
+    // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
+    maintainAspectRatio: true,
+
+    // Boolean - Determines whether to draw tooltips on the canvas or not
+    showTooltips: true,
+
+    // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
+    customTooltips: false,
+
+    // Array - Array of string names to attach tooltip events
+    tooltipEvents: ["mousemove", "touchstart", "touchmove"],
+
+    // String - Tooltip background colour
+    tooltipFillColor: "rgba(0,0,0,0.8)",
+
+    // String - Tooltip label font declaration for the scale label
+    tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+
+    // Number - Tooltip label font size in pixels
+    tooltipFontSize: 14,
+
+    // String - Tooltip font weight style
+    tooltipFontStyle: "normal",
+
+    // String - Tooltip label font colour
+    tooltipFontColor: "#fff",
+
+    // String - Tooltip title font declaration for the scale label
+    tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+
+    // Number - Tooltip title font size in pixels
+    tooltipTitleFontSize: 14,
+
+    // String - Tooltip title font weight style
+    tooltipTitleFontStyle: "bold",
+
+    // String - Tooltip title font colour
+    tooltipTitleFontColor: "#fff",
+
+    // Number - pixel width of padding around tooltip text
+    tooltipYPadding: 6,
+
+    // Number - pixel width of padding around tooltip text
+    tooltipXPadding: 6,
+
+    // Number - Size of the caret on the tooltip
+    tooltipCaretSize: 8,
+
+    // Number - Pixel radius of the tooltip border
+    tooltipCornerRadius: 6,
+
+    // Number - Pixel offset from point x to tooltip edge
+    tooltipXOffset: 10,
+
+    // String - Template string for single tooltips
+    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
+
+    // String - Template string for multiple tooltips
+    multiTooltipTemplate: "<%= value %>",
+
+    // Function - Will fire on animation progression.
+    onAnimationProgress: function(){},
+
+    // Function - Will fire on animation completion.
+    onAnimationComplete: function(){}
+
+}

public/stylesheets/style.css

@@ -249,3 +249,10 @@ a {
   max-height: 500px;
   max-width: 600px;
 }
+
+.chart-legend li span{
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin-right: 5px;
+}

routes/api.js

@@ -23,23 +23,24 @@ router.get('/allsensors', function(req, res, next) {
 
 });
 
-router.get('/sensorbylocation', function(req, res, next) {
+router.get('/sensorbylocation/year', function(req, res, next) {
 
 	var loc = req.query.location;
-	var year = req.query.year;
+	var ye = req.query.year;
 
-	if (year == null){
+	if (ye == null){
 		var date = new Date();
-		year = date.getFullYear();
+		ye = date.getFullYear();
 	}
 
 	//query finds a entries in a collection based on location and the year specified
 	//they are then grouped by date and sorted by date as well
-	temperature.aggregate([ {$match : {location : loc, updated : {$gte : new Date('1 Jan, ' + year), $lt : new Date('1 Jan ' + year +1)}}},
+	temperature.aggregate([ {$project : {location : 1, temperature : 1, year : {$year : "$updated"}, month : {$month : "$updated"}, day : {$dayOfMonth : "$updated"}}},
-							{$group : { _id : {location : "$location", month: {$month: "$updated" }, day: { $dayOfMonth: "$updated" }, year: { $year: "$updated" }},
+							{$match : {location : loc, year : parseInt(ye)}},
+							{$group : {_id : {location : "$location", day: "$day", month : "$month", year : "$year"},
 								max : {$max : "$temperature"},
 								min : {$min : "$temperature"}}},
-							{$sort : {"_id.month" : 1, "_id.day" : 1, "_id.year" : 1}}]).exec(function(err, info){
+							{$sort : {"_id.month" : 1, "_id.day" : 1}}]).exec(function(err, info){
 
 			console.log(info);
 			res.setHeader('Content-Type', 'application/json');
@@ -49,21 +50,43 @@ router.get('/sensorbylocation', function(req, res, next) {
 
 });
 
-router.post('/', function(req, res,next) {
+router.get('/sensorbylocation/month', function(req, res, next) {
+
+	var loc = req.query.location;
+	var ye = req.query.year;
+	var mo = req.query.month;
+	var date = new Date();
+
+	if (ye == null){
+		ye = date.getFullYear();
+	}
+
+	if (mo == null){
+		mo = date.getMonth();
+	}
+
+	console.log(ye + "/" + mo);
+	//query finds a entries in a collection based on location and the year specified
+	//they are then grouped by date and sorted by date as well
+	temperature.aggregate([ {$project : {location : 1, temperature : 1, year : {$year : "$updated"}, month : {$month : "$updated"}, day : {$dayOfMonth : "$updated"}}},
+							{$match : {location : loc, year : parseInt(ye), month : parseInt(mo)}},
+							{$group : {_id : {location : "$location", day: "$day", month : "$month", year : "$year"},
+										max : {$max : "$temperature"},
+										min : {$min : "$temperature"}}},
+							{$sort : {"_id.day" : 1}}]).exec(function(err, info){
+
+			console.log(info);
+			res.setHeader('Content-Type', 'application/json');
+			res.send(JSON.stringify(info, null, 4));
+
+		});
 
 });
 
+
 module.exports = router;
 
 
 
 
 
-
-
-
-
-
-
-
-

routes/sensors.js

@@ -74,9 +74,30 @@ router.get('/information', function(req, res, err){
 	if (sensor_location == null){
 		res.redirect('/404');
 	}
+	else{
+			temperature.aggregate([{$project : {location : "$location", year : {$year : "$updated"}, month : {$month : "$updated"}}},
+									{$match : {location : sensor_location}},
+									{$group : {_id : {year : "$year", month : "$month", location : "$location"}}},
+									{$sort : {"_id.year" : 1, "_id.month" : 1}}]).exec(function(err, info){
+			console.log(info);
 
-	res.render('sensor_information', {info : {location : sensor_location}});
+			//generate list of unique years to display in dropdown menu
+			var years_list = [];
 
+			for (var i in info){
+				if (years_list.indexOf(info[i]._id.year) > -1){
+
+				}
+				else {
+					years_list.push(info[i]._id.year);
+				}
+			}
+
+			res.render('sensor_information', {info, years_list});
+
+		});
+		
+	}
 });
 
 module.exports = router;

views/sensor_information.ejs

@@ -11,33 +11,54 @@
 <div class="header"></div>
 
 <% include ../public/html/navbar.html %>
-
+<% var monthNames = ["January", "February", "March", "April", "May", "June",
+  									"July", "August", "September", "October", "November", "December"]; %>
 <div class="container">
 <br>
-<h1 class="text-center" id="sensor-location"><%=info.location%></h1>
+<h1 class="text-center" id="sensor-location"><%=info[0]._id.location%></h1>
 <hr>
 <br>
-<canvas class="center" id="info-chart" width="800" height="400"></canvas>
 
+<form class="text-center form-inline">
+	<div class="form-group">
+		<label for="input-year">Year</label>
+		<select class="form-control" id="option-year">
+		<% 
+			for (var i in years_list){ %>
+				
+				<option value="<%=years_list[i]%>"><%=years_list[i]%></option>
+				
+		<% } %>
+		</select>
+	</div>
+</form>
+
+<br>
+<canvas class="center" id="info-chart-year" width="800" height="400"></canvas>
+<br>
+<div id="legend-year" class="chart-legend"></div>
+
+<form class="text-center form-inline">
+	<div class="form-group">
+		<label for="input-month">Month</label>
+		<select class="form-control" id="option-month">
+			<% 
+			for (var i in info){ %>
+				
+				<option value="<%=info[i]._id.month%>"><%=monthNames[info[i]._id.month -1] + ", " + info[i]._id.year%></option>
+				
+			<% } %>
+		</select>
+	</div>
+</form>
+
+<br>
+<h2 class="text-center">Month</h2>
+<canvas class="center" id="info-chart-month" width="800" height="400"></canvas>
+<br>
+<div id="legend-month" class="chart-legend"></div>
 </div>
 
-
-
-
-
-
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
 <br>
 <br>
 
@@ -49,6 +70,7 @@
 	<a href="http://glyphicons.com/" target="_blank"><span>glyphicons.com</span></a>
 </footer>
 
+
 </body>
 	
 	<% include layoutBottom.ejs %>