firebaseデータベースからGoogleグラフを描くことができません

Question

firebaseに格納されている単純なセンサーの読みを、Googleグラフの基本線グラフで視覚化したいと思います。

データは、このように構成されています

KgPdzr3PgDaKVa73asd: { 
    date: "29/03/201 
    time: "15:21:07" 
    value: 21.461541056632996 
} 

残念ながら、折れ線グラフがロードされないだろう、と私はその理由を把握することはできません。 jsonオブジェクトは正常に読み込まれているので、描画部分と関係があると思います。正しい方向への助けがあれば幸いです。

<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script> 
 
    <script src=" http://www.google.com/uds/modules/gviz/gviz-api.js"></script> 
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
    <script src="https://www.google.com/jsapi"></script> 
 
    <script type="text/javascript"> 
 

 
     // Initialize Firebase 
 
     var config = { 
 
      apiKey: "AIzaSyBGiHpuzcgw_Ettlko_oU66U-gbW_SbEUA", 
 
      authDomain: "internet-of-things-62d39.firebaseapp.com", 
 
      databaseURL: "https://internet-of-things-62d39.firebaseio.com", 
 
      projectId: "internet-of-things-62d39", 
 
      storageBucket: "internet-of-things-62d39.appspot.com", 
 
      messagingSenderId: "143567304866" 
 
     }; 
 
     firebase.initializeApp(config); 
 

 
     var database = firebase.database(); 
 

 

 
     firebase.database().ref('/Oslo/temperature').once('value').then(function(snapshot) { 
 
      temps = snapshot.val(); 
 
      console.log(temps); 
 

 
      google.charts.load('current', {'packages':['corechart','line']}); 
 
      google.charts.setOnLoadCallback(drawChart(temps)); 
 
     }); 
 

 
     function parse (temp){ 
 
      return(new Date(temp.replace(/-/g, '/'))).getTime() 
 
     } 
 

 
     // google.charts.load('current', {'packages':['corechart', 'line']}); 
 
     // google.charts.setOnLoadCallback(drawChart); 
 

 
     function drawChart(temps) { 
 
      var array = $.map(temps, function(value, index) { 
 
       return [value]; 
 
      }); 
 

 
      var data = new google.visualization.DataTable(); 
 
      data.addColumn('number', 'date'); 
 
      data.addColumn('number', 'time'); 
 
      data.addColumn('number', 'value'); 
 

 
      var sort = function(a,b){return parse (a.time) - parse(b.time)}; 
 
      var tempData = array.sort(sort); 
 
      var output=[]; 
 

 
      for (var i = 0; i<tempData.length;i++){ 
 
       var item = tempData[i]; 
 
       output.push([ 
 
        // parseFloat(parse(item.time)), 
 
        parseFloat(item.time), 
 
        parseFloat(item.date), 
 
        parseFloat(item.value) 
 
       ]); 
 
      } 
 

 
      console.log(output); 
 
      data.addRows(output); 
 

 

 
      var options = { 
 
       chart: { 
 
        title: 'title', 
 
        subtitle: 'subtitle' 
 
       }, 
 
       width: 900, 
 
       height: 500 
 
      }; 
 

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

 
      chart.draw(data, options); 
 
     } 
 

 

 

 
    </script>

<div id="chart_div"></div>

Answer 1

を追加しました（太字）： 'ます。https： //ajax.googleapis.com/ajax/libs/jquery/ 3.1.1 /jquery.min.js'

マイナーな変更も加えました。乾杯。ロードされたjqueryのバージョンを変更して、いくつかのエラーを削除しました。

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script> 
     <script src=" http://www.google.com/uds/modules/gviz/gviz-api.js"></script> 
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

     <script src="https://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
      // Initialize Firebase 
      var config = { 
       apiKey: "AIzaSyBGiHpuzcgw_Ettlko_oU66U-gbW_SbEUA", 
       authDomain: "internet-of-things-62d39.firebaseapp.com", 
       databaseURL: "https://internet-of-things-62d39.firebaseio.com", 
       projectId: "internet-of-things-62d39", 
       storageBucket: "internet-of-things-62d39.appspot.com", 
       messagingSenderId: "143567304866" 
      }; 
      firebase.initializeApp(config); 

      var database = firebase.database(); 


      firebase.database().ref('/Oslo/temperature').once('value').then(function(snapshot) { 
       temps = snapshot.val(); 
       console.log(temps); 

       google.charts.load('current', { 
        'packages': ['corechart', 'line'] 
       }); 
       google.charts.setOnLoadCallback(drawChart(temps)); 
      }); 

      function parse(temp) { 
       return (new Date(temp.replace(/-/g, '/'))).getTime() 
      } 



      function drawChart(temps) { 
       var array = $.map(temps, function(value, index) { 
        return [value]; 
       }); 

       var data = new google.visualization.DataTable(); 
       data.addColumn('number', 'date'); 
       data.addColumn('number', 'time'); 
       data.addColumn('number', 'value'); 

       var sort = function(a, b) { 
        return parse(a.time) - parse(b.time) 
       }; 
       var tempData = array.sort(sort); 
       var output = []; 

       for (var i = 0; i < tempData.length; i++) { 
        var item = tempData[i]; 
        output.push([ 
         // parseFloat(parse(item.time)), 
         parseFloat(item.time), 
         parseFloat(item.date), 
         parseFloat(item.value) 
        ]); 
       } 
       console.log(output); 
       data.addRows(output); 


       var options = { 
        chart: { 
         title: 'title', 
         subtitle: 'subtitle' 
        }, 
        width: 900, 
        height: 500 
       }; 

       var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
       console.log("data + options: " + data, options) 
       chart.draw(data, options); 
      } 



      google.charts.load('current', { 
       'packages': ['corechart', 'line'] 
      }); 
      google.charts.setOnLoadCallback(drawChart); 
     </script>