Update online.html
Browse files- online.html +80 -15
online.html
CHANGED
@@ -468,7 +468,8 @@ document.getElementById("but_sliv").addEventListener("click", function() {
|
|
468 |
<script>
|
469 |
// Объект для хранения истории данных (до 60 значений)
|
470 |
let dataHistory = {
|
471 |
-
labels: [], //
|
|
|
472 |
ph: [],
|
473 |
ec: [],
|
474 |
tS: [],
|
@@ -477,24 +478,79 @@ document.getElementById("but_sliv").addEventListener("click", function() {
|
|
477 |
sVen: []
|
478 |
};
|
479 |
|
480 |
-
// Инициализация графика Plotly
|
481 |
const layout = {
|
482 |
-
title: "
|
483 |
xaxis: {
|
484 |
-
showticklabels: false // Убираем метки
|
485 |
},
|
486 |
yaxis: { title: "Значения" },
|
487 |
showlegend: true,
|
488 |
-
height: 400
|
|
|
489 |
};
|
490 |
|
491 |
const traces = [
|
492 |
-
{
|
493 |
-
|
494 |
-
|
495 |
-
|
496 |
-
|
497 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
498 |
];
|
499 |
|
500 |
// Создаём график сразу, но с пустыми данными
|
@@ -528,8 +584,9 @@ document.getElementById("but_sliv").addEventListener("click", function() {
|
|
528 |
}
|
529 |
|
530 |
function updateDataHistory(data) {
|
531 |
-
// Добавляем новые
|
532 |
-
dataHistory.labels.push(dataHistory.labels.length);
|
|
|
533 |
dataHistory.ph.push(parseFloat(data.ph) || 0);
|
534 |
dataHistory.ec.push(parseFloat(data.ec) || 0);
|
535 |
dataHistory.tS.push(parseFloat(data.tS) || 0);
|
@@ -538,8 +595,9 @@ document.getElementById("but_sliv").addEventListener("click", function() {
|
|
538 |
dataHistory.sVen.push(parseFloat(data.sVen) || 0);
|
539 |
|
540 |
// Если больше 60 значений, удаляем первое
|
541 |
-
if (dataHistory.labels.length >
|
542 |
dataHistory.labels.shift();
|
|
|
543 |
dataHistory.ph.shift();
|
544 |
dataHistory.ec.shift();
|
545 |
dataHistory.tS.shift();
|
@@ -567,6 +625,14 @@ document.getElementById("but_sliv").addEventListener("click", function() {
|
|
567 |
dataHistory.tA,
|
568 |
dataHistory.hDm,
|
569 |
dataHistory.sVen
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
570 |
]
|
571 |
});
|
572 |
}
|
@@ -595,7 +661,6 @@ document.getElementById("but_sliv").addEventListener("click", function() {
|
|
595 |
|
596 |
|
597 |
|
598 |
-
|
599 |
|
600 |
</body>
|
601 |
</html>
|
|
|
468 |
<script>
|
469 |
// Объект для хранения истории данных (до 60 значений)
|
470 |
let dataHistory = {
|
471 |
+
labels: [], // Индексы для оси X
|
472 |
+
times: [], // Отдельный массив для времени (только для карточек)
|
473 |
ph: [],
|
474 |
ec: [],
|
475 |
tS: [],
|
|
|
478 |
sVen: []
|
479 |
};
|
480 |
|
481 |
+
// Инициализация графика Plotly
|
482 |
const layout = {
|
483 |
+
title: "График последних 60 значений параметров",
|
484 |
xaxis: {
|
485 |
+
showticklabels: false // Убираем метки на оси X
|
486 |
},
|
487 |
yaxis: { title: "Значения" },
|
488 |
showlegend: true,
|
489 |
+
height: 400,
|
490 |
+
hovermode: "closest" // Показываем карточку для ближайшей точки
|
491 |
};
|
492 |
|
493 |
const traces = [
|
494 |
+
{
|
495 |
+
x: dataHistory.labels,
|
496 |
+
y: dataHistory.ph,
|
497 |
+
name: "pH",
|
498 |
+
mode: "lines",
|
499 |
+
line: { color: "blue" },
|
500 |
+
customdata: dataHistory.times, // Привязываем время для карточек
|
501 |
+
hovertemplate: "<b>pH: %{y}</b><br>Время: %{customdata}<extra></extra>",
|
502 |
+
hoverlabel: { bgcolor: "blue", font: { color: "white" } }
|
503 |
+
},
|
504 |
+
{
|
505 |
+
x: dataHistory.labels,
|
506 |
+
y: dataHistory.ec,
|
507 |
+
name: "EC",
|
508 |
+
mode: "lines",
|
509 |
+
line: { color: "green" },
|
510 |
+
customdata: dataHistory.times,
|
511 |
+
hovertemplate: "<b>EC: %{y}</b><br>Время: %{customdata}<extra></extra>",
|
512 |
+
hoverlabel: { bgcolor: "green", font: { color: "white" } }
|
513 |
+
},
|
514 |
+
{
|
515 |
+
x: dataHistory.labels,
|
516 |
+
y: dataHistory.tS,
|
517 |
+
name: "Т. раствора",
|
518 |
+
mode: "lines",
|
519 |
+
line: { color: "red" },
|
520 |
+
customdata: dataHistory.times,
|
521 |
+
hovertemplate: "<b>Т. раствора: %{y}</b><br>Время: %{customdata}<extra></extra>",
|
522 |
+
hoverlabel: { bgcolor: "red", font: { color: "white" } }
|
523 |
+
},
|
524 |
+
{
|
525 |
+
x: dataHistory.labels,
|
526 |
+
y: dataHistory.tA,
|
527 |
+
name: "Т. воздуха",
|
528 |
+
mode: "lines",
|
529 |
+
line: { color: "orange" },
|
530 |
+
customdata: dataHistory.times,
|
531 |
+
hovertemplate: "<b>Т. воздуха: %{y}</b><br>Время: %{customdata}<extra></extra>",
|
532 |
+
hoverlabel: { bgcolor: "orange", font: { color: "white" } }
|
533 |
+
},
|
534 |
+
{
|
535 |
+
x: dataHistory.labels,
|
536 |
+
y: dataHistory.hDm,
|
537 |
+
name: "Вл. воздуха",
|
538 |
+
mode: "lines",
|
539 |
+
line: { color: "purple" },
|
540 |
+
customdata: dataHistory.times,
|
541 |
+
hovertemplate: "<b>Вл. воздуха: %{y}</b><br>Время: %{customdata}<extra></extra>",
|
542 |
+
hoverlabel: { bgcolor: "purple", font: { color: "white" } }
|
543 |
+
},
|
544 |
+
{
|
545 |
+
x: dataHistory.labels,
|
546 |
+
y: dataHistory.sVen,
|
547 |
+
name: "Об. вентилятора",
|
548 |
+
mode: "lines",
|
549 |
+
line: { color: "brown" },
|
550 |
+
customdata: dataHistory.times,
|
551 |
+
hovertemplate: "<b>Об. вентилятора: %{y}</b><br>Время: %{customdata}<extra></extra>",
|
552 |
+
hoverlabel: { bgcolor: "brown", font: { color: "white" } }
|
553 |
+
}
|
554 |
];
|
555 |
|
556 |
// Создаём график сразу, но с пустыми данными
|
|
|
584 |
}
|
585 |
|
586 |
function updateDataHistory(data) {
|
587 |
+
// Добавляем новые значения
|
588 |
+
dataHistory.labels.push(dataHistory.labels.length); // Просто индексы для оси X
|
589 |
+
dataHistory.times.push(new Date().toLocaleTimeString()); // Только время для карточек
|
590 |
dataHistory.ph.push(parseFloat(data.ph) || 0);
|
591 |
dataHistory.ec.push(parseFloat(data.ec) || 0);
|
592 |
dataHistory.tS.push(parseFloat(data.tS) || 0);
|
|
|
595 |
dataHistory.sVen.push(parseFloat(data.sVen) || 0);
|
596 |
|
597 |
// Если больше 60 значений, удаляем первое
|
598 |
+
if (dataHistory.labels.length > 60) {
|
599 |
dataHistory.labels.shift();
|
600 |
+
dataHistory.times.shift();
|
601 |
dataHistory.ph.shift();
|
602 |
dataHistory.ec.shift();
|
603 |
dataHistory.tS.shift();
|
|
|
625 |
dataHistory.tA,
|
626 |
dataHistory.hDm,
|
627 |
dataHistory.sVen
|
628 |
+
],
|
629 |
+
customdata: [
|
630 |
+
dataHistory.times,
|
631 |
+
dataHistory.times,
|
632 |
+
dataHistory.times,
|
633 |
+
dataHistory.times,
|
634 |
+
dataHistory.times,
|
635 |
+
dataHistory.times
|
636 |
]
|
637 |
});
|
638 |
}
|
|
|
661 |
|
662 |
|
663 |
|
|
|
664 |
|
665 |
</body>
|
666 |
</html>
|