Question

我是python桌面应用程序开发人员，但我发现google-charts非常容易选择和使用我的IOT项目，我想知道是否有可能有一个实时图形，其中有来自传感器的数据。

我想要一个类似EPOCH的线图，

我试过这个page，但它看起来并不实时，我想要在网页上显示温度/湿度/雨水/湿度更新。

Answer 1

您可以使用$.ajax和setInterval 模拟实时

使用类似于以下的设置，
这会每隔10秒绘制一次图表......

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

一个选项是在数据更新时使用触发事件。如果您的IOT项目支持推送数据（而不是通过ajax获取），那么您只需要这些。如果您使用Firebase等实时数据库，那么它就更简单了。

在此示例中使用全局变量，如果使用JS框架，则可能还有其他跟踪数据的方法。正常初始化图表后，您可以使用以下内容进行更新：

// 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);
});

Answer 3

    <script type="text/javascript">
  google.charts.load('current', {'packages':['scatter']});
  google.charts.setOnLoadCallback(drawChart);
  var contador = 0;
  function fill(chart,options){
        var json_prepared = new Array();        
      $.ajax({
        url: 'http://localhost/data.php',
        type: 'POST',
        async: false,
        dataType: 'json'
    })
    .done(function(res) {
        // console.log(res);
        console.log("success");
        for (var i = res.length - 1; i >= 0; i--) {
            var ano = res[i][0];
            var mes = res[i][1];
            var dia = res[i][2];
            var hora = res[i][3];
            var fecha = new Date(ano,mes,dia);
            var elemento  = new Array(fecha,hora);
            json_prepared.push(elemento);
        }
    })
     .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Alertas');
    data.addColumn('number', 'Alertas');
    console.log(json_prepared);
         data.addRows(json_prepared);
        chart.draw(data, google.charts.Scatter.convertOptions(options));
        console.log('actualizado');
  }
  function drawChart () {
    contador++;
    $.ajax({
        url: 'http://localhost/data.php',
        type: 'POST',
        dataType: 'json',
    })
    .done(function(res) {
        var json_prepared = new Array();        
        console.log("success");
        for (var i = res.length - 1; i >= 0; i--) {
            var ano = res[i][0];
            var mes = res[i][1];
            var dia = res[i][2];
            var hora = res[i][3];
            var fecha = new Date(ano,mes,dia);
            var elemento  = new Array(fecha,hora);
            json_prepared.push(elemento);
        }
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Datas');
        console.log(json_prepared);
         data.addRows(json_prepared);
    var options = {
      width: 800,
      height: 650,
      chart: {
        title: 'Students\' Final Grades',
        subtitle: 'based on hours studied'
      },    
      hAxis: {
             title: "Date",
      },
      vAxis: {
        title: "Houar"         
      }
    };
    var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));
    google.visualization.events.addListener(chart, 'error', function (googleError) {
        console.log(googleError);
  google.visualization.errors.removeError(googleError.id);
  document.getElementById("error_msg").innerHTML = "Message removed = '" + googleError.message + "'";}); chart.draw(data, google.charts.Scatter.convertOptions(options));setInterval(function(){
        console.log(chart);
        fill(chart,options);
    },3000); })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
  }
</script>

如何使用谷歌图表获取实时图表？

3 个答案: