时间戳

首页 > 解决方案 > 调用 IP 时从现有数组创建 Google 折线图

javascript - 调用 IP 时从现有数组创建 Google 折线图

问题描述

我在 ESP8266 上创建了一个网络服务器，它使用谷歌仪表来显示当前温度数据和折线图来显示以前的数据。随着新数据的进入，仪表和折线图将更新。一切正常，当我调用 IP 时，折线图将显示并开始填充。问题是每个 IP 调用线图都从没有数据开始并重新填充，因为当初始化 dataTable 时，它​​会返回一个新的空数据表。在进行 IP 呼叫时，任何人都可以就从数据表中的现有数据数组创建折线图提出建议吗？谢谢。

更新折线图的代码：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart','gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart(){
      //Create opening gauges 
        var gaugeData = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Room 1', 0],
          ['Room 2', 0]
         ]);
       
        var gaugeOptions = {
          width: 800, height: 240,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(gaugeData, gaugeOptions);
        
      //Obtain new temperature data and update gauge and line graph
       
      setInterval(updateValues, 3000); 
       
      function updateValues() {
      //Obtain Room 1 temperature and update Google Gauge
      
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
      Room1temp = parseFloat(this.responseText);
      gaugeData.setValue(0, 1, Room1temp);
      chart.draw(gaugeData, gaugeOptions);
      }
    };
     xhttp.open("GET", "/Room1temp", true);
     xhttp.send();
    
      //Obtain Room 2 temperature and update Google Gauge
      
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
      Room2temp = parseFloat(this.responseText);
      gaugeData.setValue(1, 1, Room2temp);
      chart.draw(gaugeData, gaugeOptions);
      }
    };
     xhttp.open("GET", "/Room2temp", true);
     xhttp.send();
    };
      
    //Update Google line chart with timestamp and Room 1 & 2 temperatures
    
     var data = new google.visualization.DataTable();
       data.addColumn('datetime', 'Time');
       data.addColumn('number', 'Room 1');
       data.addColumn('number', 'Room 2');

     setInterval(updateGraph, 3000); 
       
      function updateGraph() {
       //create timestamp
      let date = new Date();
      var Year = date.getFullYear();
      var Month = date.getMonth();
      var Day = date.getDate();
      var Hour = date.getHours();
      var Min = date.getMinutes();
      var Sec = date.getSeconds();

      //Update line graph
      if(data.getNumberOfRows()<5){
       data.addRows([
         [new Date(Year,Month,Day,Hour,Min,Sec), parseFloat(Room1temp), parseFloat(Room2temp)]
         ]);

      } else {
       var view = new google.visualization.DataView(data);
       data.addRows([
         [new Date(Year,Month,Day,Hour,Min,Sec), parseFloat(Room1temp), parseFloat(Room2temp)]
         ]);
       data.removeRow(0);
       }

       var options = {
       title: 'Temperature Data',
       pointSize: 8
     };

      var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
      chart.draw(data, options); 
     
     };  //End function updateGraph

    } // End function drawChart

    </script>
  </head>
  <body>
    <div id="chart_div" style="width:600px;margin-left:auto;margin-right:auto"></div>
    <div id="curve_chart" style="width:1400px;margin-left:auto;margin-right:auto"></div>
  </body>
</html>

标签： javascriptchartsgoogle-visualization

解决方案

尝试连续进行 IP 调用，等待每个调用完成，
然后再继续下一个并更新图表。

请参阅以下片段...

google.charts.load('current', {
  packages: ['corechart', 'gauge']
}).then(function () {
  //Create opening gauges
  var gaugeData = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Room 1', 0],
    ['Room 2', 0]
   ]);

  var gaugeOptions = {
    width: 800, height: 240,
    redFrom: 90, redTo: 100,
    yellowFrom:75, yellowTo: 90,
    minorTicks: 5
  };

  var gaugeChart = new google.visualization.Gauge(document.getElementById('chart_div'));
  gaugeChart.draw(gaugeData, gaugeOptions);

  // line chart
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Time');
  data.addColumn('number', 'Room 1');
  data.addColumn('number', 'Room 2');

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

  var options = {
    title: 'Temperature Data',
    pointSize: 8
  };

  //Obtain new temperature data and update gauge and line graph
  setInterval(updateValues, 3000);

  function updateValues() {
    //Obtain Room 1 temperature and update Google Gauge
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        var Room1temp = parseFloat(this.responseText);
        gaugeData.setValue(0, 1, Room1temp);
        gaugeChart.draw(gaugeData, gaugeOptions);

        //Obtain Room 2 temperature and update Google Gauge
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState === 4 && this.status === 200) {
            var Room2temp = parseFloat(this.responseText);
            gaugeData.setValue(1, 1, Room2temp);
            gaugeChart.draw(gaugeData, gaugeOptions);

            //Update line graph
            if(data.getNumberOfRows()<5){
              data.addRows([
                [new Date(), parseFloat(Room1temp), parseFloat(Room2temp)]
              ]);
            } else {
              data.addRows([
                [new Date(), parseFloat(Room1temp), parseFloat(Room2temp)]
              ]);
              data.removeRow(0);
            }
            chart.draw(data, options);
          }
        };
        xhttp.open("GET", "/Room2temp", true);
        xhttp.send();
      }
    };
    xhttp.open("GET", "/Room1temp", true);
    xhttp.send();
  };
});

推荐阅读