weatherdata/htdocs/js/overview.js

// vim: expandtab shiftwidth=4:

var httpclient = function() {
    this.get = function(url, callback) {
        var req = new XMLHttpRequest();
        req.onreadystatechange = function () {
            if (req.readyState == 4 && req.status == 200) {
                callback(req.responseText)
            }
        }

        req.open('GET', url, true);
        req.send(null);
    }
}

function date_diff(start, end) {
    var day = 1000 * 60 * 60 * 24;

    return (Math.round((end.getTime() - start.getTime()) / day));
}


var chart = null;


var render_graph = function(url, chartid) {
    var client = new httpclient();

    client.get(url, function(jsondata) {
        var ctx = document.getElementById(chartid).getContext('2d');
        if (! ctx) {
            console.log('Unable to find chart element ' + chartid);
            return;
        }

        var data = JSON.parse(jsondata);

        // The query on the server returns an already sorted array
        var minDate = new Date(data.labels[0]);
        var maxDate = new Date(data.labels[data.labels.length -1]);

        var days = date_diff(minDate, maxDate);
        var xaxisunit = 'day';
        if (days > 7)
            xaxisunit = 'week';
        else if (days > 31)
            xaxisunit = 'month';

        var graphdata = {
            labels  : data.labels,
            datasets: [{
                borderColor: 'rgba(255, 140, 51, 1)',
                fill       : false,
                pointRadius: 0,
                label      : 'Temperature',
                data       : data.temp
            }, {
                borderColor: 'rgba(0, 140, 255, 1)',
                fill       : false,
                label      : 'Humidity',
                pointRadius: 0,
                data       : data.humidity
            }]
        };

        if (!chart) {
            chart = new Chart(ctx, {
                type: 'line',
                data: graphdata,
                options: {
                    elements: {
                        line: {
                            tension: 0, // disable bezier curves
                        }
                    },
                    legend: {
                        display: true,
                        labels: {
                            fontColor: 'rgb(255, 99, 132)'
                        }
                    },
                    scales: {
                        xAxes: [{
                            type: 'time',
                            distribution: 'linear',
                            time: {
                                unit: xaxisunit
                            }
                        }]
                    }
                }
            });
        } else {
            chart.options.scales = {
                xAxes: [{
                    type: 'time',
                    distribution: 'linear',
                    time: {
                        unit: xaxisunit
                    }
                }]
            };
            chart.data = graphdata;

            chart.update();
        }
    });
}