index.html

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Крошечный документ HTML5</title>
<script src="js/scorocode.min.js"></script>
<script src="js/Chart.bundle.js"></script>
<script src="js/utils.js"></script>
<script type="text/javascript">
   //var zc = require('scorocode');
   var sc = Scorocode.Init({
     ApplicationID: "31c69b9181ef4ece8610330da5677322",
     JavaScriptKey: "c9e964a49b4a452a96c0266150c1f9ad"
   });

   var ChartData = {
     labels: [],
     datasets: [{
       label: "Temperature",
       borderColor: window.chartColors.red,
       backgroundColor: window.chartColors.red,
       pointStyle: "rect",
       fill: false,
       data: [],
       yAxisID: "y-axis-1",
      },{
       label: "Humidity",
       borderColor: window.chartColors.blue,
       backgroundColor: window.chartColors.blue,
       pointStyle: "triangle",
       fill: false,
       data: [],
       yAxisID: "y-axis-2"
      },{
       label: "Pressure",
       borderColor: window.chartColors.green,
       backgroundColor: window.chartColors.green,
       pointStyle: "star",
       fill: false,
       data: [],
       yAxisID: "y-axis-3"
      }]
    };


   function addData() {
     var itm = new Scorocode.Object("meteodata");
     document.getElementById("tempr").value = Math.round(Math.random() * (5000 + 4000) - 4000)/100;
     document.getElementById("humid").value = Math.round(Math.random() * (9900 - 500) + 500)/100;
     document.getElementById("press").value = Math.round(Math.random() * (78000 - 68000) + 68000)/100;
     itm.set("createdAt", Date()).
         set("userId", "anonim").
         set("deviceId", "test").
         set("tempr", new Number(document.getElementById("tempr").value)).
         set("humid", new Number(document.getElementById("humid").value)).
         set("press", new Number(document.getElementById("press").value));
     itm.save()
     // Обработчик успешного выполнения запроса
     .then((saved) => {
          getData();
      })
      // Обработчик ошибки
      .catch((error) => {
          console.log("Что-то пошло не так: \n", error)
       });

   }

   function getData() {
     var data = new Scorocode.Query("meteodata");
     var drawingCanvas = document.getElementById('chart');
     data.find()
    // Обработка успешного выполнения запроса
    .then((finded) => {
        //Выведем полученные данные в консоль
        var zout = '<table><tr>' +
                   '<td align="center">Created</td>' +
                   '<td align="center">Device</td>' +
                   '<td align="center">Pressure</td>' +
                   '<td align="center">Temperature</td>' +
                   '<td align="center">Humidity</td>' +
                   '<td align="center">User</td></tr>';
        if(drawingCanvas && drawingCanvas.getContext) {
          ChartData.labels = [];
          ChartData.datasets[0].data = [];
          ChartData.datasets[1].data = [];
          ChartData.datasets[2].data = [];
        }
        for(i = 0; i < finded.result.length; i++) {
          var so = finded.result[i];
          zout += '<tr>';
          zout += '<td>' + so["createdAt"] + '</td>';
          zout += '<td>' + so["deviceId"] + '</td>';
          zout += '<td align="right">' + so["press"] + '</td>';
          zout += '<td align="right">' + so["tempr"] + '</td>';
          zout += '<td align="right">' + so["humid"] + '</td>';
          zout += '<td>' + so["userId"] + '</td>';
          zout += '</tr>';
          if(drawingCanvas && drawingCanvas.getContext) {
            ChartData.labels[i] = so["createdAt"];
            ChartData.datasets[0].data[i] = so["tempr"];
            ChartData.datasets[1].data[i] = so["humid"];
            ChartData.datasets[2].data[i] = so["press"];
          }
        }
        zout += '</table>';
        document.getElementById('dataList').innerHTML = zout;
        if(drawingCanvas && drawingCanvas.getContext) {
          var ctx = drawingCanvas.getContext('2d');
          window.myLine = Chart.Line(ctx, {
            data: ChartData,
            options: {
              responsive: true,
              hoverMode: 'index',
              stacked: false,
              title:{
                display: true,
                text:'Meteo Data'
              },
              scales: {
                yAxes: [{
                  type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                  display: true,
                  position: "left",
                  id: "y-axis-1",
                  ticks: {
                    beginAtZero:true,
                    callback: function(value, index, values) {
                        return value + '℃';
                    }
                  }
                }, {
                  type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                  display: true,
                  position: "left",
                  id: "y-axis-2",
                  gridLines: {
                    drawOnChartArea: false, // only want the grid lines for one axis to show up
                  },
                  ticks: {
                    beginAtZero:true,
                    callback: function(value, index, values) {
                        return value + '%';
                    }
                  }
                }, {
                  type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                  display: true,
                  position: "right",
                  id: "y-axis-3",
                  gridLines: {
                    drawOnChartArea: false, // only want the grid lines for one axis to show up
                  },
                  ticks: {
                    callback: function(value, index, values) {
                        return value + 'mm';
                    }
                  }
                }],
              }
            },
          });
          window.myLine.update();
        }
    })
    // Обработка ошибки
    .catch((err) => {
        console.log(err)
    });

   }

</script>
</head>
<body>
  <canvas id="chart" style="width:640px height:480px">
      <p>Ваш браузер не поддерживает рисование.</p>
  </canvas>
  <table>
    <tr><td align="center">Pressure</td><td align="center">Temperature</td><td align="center">Humidity</td></tr>
    <tr>
      <td><input id="press" style="text-align: right" type="number" step="0.1" value="711.5"></td>
      <td><input id="tempr" style="text-align: right" type="number" step="0.1" value="26.7"></td>
      <td><input id="humid" style="text-align: right" type="number" step="0.1" value="40.5"></td>
    </tr>
  </table>
  <input type="button" id="butt" onclick="addData()" value="Add Data">
  <input type="button" id="butt" onclick="getData()" value="Get Data">
  <div id="dataList"></div>

</body>
</html>