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 = http://www.php.net/str_replace("/data.php?", "", $_SERVER['REQUEST_URI']); $param2 = http://www.php.net/str_replace("%20"," ", $param1); $param3 = http://www.php.net/str_replace("%3C","<", $param2); $param4 = http://www.php.net/str_replace("%3E",">", $param3); $sql=$param4; $result = $conn->query($sql); $pt=http://www.php.net/array(); if ($result->num_rows > 0) { // output data of each row while($row = mysqli_fetch_array($result)) { $pt[]=http://www.php.net/array("x" =>$row['x'],"y" =>$row['y']); } } http://www.php.net/echo json_encode($pt, JSON_NUMERIC_CHECK); ?>
<script type="text/javascript"> // pobierz to co wypluje i zapisz do zmiennej content $(function () { function http://www.php.net/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(http://www.php.net/mysql, 1000); http://www.php.net/mysql(); }); </script>
co ja Ci mogę napisać.... z jeden strony nie chcę Ci klepać gotowca bo co mi z tego, a z drugiej bez gotowca przy Twoim poziomie wiedzy będziesz się dalej babrał bez sensu.
to że wykres ma się aktualizować co sekundę to nie jest problem, można tak zrobić i będzie to działało dobrze. Nad czym musisz popracować:
- robisz 3 requesty do serwera, po co ? wystarczy jeden, który zwróci Ci dane dla wszystkich wykresów. Pamiętaj że każdy kolejny request, to zapychacz dla serwera i przeglądarki.
- im wykres ma większą pulę danych do narysowania, tym jest "mniej wydajny", dlatego wraz z upływem czasu wzrasta zużycie zasobów. Rozwiązanie ? Ogranicz liczbę rysowanych punktów, np do max 100 - starsze usuwasz z puli. Są skrypty wykresów które mogą wydajnie pomieścić nawet setki tyś punktów, lecz raczej nie wykonuje się na nich tak częstych aktualizacji.
- teraz to może nie ma dla Ciebie znaczenia, ale należałoby odliczać czas do kolejnej aktualizacji dopiero po tym jak wykresy się zaktualizują - czyli wywołujesz funkcję która odpytuje serwer, czekasz na odpowiedź, aktualizujesz wykresy i dopiero odliczasz sekundę.
- koniecznie zacznij od zmiany tych kwiatków : $.get("data.php?SELECT id, x, y FROM Dane "+"ORDER BY id DESC LIMIT "+field1, function( MySQL1 ) {
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)