https://cherry.paltee.net/myroom/

index.slim

html
  head
    meta charset="utf8"

    script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"
    script src="loader.js"
    style type="text/css"
      |
        .wrapper {
          width: 80%;
          margin: 0 auto;
        }
  body
    .wrapper
      .graph
        canvas#temp
      .graph
        canvas#pres
      .graph
        canvas#hum

loader.js

function createGraph(id, dates, values, title, color) {
  var ctx = document.getElementById(id);
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      datasets: [
        {
          label: title,
          lineTension: 0,
          data: values.map((p, i) => { return { t: dates[i], y: p }}),
          fill: false,
          borderColor: color,
        }
      ]
    },
    options: {
      animation: false,
      scales: {
        xAxes: [{
          type: 'time',
          distribution: 'linear',
          time: {
            tooltipFormat: 'DD-HH:mm',
            displayFormats: {
              hour: 'DD-HH:mm'
            }
          }
        }]
      }
    }
  });
}

(function () {
  var req = new XMLHttpRequest();
  req.open('GET', "./log", true);
  req.setRequestHeader('Cache-Control', 'no-cache');
  req.setRequestHeader('Pragma', 'no-cache');
  req.onload = function() {
    raw = req.responseText.split("\n");
    raw = raw.slice(Math.max(raw.length - 288, 0), raw.length - 1)
    data = raw.map(p => p.split(" "));
    dates = data.map(p => new Date(Date.parse(p[0])));
    values = Array.from(Array(3).keys()).map(i => data.map(q => parseFloat(q[i + 1]).toFixed(1)));
    createGraph('temp', dates, values[0], '気温', 'red')
    createGraph('pres', dates, values[1], '気圧', 'green')
    createGraph('hum', dates, values[2], '湿度', 'blue')
  }
  req.send(null);
})()

roomenv

Room environment viewer