GoempieK GoempieK - 6 months ago 200
JSON Question

Create Chart of 2 temp readings from firebase to Google charts

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

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);
Comments