Pracuję nad projektem studenckim, który ma na celu aktualizowanie na żywo wykresów wyświetlanych na stronie. Co mam:
data.php
<?php $servername = "localhost"; $username = ""; $password = ""; $dbname = ""; // Create connection $conn = mysqli_connect($servername, $username, $password, $dbname); //echo str_replace("/data.php?", "", $_SERVER['REQUEST_URI']); //$sql = "SELECT id, x, y FROM Dane"; oryginal $sql=$param4; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = mysqli_fetch_array($result)) { } } ?>
index.php
<script type="text/javascript"> // pobierz to co wypluje i zapisz do zmiennej content $(function () { var field1=document.getElementById("num1").value; var field2=document.getElementById("num2").value; var field3=document.getElementById("num3").value; if(field1<=0){ field1=1; }; if(field2<=0){ field2=1; }; if(field3<=0){ field3=1; }; if(field3<field2){ field2=1; field3=1; document.getElementById("demo2").innerHTML = "Błędna wartość!"; }; var MySQL1; $.get("data.php?SELECT id, x, y FROM Dane "+"ORDER BY id DESC LIMIT "+field1, function( MySQL1 ) { var przetwarzanie1 = JSON.parse(MySQL1); var probkiwykres1 = przetwarzanie1; var str = MySQL1; var res = str.replace("[{", ""); var res1 = res.replace("}]", ""); var res2 = res1.replace(":", " = "); var res3 = res2.replace(":", " = "); var res4 = res3.slice(1,27); var res5 = res4.replace("x", "Czas"); var res6 = res5.replace("y", "Temperatura"); document.getElementById("demo").innerHTML = res6; var chart1 = new CanvasJS.Chart("chartContainer1", { title: { text: "Ostatnia wartosc" }, axisY :{ title: "Temperatura", titleFontSize: 18, suffix: " C" }, axisX :{ title: "Czas", suffix: " s" }, data: [{ type: "line", dataPoints: probkiwykres1 }] }); chart1.render(); }); var MySQL2; $.get("data.php?SELECT id, x, y FROM Dane WHERE x BETWEEN "+field2+" AND "+field3, function( MySQL2 ) { var przetwarzanie2 = JSON.parse(MySQL2); var probkiwykres2 = przetwarzanie2; var chart2 = new CanvasJS.Chart("chartContainer2", { title: { text: "Temperatura" }, axisY :{ title: "Temperatura", titleFontSize: 18, suffix: " C" }, axisX :{ title: "Czas", suffix: " s" }, data: [{ type: "line", dataPoints: probkiwykres2 }] }); chart2.render(); }); var MySQL3; $.get("data.php?SELECT id, x, y FROM Dane", function( MySQL3 ) { var przetwarzanie3 = JSON.parse(MySQL3); var probkiwykres3 = przetwarzanie3; var chart3 = new CanvasJS.Chart("chartContainer3", { title: { text: "Temperatura" }, axisY :{ title: "Temperatura", titleFontSize: 18, suffix: " C" }, axisX :{ title: "Czas", suffix: " s" }, data: [{ type: "line", dataPoints: probkiwykres3 }] }); chart3.render(); }); }; }); </script>
W index.php wyświetlam również wykresy. Jak widać, w .get() generuje ścieżkę do data.php wraz za zapytaniem do MySQL. Wiem, że kod jest toporny i niebezpieczny, ale nie miałem wcześniej doczynienia z JS, a PHP+HTML coś tam liznąłem.
Kwestia jest taka, że po zostawieniu odpalonej strony w przeglądarce (Mozilla), po 15 minutach zużycie ramu sięga 5 GB. Na telefonie strona działa może pół minuty i wywala się przeglądarka.
Dlaczego zastosowałem takie rozwiązanie? Mam hosting home.pl i nie mogę zainstalować Node.JS do łączenia z MySQL w JS. Zatem poszedłem okrężną drogą. To jedyne rozwiązanie jakie udało mi się wykonać aby móc w czasie rzeczywistym wyświetlać dane na wykresie i manipulować przedziałami ich wyświetlania.
Pytanie: czy jest możliwość ogarnięcia tego w ten lub inny sposób, tak aby przeglądarka nie zapychała się? Jakieś zerowanie zmiennych? Wydawało mi się, że nowo pobrane wartości z dane.php do zmiennej będą ją nadpisywać, a wygląda na to, że tak nie jest.
Dziękuję za wszelką pomoc
Pozdrawiam