1

我想在 Google 图表的基本折线图中可视化存储在 firebase 中的一些简单传感器读数。

数据结构如下：

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>

4

1 回答 1

2

添加（粗体）：' 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>
于 2017-04-03T10:44:46.847 回答