Cześć!
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
$param1 = str_replace("/data.php?", "", $_SERVER['REQUEST_URI']);
$param2 = str_replace("%20"," ", $param1);
$param3 = str_replace("%3C","<", $param2);
$param4 = str_replace("%3E",">", $param3);
$sql=$param4;
$result = $conn->query($sql);
$pt=array();
if ($result->num_rows > 0) {
// output data of each row
while($row = mysqli_fetch_array($result)) {
$pt[]=array("x" =>$row['x'],"y" =>$row['y']);
}
}
echo json_encode($pt, JSON_NUMERIC_CHECK);
?>
index.php
<script type="text/javascript">
// pobierz to co wypluje i zapisz do zmiennej content
$(function () {
function mysql(){
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();
});
};
setInterval(mysql, 1000);
mysql();
});
</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