Wie erstellt man ein aktives und dynamisches Balkendiagramm von Mysql, PHP?

Question

Nur um den Titel zu verdeutlichen, möchte ich ein Balkendiagramm erstellen, das die Daten aus der Datenbanktabelle mit MySql liest und die Höhe automatisch an die neuen Daten anpasst. Die Daten werden über einen Arduino-Mikrocontroller in die Datenbank eingespeist, so dass die Daten kontinuierlich alle 0,5 Sekunden hinzugefügt werden. Ich möchte, dass das Diagramm die Daten erkennt und entsprechend vergrößert. Gibt es eine Möglichkeit, dies zu tun, ohne die Webseite alle 0,5 Sekunden ständig zu aktualisieren?

Answer 1

Bitte aktualisieren Sie nicht die ganze Seite alle 0,5 Sekunden. Es gibt einen besseren Weg!

Wenn Sie nicht zu JQuery Gegensatz sind, verwenden

$("#someDiv").load("somePage.PHP"); 

Wenn keine jquery, zu verwenden:

var xhttp; 
    if (str.length == 0) { 
    document.getElementById("someDiv").innerHTML = ""; 
    return; 
    } 
    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("someDiv").innerHTML = xhttp.responseText; 
    } 
    }; 
    xhttp.open("GET", "somePage.PHP", true); 
    xhttp.send(); 

Jetzt ein div machen, den Inhalt zu laden:

<div id="someDiv"> 

Auf der geladenen PHP-Seite möchten Sie das Diagramm zeichnen. Diese Methode verwendet das Balkendiagramm von Chart.js: http://www.chartjs.org/docs/#bar-chart

Siehe den Link für weitere Details. Ihr Code wird in etwa so aussehen:

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      backgroundColor: "rgba(255,99,132,0.2)", 
      borderColor: "rgba(255,99,132,1)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
      hoverBorderColor: "rgba(255,99,132,1)", 
      data: [65, 59, 80, 81, 56, 55, 40], 
     } 
    ] 
}; 
var myBarChart = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: options 
}); 

Answer 2

Sie könnten AJAX verwenden, um alle 0,5 Sekunden einen Aufruf an ein Skript auszuführen, das nur einen Teil Ihrer Seite aktualisiert (das Diagramm). Über AJAX können Sie das Diagramm entsprechend den Daten ändern, die es von einem PHP-Skript (oder einem anderen Skript) mit Javascript abruft.