draw a nice chart of measured temperatures with the help of highchart.js

raspiTemp.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);

}());