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