weatherdata/htdocs/js/averages.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);
    }
}

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

        var graphdata = {
            labels: data.labels,
            datasets: [{
                borderColor: 'rgba(255, 140, 51, 1)',
                fill       : false,
                pointRadius: 2,
                label      : 'Min Temperature',
                data       : data.min_temp
            }, {
                borderColor: 'rgba(255, 140, 151, 1)',
                fill       : '-1',
                pointRadius: 2,
                label      : 'Max Temperature',
                data       : data.max_temp
            }, {
                borderColor: 'rgba(0, 140, 255, 1)',
                fill       : false,
                label      : 'Avg Humidity',
                pointRadius: 2,
                data       : data.avg_humidity
            }]
        };

        var chart = new Chart(ctx, {
            type: 'line',
            data: graphdata,
            options: {
                elements: {
                    line: {
                        //tension: 0, // disable bezier curves
                    }
                },
                legend: {
                    display: true,
                    labels: {
                        fontColor: 'rgb(5, 9, 3)'
                    }
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        distribution: 'linear',
                    }]
                }
            }
        });
    });
}