调用 IP 时从现有数组创建 Google 折线图答案

【问题标题】：Create Google line graph from existing array when call IP调用 IP 时从现有数组创建 Google 折线图
【发布时间】：2020-11-28 14:38:22
【问题描述】：

我在 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>

【问题讨论】：

请您分享剩下的代码，特别是 IP 呼叫？
这里是完整的代码；
IP 呼叫只是我在网络浏览器中输入的 ESP8266 板的 IP 地址。它目前没有运行，但如有必要可以运行

标签： javascript charts google-visualization

【解决方案1】：

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

看下面的sn-p...

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

【讨论】：

很遗憾，在重新调用 URL 时，之前获取的数据仍然不会出现。折线图从没有数据开始继续重新填充。我想我需要将临时数据从 Ardunio ino 保存到 CSV 文件，然后使用 jjquery-csv 库和 google.visualization.arrayToDataTable() 导入数据