創建從火力點到谷歌圖表的2個溫度讀數圖表

Question

我有2個tempsensors，每10分鐘發送一次溫度到firebase。 我火力的結構是這樣的：

{ 
AB: { 
    -K9kbKg4iqzaGP_mbKIC: { 
    date: "05 Feb 2016 08:47:27 +0000", 
    value: "013.2" 
    }, 
    BattLevel: {} 
}, 
AC: { 
    -K9kaqlycXMDbH-LpVrH: { 
    date: "05 Feb 2016 08:45:19 +0000", 
    value: "009.4" 
    }, 
    BattLevel: {} 
    } 
} 

我想創建一個谷歌圖表

但我似乎並沒有得到JSON解析賴特。 如果我將json路徑設置爲 https://tempraspberry.firebaseio，我可以添加1個傳感器的溫度來顯示。 com/AB.json

/<script> 

    // onload callback 
    function drawChart() { 

     // JSONP request 
     var jsonData = $.ajax({ 
      url: 'https://tempraspberry.firebaseio.com/AB.json', 
      data: {page: 1}, 
      dataType: 'jsonp', 
     }).done(function (results) { 

      var data1 = new google.visualization.DataTable(); 

      data1.addColumn('datetime', 'Time'); 
      data1.addColumn('number', 'Temp'); 

      $.each(results, function (i, row) { 
       data1.addRow([ 
        (new Date(row.date)), 
        parseFloat(row.value) 
       ]); 
      }); 

      //tweede chart 

      var jsonData = $.ajax({ 
       url: 'https://tempraspberry.firebaseio.com/AC.json', 
       data: {page: 1}, 
       dataType: 'jsonp', 
      }).done(function (results) { 

       var data2 = new google.visualization.DataTable(); 

       data2.addColumn('datetime', 'Time'); 
       data2.addColumn('number', 'Temp'); 

       $.each(results, function (i, row) { 
        data2.addRow([ 
         (new Date(row.date)), 
         parseFloat(row.value) 
        ]); 
       }); 

      }); 
      //einde tweede chart 
     }); 
     var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]); 

     var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); 
     chart.draw(joinedData, { 
      height: 300, 
      width: 600, 
      interpolateNulls: true 
     }); 
    } 

    // load chart lib 
    google.load('visualization', '1', { 
     packages: ['corechart'] 
    }); 

    // call drawChart once google charts is loaded 
    google.setOnLoadCallback(drawChart); 

</script> 

我用上面的代碼找不到變量data1。

Answer 1

看起來像一個範圍問題，聲明DataTable前面，這樣的事情...

function drawChart() { 
    var data; 
    var sensors; 

    sensors = ['AB', 'AC']; 
    data = new google.visualization.DataTable(); 
    data.addColumn('datetime', 'Time'); 
    data.addColumn('number', 'Temp'); 

    // start process 
    requestData(); 

    function requestData() { 
    var nextSensor; 

    if (sensors.length > 0) { 
     nextSensor = sensors.pop(); 
     $.ajax({ 
     url: 'https://tempraspberry.firebaseio.com/' + nextSensor + '.json', 
     data: {page: 1}, 
     dataType: 'jsonp', 
     }).done(loadData); 
    } else { 
     loadChart(); 
    } 
    } 

    function loadData(results) { 
    $.each(results, function (i, row) { 
     data.addRow([ 
     (new Date(row.date)), 
     parseFloat(row.value) 
     ]); 
    }); 
    requestData(); 
    } 

    function loadChart() { 
    var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); 
    chart.draw(data, { 
     height: 300, 
     width: 600, 
     interpolateNulls: true 
    }); 
    } 
} 

google.load('visualization', '1', { 
    packages: ['corechart'] 
}); 
google.setOnLoadCallback(drawChart); 

Answer 2

感謝有小的調整現在的工作。 我現在有2個數據表顯示在一個Google圖表上。 我知道大概的代碼是不漂亮，但它工作:-)

<script> 

function drawChart() { 
    var data1; 
    var data2; 
    var sensors; 

    sensors = ['AB', 'AC']; 

    data1 = new google.visualization.DataTable(); 
    data2 = new google.visualization.DataTable(); 
    data1.addColumn('date', 'Tijd'); 
    data1.addColumn('number', 'Paleis Zora'); 
    data2.addColumn('date', 'Tijd'); 
    data2.addColumn('number', 'Buiten'); 

    // start process 
    requestData(); 

    function requestData() { 

      $.ajax({ 
       url: 'https://tempraspberry.firebaseio.com/AB.json', 
       data: {page: 1}, 
       dataType: 'jsonp', 
      }).done(loadData); 
     } 

    //eerste datatable 
    function loadData(results) { 
     $.each(results, function (i, row) { 
      data1.addRow([ 
       (new Date(row.date)), 
       parseFloat(row.value) 
      ]); 
     }); 
     requestData2(); 
    } 
    //tweededatatable 
    function requestData2() { 

     $.ajax({ 
      url: 'https://tempraspberry.firebaseio.com/AC.json', 
      data: {page: 1}, 
      dataType: 'jsonp', 
     }).done(loadData2); 
    } 

    //eerste datatable 
    function loadData2(results) { 
     $.each(results, function (i, row) { 
      data2.addRow([ 
       (new Date(row.date)), 
       parseFloat(row.value) 
      ]); 
     }); 
     loadChart(); 
    } 



    function loadChart() { 
     var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]); 

     var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); 
     chart.draw(joinedData, { 
      height: 500, 
      width: 800, 
      interpolateNulls: true 
     }); 
    } 

} 



google.load('visualization', '1', {packages:['corechart'], callback: drawChart});