javascriptjsonparsingfirebasegchart

Unable to draw a google chart from firebase db


I want to visualize some simple sensor readings stored in firebase in a basic line graph from Google charts.

The data is structured like this:

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

Unfortunately the line graph won't load, and I can't figure out why. The json objects is loaded successfully, so I think it's got something to do with the drawing part of it. Any help in the right direction will be most appreciated.

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


Solution

  • Added (bold): 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'

    Made some minor changes as well. Cheers. Removed some errors by changing jquery version which is loaded.

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