DmitrMakeev commited on
Commit
3f0da40
·
verified ·
1 Parent(s): cf8872c

Update plot_week.html

Browse files
Files changed (1) hide show
  1. plot_week.html +62 -88
plot_week.html CHANGED
@@ -122,98 +122,72 @@ body {
122
  <div class="graph-container"><div class="graph" id="sven_chart"></div></div>
123
  </div>
124
 
125
- <script>
126
- const data = {{ data | tojson }};
127
-
128
- function createChart(id, yData, title, yLabel, color) {
129
- Plotly.newPlot(id, [{
130
- x: data.dates,
131
- y: yData,
132
- type: "scatter",
133
- mode: "lines+markers",
134
- line: { color: color },
135
- hovertemplate: data.days_of_week.map((day, index) =>
136
- `Неделя: ${data.week}<br>День: ${day}<br>${yLabel}: %{y}<br>Дата: ${data.dates[index]}`
137
- )
138
- }], {
139
- title: title,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  xaxis: { title: "", showticklabels: false },
141
- yaxis: { title: yLabel, titlefont: { size: 14 } },
142
  hovermode: "closest",
143
  showlegend: false
144
  });
145
- }
146
-
147
- function refreshCharts() {
148
- // Request updated data from the server
149
- fetch('/get_updated_data') // Replace with the actual endpoint to get new data
150
- .then(response => response.json())
151
- .then(newData => {
152
- // Update the data object with the new data
153
- data.dates = newData.dates;
154
- data.ph = newData.ph;
155
- data.ec = newData.ec;
156
- data.tS = newData.tS;
157
- data.tA = newData.tA;
158
- data.hDm = newData.hDm;
159
- data.sVen = newData.sVen;
160
- data.onA = newData.onA;
161
- data.onB = newData.onB;
162
- data.onC = newData.onC;
163
- data.week = newData.week;
164
- data.days_of_week = newData.days_of_week;
165
-
166
- // Re-render the charts with the updated data
167
- createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
168
- createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
169
- createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
170
- createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
171
- createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
172
- createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
173
- Plotly.newPlot("pump_chart", [
174
- {
175
- x: data.dates,
176
- y: data.onA,
177
- type: "scatter",
178
- mode: "lines+markers",
179
- line: { color: "green" },
180
- hovertemplate: data.days_of_week.map((day, index) =>
181
- `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
182
- )
183
- },
184
- {
185
- x: data.dates,
186
- y: data.onB,
187
- type: "scatter",
188
- mode: "lines+markers",
189
- line: { color: "brown" },
190
- hovertemplate: data.days_of_week.map((day, index) =>
191
- `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
192
- )
193
- },
194
- {
195
- x: data.dates,
196
- y: data.onC,
197
- type: "scatter",
198
- mode: "lines+markers",
199
- line: { color: "orange" },
200
- hovertemplate: data.days_of_week.map((day, index) =>
201
- `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
202
- )
203
- }
204
- ], {
205
- title: `Интервал дозирования насосов для ${data.week}-ой недели`,
206
- xaxis: { title: "", showticklabels: false },
207
- yaxis: { title: "Время ВКЛ(сек.)" },
208
- hovermode: "closest",
209
- showlegend: false
210
- });
211
- });
212
- }
213
-
214
- // Set an interval to refresh the charts every 10 seconds (10000 ms)
215
- setInterval(refreshCharts, 10000);
216
- </script>
217
  {% else %}
218
  <div class="no-data-message">
219
  {{ message if message else 'Данных за эту неделю нет в базе данных.' }}
 
122
  <div class="graph-container"><div class="graph" id="sven_chart"></div></div>
123
  </div>
124
 
125
+ <script>
126
+ const data = {{ data | tojson }};
127
+
128
+ function createChart(id, yData, title, yLabel, color) {
129
+ Plotly.newPlot(id, [{
130
+ x: data.dates,
131
+ y: yData,
132
+ type: "scatter",
133
+ mode: "lines+markers",
134
+ line: { color: color },
135
+ hovertemplate: data.days_of_week.map((day, index) =>
136
+ `Неделя: ${data.week}<br>День: ${day}<br>${yLabel}: %{y}<br>Дата: ${data.dates[index]}`
137
+ )
138
+ }], {
139
+ title: title,
140
+ xaxis: { title: "", showticklabels: false },
141
+ yaxis: { title: yLabel, titlefont: { size: 14 } },
142
+ hovermode: "closest",
143
+ showlegend: false
144
+ });
145
+ }
146
+ createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
147
+ createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
148
+ createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
149
+ createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
150
+ createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
151
+ createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
152
+ Plotly.newPlot("pump_chart", [
153
+ {
154
+ x: data.dates,
155
+ y: data.onA,
156
+ type: "scatter",
157
+ mode: "lines+markers",
158
+ line: { color: "green" },
159
+ hovertemplate: data.days_of_week.map((day, index) =>
160
+ `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
161
+ )
162
+ },
163
+ {
164
+ x: data.dates,
165
+ y: data.onB,
166
+ type: "scatter",
167
+ mode: "lines+markers",
168
+ line: { color: "brown" },
169
+ hovertemplate: data.days_of_week.map((day, index) =>
170
+ `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
171
+ )
172
+ },
173
+ {
174
+ x: data.dates,
175
+ y: data.onC,
176
+ type: "scatter",
177
+ mode: "lines+markers",
178
+ line: { color: "orange" },
179
+ hovertemplate: data.days_of_week.map((day, index) =>
180
+ `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
181
+ )
182
+ }
183
+ ], {
184
+ title: `Интервал дозирования насосов для ${data.week}-ой недели`,
185
  xaxis: { title: "", showticklabels: false },
186
+ yaxis: { title: "Время ВКЛ(сек.)" },
187
  hovermode: "closest",
188
  showlegend: false
189
  });
190
+ </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
191
  {% else %}
192
  <div class="no-data-message">
193
  {{ message if message else 'Данных за эту неделю нет в базе данных.' }}