mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-11 18:32:50 +00:00
Code Issues Releases Wiki Activity

more graph work

Browse Source
This commit is contained in:
mgerb42
2015-12-20 21:11:54 -06:00
parent 700ecf3e75
commit daab977655
7 changed files with 316 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app.js
View File

@@ -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) {

2
models/temperature.js
View File

@@ -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}
});

238
public/javascripts/sensor_information.js
View File

@@ -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(){}
}

7
public/stylesheets/style.css
View File

@@ -248,4 +248,11 @@ a {
.gist-data{
max-height: 500px;
max-width: 600px;
}
.chart-legend li span{
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
}

55
routes/api.js
View File

@@ -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)}}},
{$group : { _id : {location : "$location", month: {$month: "$updated" }, day: { $dayOfMonth: "$updated" }, year: { $year: "$updated" }},
temperature.aggregate([ {$project : {location : 1, temperature : 1, year : {$year : "$updated"}, month : {$month : "$updated"}, day : {$dayOfMonth : "$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;

23
routes/sensors.js
View File

@@ -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;

62
views/sensor_information.ejs
View File

@@ -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 %>