Update online.html

online.html

@@ -105,7 +105,11 @@ document.addEventListener("DOMContentLoaded", function () {
 
 
 
-
+<div class="container text-center">
+  <h3>График последних 60 значений параметров</h3>
+  <div id="parametersChart" style="width: 100%; height: 400px;"></div>
+</div>
+<br><br>
 
 
   
@@ -460,48 +464,126 @@ document.getElementById("but_sliv").addEventListener("click", function() {
 
 
   
-  <script>
-    function updateValues(data) {
-      document.getElementById("dey").textContent = data.dey;
-      document.getElementById("wek").textContent = data.wek;
-      document.getElementById("v_hid").textContent = data.v_hid;
-      document.getElementById("v_min").textContent = data.v_min;
-      document.getElementById("dey").textContent = data.dey;
-      document.getElementById("wek").textContent = data.wek;      
-      document.getElementById("ph").textContent = data.ph;
-      document.getElementById("ec").textContent = data.ec;
-      document.getElementById("tS").textContent = data.tS;
-      document.getElementById("tA").textContent = data.tA;
-      document.getElementById("hDm").textContent = data.hDm;
-      document.getElementById("sVen").textContent = data.sVen;
-      document.getElementById("rFul").textContent = data.rFul;
-      document.getElementById("rLi").textContent = data.rLi;
-      document.getElementById("rWat").textContent = data.rWat;
-      document.getElementById("rRas").textContent = data.rRas;
-      document.getElementById("rPH").textContent = data.rPH;
-      document.getElementById("rEC").textContent = data.rEC;
-      document.getElementById("rSl").textContent = data.rSl;
-      document.getElementById("rLe").textContent = data.rLe;
-      document.getElementById("alW").textContent = data.alW;
-      
+ <script>
+  // Объект для хранения истории данных (до 60 значений)
+  let dataHistory = {
+    labels: [], // Метки времени
+    ph: [],
+    ec: [],
+    tS: [],
+    tA: [],
+    hDm: [],
+    sVen: []
+  };
+
+  // Инициализация графика Plotly
+  const layout = {
+    title: "График последних 60 значений параметров",
+    xaxis: { title: "Время (последние 60 измерений)" },
+    yaxis: { title: "Значения" },
+    showlegend: true,
+    height: 400
+  };
+
+  const traces = [
+    { x: dataHistory.labels, y: dataHistory.ph, name: "pH", mode: "lines", line: { color: "blue" } },
+    { x: dataHistory.labels, y: dataHistory.ec, name: "EC", mode: "lines", line: { color: "green" } },
+    { x: dataHistory.labels, y: dataHistory.tS, name: "Т. раствора", mode: "lines", line: { color: "red" } },
+    { x: dataHistory.labels, y: dataHistory.tA, name: "Т. воздуха", mode: "lines", line: { color: "orange" } },
+    { x: dataHistory.labels, y: dataHistory.hDm, name: "Вл. воздуха", mode: "lines", line: { color: "purple" } },
+    { x: dataHistory.labels, y: dataHistory.sVen, name: "Об. вентилятора", mode: "lines", line: { color: "brown" } }
+  ];
+
+  Plotly.newPlot("parametersChart", traces, layout);
+
+  function updateValues(data) {
+    // Обновляем текстовые элементы
+    document.getElementById("dey").textContent = data.dey;
+    document.getElementById("wek").textContent = data.wek;
+    document.getElementById("v_hid").textContent = data.v_hid;
+    document.getElementById("v_min").textContent = data.v_min;
+    document.getElementById("ph").textContent = data.ph;
+    document.getElementById("ec").textContent = data.ec;
+    document.getElementById("tS").textContent = data.tS;
+    document.getElementById("tA").textContent = data.tA;
+    document.getElementById("hDm").textContent = data.hDm;
+    document.getElementById("sVen").textContent = data.sVen;
+    document.getElementById("rFul").textContent = data.rFul;
+    document.getElementById("rLi").textContent = data.rLi;
+    document.getElementById("rWat").textContent = data.rWat;
+    document.getElementById("rRas").textContent = data.rRas;
+    document.getElementById("rPH").textContent = data.rPH;
+    document.getElementById("rEC").textContent = data.rEC;
+    document.getElementById("rSl").textContent = data.rSl;
+    document.getElementById("rLe").textContent = data.rLe;
+    document.getElementById("alW").textContent = data.alW;
+
+    // Обновляем историю данных
+    updateDataHistory(data);
+    updateChart();
+  }
+
+  function updateDataHistory(data) {
+    // Добавляем новые значения
+    dataHistory.labels.push(new Date().toLocaleTimeString());
+    dataHistory.ph.push(parseFloat(data.ph) || 0);
+    dataHistory.ec.push(parseFloat(data.ec) || 0);
+    dataHistory.tS.push(parseFloat(data.tS) || 0);
+    dataHistory.tA.push(parseFloat(data.tA) || 0);
+    dataHistory.hDm.push(parseFloat(data.hDm) || 0);
+    dataHistory.sVen.push(parseFloat(data.sVen) || 0);
+
+    // Если больше 60 значений, удаляем первое
+    if (dataHistory.labels.length > 60) {
+      dataHistory.labels.shift();
+      dataHistory.ph.shift();
+      dataHistory.ec.shift();
+      dataHistory.tS.shift();
+      dataHistory.tA.shift();
+      dataHistory.hDm.shift();
+      dataHistory.sVen.shift();
     }
-    
-    function fetchValues() {
-      var xhr = new XMLHttpRequest();
-      xhr.open("GET", "/online_api", true);
-      xhr.setRequestHeader("Content-Type", "application/json");
-      xhr.onreadystatechange = function () {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-          var response = JSON.parse(xhr.responseText);
-          updateValues(response);
-        }
-      };
-      xhr.send();
-    }
-    
-    fetchValues();
-    setInterval(fetchValues, 10000);
-  </script>
+  }
+
+  function updateChart() {
+    // Обновляем данные графика
+    Plotly.update("parametersChart", {
+      x: [
+        dataHistory.labels,
+        dataHistory.labels,
+        dataHistory.labels,
+        dataHistory.labels,
+        dataHistory.labels,
+        dataHistory.labels
+      ],
+      y: [
+        dataHistory.ph,
+        dataHistory.ec,
+        dataHistory.tS,
+        dataHistory.tA,
+        dataHistory.hDm,
+        dataHistory.sVen
+      ]
+    });
+  }
+
+  function fetchValues() {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "/online_api", true);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        var response = JSON.parse(xhr.responseText);
+        updateValues(response);
+      }
+    };
+    xhr.send();
+  }
+
+  // Первый вызов и обновление каждые 10 секунд
+  fetchValues();
+  setInterval(fetchValues, 10000);
+</script>