Create Chart of 2 temp readings from firebase to Google charts - json

Question

I have 2 tempsensors that send their temp every ten min to firebase.
My firebase is structured like this:
{
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: {}
}
}
I would like to create a Google chart
But i don't seem to get the Json parsing wright.
I can add the temp of 1 sensor to display if i set the json path to
https://tempraspberry.firebaseio. 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>
I get can't find variable data1 with the above code.

Answer 1

Looks like a scope issue, declare the DataTable up front, something like this...
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

Thanks with small adjustments it works now.
I now have 2 datatables that show on one Google Chart.
I know the code probably isn't pretty but it works :-)
<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});