Skip to content

Instantly share code, notes, and snippets.

@tmeissner
Last active December 20, 2015 08:49
Show Gist options
  • Save tmeissner/6103607 to your computer and use it in GitHub Desktop.
Save tmeissner/6103607 to your computer and use it in GitHub Desktop.
draw a nice chart of measured temperatures with the help of highchart.js
// variable to en-/disable debug
// set to 1 to enable debug log
if (DEBUG === undefined) {
var DEBUG = 0;
}
// wrap all in anonymous function to get out of global scope
(function () {
"use strict";
var target = document.getElementById("container"),
current = document.getElementById("current"),
minimal = document.getElementById("minimal"),
maximal = document.getElementById("maximal"),
pwdForm = document.getElementById("pwd-form"),
pwd = document.getElementById("q"),
period = document.getElementById("period"),
room = [],
cpu = [],
cpuroom = [];
// our little chart object
var chart = {
getData : function (event) {
// prevent submit default behaviour
event.preventDefault();
var serverUrl = encodeURI("../cgi-bin/raspiweb.py?pwd=" + B64.encode(pwd.value) + "&period=" + period.selectedIndex);
// get the data from the server with an ajax call
gcf.ajaxCall(serverUrl, target, chart.processData, "json", "post");
},
processData : function (data) {
room = [],
cpu = [];
cpuroom = [];
if (data["pwdvalid"] === 1) {
var raspitemp = data["cpu"],
roomtemp = data["room"],
timescale = data["time"],
year, month, day, hour, min, sec;
for (var index = 0; index < timescale.length; index++) {
year = parseInt(timescale[index].slice(0,4), 10);
month = parseInt(timescale[index].slice(5,7), 10);
day = parseInt(timescale[index].slice(8,10), 10);
hour = parseInt(timescale[index].slice(11,13), 10);
min = parseInt(timescale[index].slice(14,16), 10);
sec = parseInt(timescale[index].slice(17), 10);
room.push([Date.UTC(year,month-1,day,hour,min,sec), roomtemp[index]]);
cpu.push([Date.UTC(year,month-1,day,hour,min,sec), raspitemp[index]]);
cpuroom.push([Date.UTC(year,month-1,day,hour,min,sec), raspitemp[index]-roomtemp[index]]);
}
current.children[1].textContent = raspitemp.slice(-1);
current.children[1].style.color = "blue";
current.children[2].textContent = roomtemp.slice(-1);
minimal.children[1].textContent = Math.min.apply(Math, raspitemp);
minimal.children[1].style.color = "blue";
minimal.children[2].textContent = Math.min.apply(Math, roomtemp);
maximal.children[1].textContent = Math.max.apply(Math, raspitemp);
maximal.children[1].style.color = "blue";
maximal.children[2].textContent = Math.max.apply(Math, roomtemp);
} else {
// set pwd input field style to 'warning' if wrong pwd
pwd.style.backgroundColor = "red";
pwd.style.color = "#FFFFFF";
// reset data fields
current.children[1].textContent = "";
current.children[2].textContent = "";
minimal.children[1].textContent = "";
minimal.children[2].textContent = "";
maximal.children[1].textContent = "";
maximal.children[2].textContent = "";
}
chart.genChart();
},
// generate & draw diagram with highcharts
genChart : function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: target,
type: 'line',
zoomType: 'x'
},
title: {
text: 'temperatures'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'temp'
},
labels: {
format: '{value} ?C'
}
},
series: [{
name: 'cpu',
data: cpu
}, {
name: 'room',
data: room
}, {
name: 'raspi-room',
data: cpuroom
}],
plotOptions: {
series: {
animation: false,
marker: {
enabled: false,
states: {
hover: {
enabled: true
}
}
}
}
}
});
}
};
//event listeners
pwdForm.addEventListener("submit", chart.getData, false);
// generate empty chart at startup
document.addEventListener("DOMContentLoaded", chart.genChart);
// clear pwd field style
pwd.addEventListener("focus", function (event) {event.target.style.backgroundColor = "white";
event.target.style.color = "black"}, true);
pwdForm.addEventListener("submit", function () {pwd.style.backgroundColor = "white";
pwd.style.color = "black"}, true);
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment