Update plot_ph_week.html
Browse files- plot_ph_week.html +6 -9
plot_ph_week.html
CHANGED
@@ -20,20 +20,18 @@
|
|
20 |
<script>
|
21 |
const weekNumber = {{ data.week }};
|
22 |
const data = {{ data | tojson }}; // Данные из Flask
|
23 |
-
|
24 |
function navigateWeek(change) {
|
25 |
const newWeek = weekNumber + change;
|
26 |
if (newWeek >= 1 && newWeek <= 30) {
|
27 |
window.location.href = `/plot_ph_week?week=${newWeek}`;
|
28 |
}
|
29 |
}
|
30 |
-
|
31 |
// Рендерим графики с использованием Plotly.js
|
32 |
Plotly.newPlot("ph_chart", [{
|
33 |
x: data.dates, // Используем даты для оси X
|
34 |
y: data.ph,
|
35 |
type: "scatter",
|
36 |
-
mode: "lines",
|
37 |
name: "pH",
|
38 |
hovertemplate: data.days_of_week.map((day, index) =>
|
39 |
`День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
|
@@ -44,12 +42,11 @@
|
|
44 |
yaxis: { title: "pH" },
|
45 |
hovermode: "closest"
|
46 |
});
|
47 |
-
|
48 |
Plotly.newPlot("ec_chart", [{
|
49 |
x: data.dates, // Используем даты для оси X
|
50 |
y: data.ec,
|
51 |
type: "scatter",
|
52 |
-
mode: "lines",
|
53 |
name: "EC",
|
54 |
line: { color: "green" },
|
55 |
hovertemplate: data.days_of_week.map((day, index) =>
|
@@ -61,14 +58,13 @@
|
|
61 |
yaxis: { title: "EC" },
|
62 |
hovermode: "closest"
|
63 |
});
|
64 |
-
|
65 |
// Добавляем дни недели на график насосов
|
66 |
Plotly.newPlot("pump_chart", [
|
67 |
{
|
68 |
x: data.dates,
|
69 |
y: data.onA,
|
70 |
type: "scatter",
|
71 |
-
mode: "lines",
|
72 |
name: "Насос A",
|
73 |
line: { color: "blue" },
|
74 |
hovertemplate: data.days_of_week.map((day, index) =>
|
@@ -79,7 +75,7 @@
|
|
79 |
x: data.dates,
|
80 |
y: data.onB,
|
81 |
type: "scatter",
|
82 |
-
mode: "lines",
|
83 |
name: "Насос B",
|
84 |
line: { color: "brown" },
|
85 |
hovertemplate: data.days_of_week.map((day, index) =>
|
@@ -90,7 +86,7 @@
|
|
90 |
x: data.dates,
|
91 |
y: data.onC,
|
92 |
type: "scatter",
|
93 |
-
mode: "lines",
|
94 |
name: "Насос C",
|
95 |
line: { color: "orange" },
|
96 |
hovertemplate: data.days_of_week.map((day, index) =>
|
@@ -107,3 +103,4 @@
|
|
107 |
|
108 |
</body>
|
109 |
</html>
|
|
|
|
20 |
<script>
|
21 |
const weekNumber = {{ data.week }};
|
22 |
const data = {{ data | tojson }}; // Данные из Flask
|
|
|
23 |
function navigateWeek(change) {
|
24 |
const newWeek = weekNumber + change;
|
25 |
if (newWeek >= 1 && newWeek <= 30) {
|
26 |
window.location.href = `/plot_ph_week?week=${newWeek}`;
|
27 |
}
|
28 |
}
|
|
|
29 |
// Рендерим графики с использованием Plotly.js
|
30 |
Plotly.newPlot("ph_chart", [{
|
31 |
x: data.dates, // Используем даты для оси X
|
32 |
y: data.ph,
|
33 |
type: "scatter",
|
34 |
+
mode: "lines+markers", // Добавляем точки на линии
|
35 |
name: "pH",
|
36 |
hovertemplate: data.days_of_week.map((day, index) =>
|
37 |
`День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
|
|
|
42 |
yaxis: { title: "pH" },
|
43 |
hovermode: "closest"
|
44 |
});
|
|
|
45 |
Plotly.newPlot("ec_chart", [{
|
46 |
x: data.dates, // Используем даты для оси X
|
47 |
y: data.ec,
|
48 |
type: "scatter",
|
49 |
+
mode: "lines+markers", // Добавляем точки на линии
|
50 |
name: "EC",
|
51 |
line: { color: "green" },
|
52 |
hovertemplate: data.days_of_week.map((day, index) =>
|
|
|
58 |
yaxis: { title: "EC" },
|
59 |
hovermode: "closest"
|
60 |
});
|
|
|
61 |
// Добавляем дни недели на график насосов
|
62 |
Plotly.newPlot("pump_chart", [
|
63 |
{
|
64 |
x: data.dates,
|
65 |
y: data.onA,
|
66 |
type: "scatter",
|
67 |
+
mode: "lines+markers", // Добавляем точки на линии
|
68 |
name: "Насос A",
|
69 |
line: { color: "blue" },
|
70 |
hovertemplate: data.days_of_week.map((day, index) =>
|
|
|
75 |
x: data.dates,
|
76 |
y: data.onB,
|
77 |
type: "scatter",
|
78 |
+
mode: "lines+markers", // Добавляем точки на линии
|
79 |
name: "Насос B",
|
80 |
line: { color: "brown" },
|
81 |
hovertemplate: data.days_of_week.map((day, index) =>
|
|
|
86 |
x: data.dates,
|
87 |
y: data.onC,
|
88 |
type: "scatter",
|
89 |
+
mode: "lines+markers", // Добавляем точки на линии
|
90 |
name: "Насос C",
|
91 |
line: { color: "orange" },
|
92 |
hovertemplate: data.days_of_week.map((day, index) =>
|
|
|
103 |
|
104 |
</body>
|
105 |
</html>
|
106 |
+
|