
Przykładowo ostatni pomiar z tempOUT ląduje do zmiennej wynik i potem do var temp, i dzięki temu mój wskaźnik zegarowy wyświetlać będzie tylko ostatni pomiar dzięki czemu będę miał aktualny podgląd aktualnej temperatury a to co w tabeli będzie rysowało wykres.
var temp = '<?= $wynik ?>';
<!doctype html> <html> <head> <meta http-equiv="Refresh" content="30" /> <style> body { background: #333; } /*Centering the gauge*/ canvas { display: inline; float: center; margin: 10px auto; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="./jquery.gauge.js"></script> </head> <body> <center> <?php $servername = "127.0.0.1"; $username = "esp"; $password = "esp"; $dbname = "esp"; $conn = new mysqli($servername, $username, $password, $dbname); $sql = "SELECT ID, wilgotnosc, tempOUT, odczuwalna, cisnienie, tempIN, data, czas FROM DOM ORDER BY id DESC LIMIT 10"; $result = $conn->query($sql); if ($result->num_rows >= 0) { echo '<tr> <td width="100px" bgcolor="silver" align="center">Pomiar wykonano o:</td> <td width="100px" bgcolor="gray" align="center">Temperatura zewnetrzna:</td> <td width="100px" bgcolor="silver" align="center">Temperatura odczuwalna:</td> <td width="100px" bgcolor="gray" align="center">Cisnienie:</td> <td width="100px" bgcolor="silver" align="center">Wilgotnosc:</td> <td width="100px" bgcolor="gray" align="center">Temperatura wewnatrz:</td> </tr>'; while($row = $result->fetch_assoc()) { echo '<tr> <td bgcolor="silver" align="center">' . $row["czas"].'</td> <td bgcolor="gray" align="center">' . $row["tempOUT"].'</td> <td bgcolor="silver" align="center">' . $row["odczuwalna"].'</td> <td bgcolor="gray" align="center">' . $row["cisnienie"].'</td> <td bgcolor="silver" align="center">' . $row["wilgotnosc"].'</td> <td bgcolor="gray" align="center">' . $row["tempIN"]. "</td> </tr>"; } } else { } $conn->close(); ?> <canvas id="gauge1" width="200" height="200"></canvas> <canvas id="gauge2" width="200" height="200"></canvas> <canvas id="gauge3" width="200" height="200"></canvas> <script> $sql = "SELECT ID, wilgotnosc FROM DOM ORDER BY id DESC LIMIT 1"; var temp = '<?= $wynik ?>'; $(document).ready(function (){ $("#gauge1").gauge(temp, {color: "#F44336", unit: " °C"}); $("#gauge2").gauge(70, {color: "#8BC34A", unit: " %", font: "40px verdana"}); $("#gauge3").gauge(37, {unit: "°C"}); }); </script> </body> </html>