Wie bekomme ich Echtzeitgraph mit Google Charts?

Question

Ich bin Python-Entwickler für Desktop-Anwendungen, aber ich fand, dass Google-Charts für mein IOT-Projekt ziemlich einfach zu wählen und zu arbeiten sind. Ich wollte wissen, ob es möglich ist, einen Echtzeit-Graphen mit Daten von Sensoren zu haben.

Ich möchte ein Liniendiagramm, so etwas wie EPOCH hat,

habe ich versucht, diese page aber es tut Echtzeit sehen, ich will Temperatur/Feuchte/regen/Feuchtigkeits-Update auf einer Webseite angezeigt werden.

Answer 1

könnten Sie $.ajax verwenden und setInterval-simulieren Realtime

eine Einrichtung ähnlich der folgenden verwenden,
dies das Diagramm alle 10 Sekunden ...

google.charts.load('current', { 
    callback: function() { 

    drawChart(); 
    setInterval(drawChart, 10000); 

    function drawChart() { 
     $.ajax({ 
     url: 'get sensor data', 
     type: 'get', 
     success: function (json) { 
      var data = google.visualization.arrayToDataTable(json); 
      var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
      chart.draw(data); 
     } 
     }); 
    } 

    }, 
    packages: ['corechart'] 
}); 

Answer 2

Eine Option ziehen würde würde um ein Ereignis auszulösen, wenn die Daten aktualisiert werden. Wenn Ihr IOT-Projekt das Schieben von Daten unterstützt (anstatt beispielsweise über Ajax zu holen), ist das alles, was Sie brauchen. Wenn Sie eine Echtzeitdatenbank wie Firebase verwenden, ist es noch einfacher.

Wenn Sie in diesem Beispiel globale Variablen verwenden, können bei Verwendung eines JS-Frameworks andere Methoden zum Verfolgen von Daten verwendet werden. Nachdem das Diagramm als normale Initialisierung, könnte man es mit so etwas wie dieses Update:

// Your IOT project could trigger a javascript event, 
// or plug it into Firebase and listen for changes. 
onEvent("newData", function(data) { 
var data = google.visualization.arrayToDataTable([ 
    ['Task',  data.Task], 
    ['Work',  data.Work], 
    ['Eat',  data.Eat], 
    ['Commute', data.Commute], 
    ['Watch TV', data.Tv], 
    ['Sleep', data.Sleep] 
    ]); 
    chart.draw(data, options); 
});