DmitrMakeev commited on
Commit
0e07bbc
·
verified ·
1 Parent(s): b157933

Update plot_ph_week.html

Browse files
Files changed (1) hide show
  1. 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="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
- function renderPlot(id, yData, title, yTitle, color) {
70
- Plotly.newPlot(id, [{
71
- x: data.dates,
72
- y: yData,
73
- type: "scatter",
74
- mode: "lines+markers",
75
- name: title,
76
- line: { color: color },
77
- hovertemplate: data.days_of_week.map((day, index) =>
78
- `День недели: ${day}<br>${title}: %{y}<br>Дата: ${data.dates[index]}`
79
- )
80
- }], {
81
- title: `График ${title} за ${data.week}-ю неделю`,
82
- xaxis: { title: "Дата" },
83
- yaxis: { title: yTitle, titlefont: { size: 14 } },
84
- hovermode: "closest",
85
- showlegend: false
86
- });
87
- }
88
 
89
- renderPlot("ph_chart", data.ph, "pH", "Уровень pH", "blue");
90
- renderPlot("ec_chart", data.ec, "EC", "Уровень EC", "red");
91
- renderPlot("ts_chart", data.tS, "Температура раствора", "Температура (°C)", "purple");
92
- renderPlot("ta_chart", data.tA, "Температура воздуха", "Температура (°C)", "orange");
93
- renderPlot("hdm_chart", data.hDm, "Влажность воздуха", "Влажность (%)", "green");
94
- renderPlot("sven_chart", data.sVen, "Обороты вентилятора", "Обороты", "brown");
 
 
 
 
 
 
 
 
 
 
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
- showlegend: true
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>