即使数据已加载,数据也需要时间反映在Google规格中

时间:2017-01-21 11:20:21

标签: javascript jquery ajax google-visualization setinterval

我已经编写了下面的代码,但数据需要时间反映在google规范中,即使数据已加载且google gauge将设置为0作为初始值!

var url = 'http://san.gotdns.ch:8025/json'; 
var sensorData;

function removeTable(id)   {
      var tbl = document.getElementById(id);
      if(tbl) tbl.parentNode.removeChild(tbl);   
      }


//------------- Google Gauge -------------------//

// global variables 
var chart, humidityChart, data, humidityData; 
// maximum value for the gauge 
var max_gauge_value = 70; 
// name of the gauge 
var gauge_name = 'Temperature'; 
var outTemp, drwngRomTemp, outHumidity, drwRomHumid;

var hoptions = { animation:{
      duration: 1000,
      easing: 'inAndOut'
    },   min: 0,   max: 100,   redFrom: 90, redTo: 100,   yellowFrom:75, yellowTo: 90,   minorTicks: 5 
};

// load the google gauge visualization google.load('visualization', '1', {'packages':['gauge']}); google.setOnLoadCallback(initChart);

// display the data 

function displayData(outTemp, drwngRomTemp, outHumidity, drwRomHumid) {
chart.draw(data, options);
data.setValue(0, 0, gauge_name);
data.setValue(0, 1, outTemp);
data.setValue(1, 0, gauge_name);
data.setValue(1, 1, drwngRomTemp);
humidityChart.draw(humidityData, hoptions);
humidityData.setValue(0, 0, "Humidity");
humidityData.setValue(0, 1, outHumidity);
humidityData.setValue(1, 0, "Humidity");
humidityData.setValue(1, 1, drwRomHumid);
removeTable("pullingDataMsg") }

// load the data function loadData() {
      // get the data from arduino

    $.ajax({
      url: url,
      data: {
         format: 'json'
      },

      dataType: 'json',
      crossDomain: true,
      success: function(sensorData) {
        // set the sensor data pulled from arduino to global variable sensorData
          outTemp = sensorData.arduino[0].temperatureInC;
          drwngRomTemp = sensorData.arduino[1].temperatureInC;
          outHumidity = sensorData.arduino[0].humidity;
          drwRomHumid = sensorData.arduino[1].humidity;

          displayData(outTemp, drwngRomTemp, outHumidity, drwRomHumid);
      },

      type: 'GET'    
          });   }

  // initialize the chart   function initChart() {
    var initTempData = {
              "cols": [
                {"id":"","label":"Label","pattern":"","type":"string"},
                {"id":"","label":"Temperature","pattern":"","type":"number"}
              ],
              "rows": [
                {"c":[{"v":"Temperature","f":null},{"v":-20,"f":null}]},
                {"c":[{"v":"Temperature","f":null},{"v":-20,"f":null}]}
              ]
            };

    data = new google.visualization.DataTable(initTempData);

    options = { 
      greenFrom: 10,
      greenTo: 29,
      redFrom: 41,
      redTo: 70,
      yellowFrom:30,
      yellowTo: 40,
      majorTicks : ['-10', '0', '10','20','30','40','50', '55'],
      minorTicks: 5 ,
      animation:{
              duration: 1000,
              easing: 'inAndOut'
            },
      min: -10,
      max: 55,
      greenColor: '#CCFFCC',
      yellowColor: '#FFFFCC',
      redColor: '#F78181'
    };

    chart = new google.visualization.Gauge(document.getElementById('gauge_div'));

    var initHumidData = {
              "cols": [
                {"id":"","label":"Label","pattern":"","type":"string"},
                {"id":"","label":"Humidity","pattern":"","type":"number"}
              ],
              "rows": [
                {"c":[{"v":"Humidity","f":null},{"v":0,"f":null}]},
                {"c":[{"v":"Humidity","f":null},{"v":0,"f":null}]}
              ]
            };


    humidityData = new google.visualization.DataTable(initHumidData);

    humidityChart = new google.visualization.Gauge(document.getElementById('humidity_gauge_div'));

    loadData();

    // load new data every 10 seconds
    setInterval('loadData()', 10000);   }

整个意图是在谷歌图表API的开头制作动画,我做错了什么?

0 个答案:

没有答案