Update plot_ph_week.html
Browse files- plot_ph_week.html +98 -37
plot_ph_week.html
CHANGED
@@ -58,59 +58,119 @@
|
|
58 |
<div class="graph-container"><div class="graph" id="ph_chart"></div></div>
|
59 |
<div class="graph-container"><div class="graph" id="ec_chart"></div></div>
|
60 |
<div class="graph-container"><div class="graph" id="pump_chart"></div></div>
|
61 |
-
<div class="graph-container"><div class="graph" id="
|
62 |
-
<div class="graph-container"><div class="graph" id="
|
63 |
-
<div class="graph-container"><div class="graph" id="
|
64 |
-
<div class="graph-container"><div class="graph" id="
|
65 |
|
66 |
<script>
|
67 |
const data = {{ data | tojson }};
|
68 |
|
69 |
-
|
70 |
-
|
71 |
-
|
72 |
-
|
73 |
-
|
74 |
-
|
75 |
-
|
76 |
-
|
77 |
-
|
78 |
-
|
79 |
-
|
80 |
-
}
|
81 |
-
|
82 |
-
|
83 |
-
|
84 |
-
|
85 |
-
showlegend: false
|
86 |
-
});
|
87 |
-
}
|
88 |
|
89 |
-
|
90 |
-
|
91 |
-
|
92 |
-
|
93 |
-
|
94 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
95 |
|
96 |
Plotly.newPlot("pump_chart", [
|
97 |
-
{ x: data.dates, y: data.onA, type: "scatter", mode: "lines+markers", name: "Насос A", line: { color: "green" }
|
98 |
-
{ x: data.dates, y: data.onB, type: "scatter", mode: "lines+markers", name: "Насос B", line: { color: "brown" }
|
99 |
-
{ x: data.dates, y: data.onC, type: "scatter", mode: "lines+markers", name: "Насос C", line: { color: "orange" }
|
100 |
], {
|
101 |
title: `График работы насосов за ${data.week}-ю неделю`,
|
102 |
xaxis: { title: "Дата" },
|
103 |
yaxis: { title: "Состояние насосов" },
|
104 |
-
hovermode: "closest"
|
105 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
106 |
});
|
107 |
|
108 |
</script>
|
109 |
|
110 |
{% else %}
|
111 |
-
<div class="no-data-message">
|
112 |
-
{{ message if message else 'Данных за эту неделю нет в базе данных.' }}
|
113 |
-
</div>
|
114 |
{% endif %}
|
115 |
|
116 |
<script>
|
@@ -126,4 +186,5 @@
|
|
126 |
</body>
|
127 |
|
128 |
|
|
|
129 |
</html>
|
|
|
58 |
<div class="graph-container"><div class="graph" id="ph_chart"></div></div>
|
59 |
<div class="graph-container"><div class="graph" id="ec_chart"></div></div>
|
60 |
<div class="graph-container"><div class="graph" id="pump_chart"></div></div>
|
61 |
+
<div class="graph-container"><div class="graph" id="tS_chart"></div></div>
|
62 |
+
<div class="graph-container"><div class="graph" id="tA_chart"></div></div>
|
63 |
+
<div class="graph-container"><div class="graph" id="hDm_chart"></div></div>
|
64 |
+
<div class="graph-container"><div class="graph" id="sVen_chart"></div></div>
|
65 |
|
66 |
<script>
|
67 |
const data = {{ data | tojson }};
|
68 |
|
69 |
+
Plotly.newPlot("ph_chart", [{
|
70 |
+
x: data.dates,
|
71 |
+
y: data.ph,
|
72 |
+
type: "scatter",
|
73 |
+
mode: "lines+markers",
|
74 |
+
name: "pH",
|
75 |
+
line: { color: "blue" },
|
76 |
+
hovertemplate: data.days_of_week.map((day, index) =>
|
77 |
+
`День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
|
78 |
+
)
|
79 |
+
}], {
|
80 |
+
title: `График pH за ${data.week}-ю неделю`,
|
81 |
+
xaxis: { title: "Дата" },
|
82 |
+
yaxis: { title: "Уровень pH" },
|
83 |
+
hovermode: "closest"
|
84 |
+
});
|
|
|
|
|
|
|
85 |
|
86 |
+
Plotly.newPlot("ec_chart", [{
|
87 |
+
x: data.dates,
|
88 |
+
y: data.ec,
|
89 |
+
type: "scatter",
|
90 |
+
mode: "lines+markers",
|
91 |
+
name: "EC",
|
92 |
+
line: { color: "blue" },
|
93 |
+
hovertemplate: data.days_of_week.map((day, index) =>
|
94 |
+
`День недели: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
|
95 |
+
)
|
96 |
+
}], {
|
97 |
+
title: `График EC за ${data.week}-ю неделю`,
|
98 |
+
xaxis: { title: "Дата" },
|
99 |
+
yaxis: { title: "Уровень EC" },
|
100 |
+
hovermode: "closest"
|
101 |
+
});
|
102 |
|
103 |
Plotly.newPlot("pump_chart", [
|
104 |
+
{ x: data.dates, y: data.onA, type: "scatter", mode: "lines+markers", name: "Насос A", line: { color: "green" }},
|
105 |
+
{ x: data.dates, y: data.onB, type: "scatter", mode: "lines+markers", name: "Насос B", line: { color: "brown" }},
|
106 |
+
{ x: data.dates, y: data.onC, type: "scatter", mode: "lines+markers", name: "Насос C", line: { color: "orange" }}
|
107 |
], {
|
108 |
title: `График работы насосов за ${data.week}-ю неделю`,
|
109 |
xaxis: { title: "Дата" },
|
110 |
yaxis: { title: "Состояние насосов" },
|
111 |
+
hovermode: "closest"
|
112 |
+
});
|
113 |
+
|
114 |
+
Plotly.newPlot("tS_chart", [{
|
115 |
+
x: data.dates,
|
116 |
+
y: data.tS,
|
117 |
+
type: "scatter",
|
118 |
+
mode: "lines+markers",
|
119 |
+
name: "Температура раствора",
|
120 |
+
line: { color: "red" }
|
121 |
+
}], {
|
122 |
+
title: `График температуры раствора за ${data.week}-ю неделю`,
|
123 |
+
xaxis: { title: "Дата" },
|
124 |
+
yaxis: { title: "Температура (°C)" },
|
125 |
+
hovermode: "closest"
|
126 |
+
});
|
127 |
+
|
128 |
+
Plotly.newPlot("tA_chart", [{
|
129 |
+
x: data.dates,
|
130 |
+
y: data.tA,
|
131 |
+
type: "scatter",
|
132 |
+
mode: "lines+markers",
|
133 |
+
name: "Температура воздуха",
|
134 |
+
line: { color: "purple" }
|
135 |
+
}], {
|
136 |
+
title: `График температуры воздуха за ${data.week}-ю неделю`,
|
137 |
+
xaxis: { title: "Дата" },
|
138 |
+
yaxis: { title: "Температура (°C)" },
|
139 |
+
hovermode: "closest"
|
140 |
+
});
|
141 |
+
|
142 |
+
Plotly.newPlot("hDm_chart", [{
|
143 |
+
x: data.dates,
|
144 |
+
y: data.hDm,
|
145 |
+
type: "scatter",
|
146 |
+
mode: "lines+markers",
|
147 |
+
name: "Влажность воздуха",
|
148 |
+
line: { color: "blue" }
|
149 |
+
}], {
|
150 |
+
title: `График влажности воздуха за ${data.week}-ю неделю`,
|
151 |
+
xaxis: { title: "Дата" },
|
152 |
+
yaxis: { title: "Влажность (%)" },
|
153 |
+
hovermode: "closest"
|
154 |
+
});
|
155 |
+
|
156 |
+
Plotly.newPlot("sVen_chart", [{
|
157 |
+
x: data.dates,
|
158 |
+
y: data.sVen,
|
159 |
+
type: "scatter",
|
160 |
+
mode: "lines+markers",
|
161 |
+
name: "Обороты вентилятора",
|
162 |
+
line: { color: "gray" }
|
163 |
+
}], {
|
164 |
+
title: `График оборотов вентилятора за ${data.week}-ю неделю`,
|
165 |
+
xaxis: { title: "Дата" },
|
166 |
+
yaxis: { title: "Обороты" },
|
167 |
+
hovermode: "closest"
|
168 |
});
|
169 |
|
170 |
</script>
|
171 |
|
172 |
{% else %}
|
173 |
+
<div class="no-data-message">Данных за эту неделю нет в базе данных.</div>
|
|
|
|
|
174 |
{% endif %}
|
175 |
|
176 |
<script>
|
|
|
186 |
</body>
|
187 |
|
188 |
|
189 |
+
|
190 |
</html>
|