DmitrMakeev commited on
Commit
c825e81
·
verified ·
1 Parent(s): 36789be

Update plot_ph_week.html

Browse files
Files changed (1) hide show
  1. plot_ph_week.html +62 -11
plot_ph_week.html CHANGED
@@ -5,6 +5,32 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Графики pH и EC</title>
7
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
 
@@ -14,9 +40,31 @@
14
  <button id="next_week" onclick="navigateWeek(1)">Следующая неделя</button>
15
 
16
  {% if data %}
17
- <div id="ph_chart"></div>
18
- <div id="ec_chart"></div>
19
- <div id="pump_chart"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
 
21
  <script>
22
  const data = {{ data | tojson }}; // Данные из Flask
@@ -27,6 +75,7 @@
27
  type: "scatter",
28
  mode: "lines+markers",
29
  name: "pH",
 
30
  hovertemplate: data.days_of_week.map((day, index) =>
31
  `День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
32
  )
@@ -34,19 +83,20 @@
34
  title: `График pH за ${data.week}-ю неделю`,
35
  xaxis: { title: "Дата" },
36
  yaxis: {
37
- title: "Уровень pH", // Подпись для оси y
38
  titlefont: { size: 14 }
39
  },
40
- hovermode: "closest"
 
41
  });
42
-
43
  Plotly.newPlot("ec_chart", [{
44
  x: data.dates,
45
  y: data.ec,
46
  type: "scatter",
47
  mode: "lines+markers",
48
  name: "EC",
49
- line: { color: "green" },
50
  hovertemplate: data.days_of_week.map((day, index) =>
51
  `День недели: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
52
  )
@@ -54,10 +104,11 @@
54
  title: `График EC за ${data.week}-ю неделю`,
55
  xaxis: { title: "Дата" },
56
  yaxis: {
57
- title: "Уровень EC", // Подпись для оси y
58
  titlefont: { size: 14 }
59
  },
60
- hovermode: "closest"
 
61
  });
62
 
63
  Plotly.newPlot("pump_chart", [
@@ -98,7 +149,8 @@
98
  title: `График работы насосов за ${data.week}-ю неделю`,
99
  xaxis: { title: "Дата" },
100
  yaxis: { title: "Состояние насосов" },
101
- hovermode: "closest"
 
102
  });
103
  </script>
104
 
@@ -118,4 +170,3 @@
118
 
119
  </body>
120
  </html>
121
-
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Графики pH и EC</title>
7
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
8
+ <style>
9
+ .graph-container {
10
+ display: flex;
11
+ justify-content: space-between;
12
+ margin-bottom: 20px;
13
+ }
14
+
15
+ .graph {
16
+ width: 70%;
17
+ position: relative;
18
+ }
19
+
20
+ .label-container {
21
+ display: flex;
22
+ flex-direction: column;
23
+ justify-content: space-between;
24
+ width: 20%;
25
+ }
26
+
27
+ .label {
28
+ font-size: 16px;
29
+ font-weight: bold;
30
+ color: black;
31
+ margin: 5px 0;
32
+ }
33
+ </style>
34
  </head>
35
  <body>
36
 
 
40
  <button id="next_week" onclick="navigateWeek(1)">Следующая неделя</button>
41
 
42
  {% if data %}
43
+ <div class="graph-container">
44
+ <!-- График pH -->
45
+ <div class="graph" id="ph_chart"></div>
46
+ <div class="label-container">
47
+ <div class="label" style="color: blue;">pH</div>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="graph-container">
52
+ <!-- График EC -->
53
+ <div class="graph" id="ec_chart"></div>
54
+ <div class="label-container">
55
+ <div class="label" style="color: green;">EC</div>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="graph-container">
60
+ <!-- График насосов -->
61
+ <div class="graph" id="pump_chart"></div>
62
+ <div class="label-container">
63
+ <div class="label" style="color: blue;">Насос A</div>
64
+ <div class="label" style="color: brown;">Насос B</div>
65
+ <div class="label" style="color: orange;">Насос C</div>
66
+ </div>
67
+ </div>
68
 
69
  <script>
70
  const data = {{ data | tojson }}; // Данные из Flask
 
75
  type: "scatter",
76
  mode: "lines+markers",
77
  name: "pH",
78
+ line: { color: "blue" }, // Цвет линии
79
  hovertemplate: data.days_of_week.map((day, index) =>
80
  `День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
81
  )
 
83
  title: `График pH за ${data.week}-ю неделю`,
84
  xaxis: { title: "Дата" },
85
  yaxis: {
86
+ title: "Уровень pH",
87
  titlefont: { size: 14 }
88
  },
89
+ hovermode: "closest",
90
+ showlegend: false // Отключаем легенду
91
  });
92
+
93
  Plotly.newPlot("ec_chart", [{
94
  x: data.dates,
95
  y: data.ec,
96
  type: "scatter",
97
  mode: "lines+markers",
98
  name: "EC",
99
+ line: { color: "green" }, // Цвет линии
100
  hovertemplate: data.days_of_week.map((day, index) =>
101
  `День недели: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
102
  )
 
104
  title: `График EC за ${data.week}-ю неделю`,
105
  xaxis: { title: "Дата" },
106
  yaxis: {
107
+ title: "Уровень EC",
108
  titlefont: { size: 14 }
109
  },
110
+ hovermode: "closest",
111
+ showlegend: false // Отключаем легенду
112
  });
113
 
114
  Plotly.newPlot("pump_chart", [
 
149
  title: `График работы насосов за ${data.week}-ю неделю`,
150
  xaxis: { title: "Дата" },
151
  yaxis: { title: "Состояние насосов" },
152
+ hovermode: "closest",
153
+ showlegend: false // Отключаем легенду
154
  });
155
  </script>
156
 
 
170
 
171
  </body>
172
  </html>