Update plot_week.html

plot_week.html

@@ -122,72 +122,98 @@ body {
         <div class="graph-container"><div class="graph" id="sven_chart"></div></div>
     </div>
 
-    <script>
-        const data = {{ data | tojson }};
-        
-        function createChart(id, yData, title, yLabel, color) {
-            Plotly.newPlot(id, [{
-                x: data.dates,
-                y: yData,
-                type: "scatter",
-                mode: "lines+markers",
-                line: { color: color },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `Неделя: ${data.week}<br>День: ${day}<br>${yLabel}: %{y}<br>Дата: ${data.dates[index]}`
-                )
-            }], {
-                title: title,
-                xaxis: { title: "", showticklabels: false },
-                yaxis: { title: yLabel, titlefont: { size: 14 } },
-                hovermode: "closest",
-                showlegend: false
-            });
-        }
-        createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
-        createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
-        createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
-        createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
-        createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
-        createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
-        Plotly.newPlot("pump_chart", [
-            {
-                x: data.dates,
-                y: data.onA,
-                type: "scatter",
-                mode: "lines+markers",
-                line: { color: "green" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
-                )
-            },
-            {
-                x: data.dates,
-                y: data.onB,
-                type: "scatter",
-                mode: "lines+markers",
-                line: { color: "brown" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
-                )
-            },
-            {
-                x: data.dates,
-                y: data.onC,
-                type: "scatter",
-                mode: "lines+markers",
-                line: { color: "orange" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
-                )
-            }
-        ], {
-            title: `Интервал дозирования насосов для ${data.week}-ой недели`,
+<script>
+    const data = {{ data | tojson }};
+    
+    function createChart(id, yData, title, yLabel, color) {
+        Plotly.newPlot(id, [{
+            x: data.dates,
+            y: yData,
+            type: "scatter",
+            mode: "lines+markers",
+            line: { color: color },
+            hovertemplate: data.days_of_week.map((day, index) =>
+                `Неделя: ${data.week}<br>День: ${day}<br>${yLabel}: %{y}<br>Дата: ${data.dates[index]}`
+            )
+        }], {
+            title: title,
             xaxis: { title: "", showticklabels: false },
-            yaxis: { title: "Время ВКЛ(сек.)" },
+            yaxis: { title: yLabel, titlefont: { size: 14 } },
             hovermode: "closest",
             showlegend: false
         });
-    </script>
+    }
+
+    function refreshCharts() {
+        // Request updated data from the server
+        fetch('/get_updated_data')  // Replace with the actual endpoint to get new data
+            .then(response => response.json())
+            .then(newData => {
+                // Update the data object with the new data
+                data.dates = newData.dates;
+                data.ph = newData.ph;
+                data.ec = newData.ec;
+                data.tS = newData.tS;
+                data.tA = newData.tA;
+                data.hDm = newData.hDm;
+                data.sVen = newData.sVen;
+                data.onA = newData.onA;
+                data.onB = newData.onB;
+                data.onC = newData.onC;
+                data.week = newData.week;
+                data.days_of_week = newData.days_of_week;
+
+                // Re-render the charts with the updated data
+                createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
+                createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
+                createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
+                createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
+                createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
+                createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
+                Plotly.newPlot("pump_chart", [
+                    {
+                        x: data.dates,
+                        y: data.onA,
+                        type: "scatter",
+                        mode: "lines+markers",
+                        line: { color: "green" },
+                        hovertemplate: data.days_of_week.map((day, index) =>
+                            `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
+                        )
+                    },
+                    {
+                        x: data.dates,
+                        y: data.onB,
+                        type: "scatter",
+                        mode: "lines+markers",
+                        line: { color: "brown" },
+                        hovertemplate: data.days_of_week.map((day, index) =>
+                            `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
+                        )
+                    },
+                    {
+                        x: data.dates,
+                        y: data.onC,
+                        type: "scatter",
+                        mode: "lines+markers",
+                        line: { color: "orange" },
+                        hovertemplate: data.days_of_week.map((day, index) =>
+                            `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
+                        )
+                    }
+                ], {
+                    title: `Интервал дозирования насосов для ${data.week}-ой недели`,
+                    xaxis: { title: "", showticklabels: false },
+                    yaxis: { title: "Время ВКЛ(сек.)" },
+                    hovermode: "closest",
+                    showlegend: false
+                });
+            });
+    }
+
+    // Set an interval to refresh the charts every 10 seconds (10000 ms)
+    setInterval(refreshCharts, 10000);
+</script>
 {% else %}
     <div class="no-data-message">
         {{ message if message else 'Данных за эту неделю нет в базе данных.' }}