3. Drawing

So, quick example of how you can output data from Firebase into a graph.

To understand the code below you’ll need to know about

  1. Objects as we’ll be packaging the temperature and time data into an object.
  2. Arrays as we will storing all the temperature/time objects into lists/arrays
  3. jQuery , though we’ll only be using it in one place, referring to the input text field in the sender page.
  4. for loops, this is a kind loop. We will be looping through the list, taking out the temperature and time data in each loop.
  5. Canvas which we will draw the graph on.

This example involves two web pages, one that sends the data and the second that receives and graphs it.

Sender page:

<!DOCTYPE html>
<html>
 <head>
 <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
 </head>
 <body>
 <input type='text' id='tempInput' placeholder='Temperature'>
 <button type="button" onclick="doButtonAction()">Send data</button>

 <script>
 // Initialize Firebase, don't forget to put your own keys here
 var config = {
 apiKey: "xxxxxxxxx",
 authDomain: "xxxxxxxx.firebaseapp.com",
 databaseURL: "https://xxxxxxxx.firebaseio.com",
 storageBucket: "xxxxxxxxx.appspot.com",
 };
 firebase.initializeApp(config);

 var tempData = firebase.database().ref("mummy");
 
 var time = 0;

 tempData.limitToLast(1).once('child_added', function(snapshot) {
 var output = snapshot.val();
 
 if(output != null){
 time = output.time; 
 }
 
 });
 
 //var tempDataList = new Array();
 function doButtonAction(){
 var temp = $('#tempInput').val();
 var tempObj = {temp: temp, time: time};
 time+=10;//increment time by 10 (to go with next temp data)
 //tempDataList.push(tempObj);
 tempData.push(tempObj);
 //clear the fields after sending data
 $('#tempInput').val('');
 }
 </script>
 </body>
</html>

Receiver page:

<!DOCTYPE html>
<html>
 <head>
 <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
 </head>
 <body>
 <canvas id="canvasToDrawOn" width="500" height="300" style="border:1px solid #000000;"></canvas>

 <script>
 //getting hold of the canvas inside this script set it up for drawing on.
 var canvas = document.getElementById("canvasToDrawOn");
 var context = canvas.getContext("2d");

 // Initialize Firebase, put your own project keys here
 var config = {
 apiKey: "AIzaSyC1Bv7DRQxzUGlRqw7PcGNFhxIxI3pfj1A",
 authDomain: "temp-data-62b59.firebaseapp.com",
 databaseURL: "https://temp-data-62b59.firebaseio.com",
 storageBucket: "temp-data-62b59.appspot.com",
 };
 firebase.initializeApp(config);
 //get "pipeline" or reference to temperature data
 var tempData = firebase.database().ref("mummy");

 var temperatureDataList = new Array();
 
 tempData.on('child_added', function(snapshot) {
 temperatureDataList.push(snapshot.val());
 //looping through the list of temperature data....
 //taking two bits of temperature data at a time, to draw a line between them in the graph
 //....of course this wont work until we have at least two bits of temperature data.
 for(var i=0; i<temperatureDataList.length-1; i++){ 
 var aTemp = temperatureDataList[i];
 var bTemp = temperatureDataList[i+1];
 context.moveTo(aTemp.time,aTemp.temp);
 context.lineTo(bTemp.time,bTemp.temp);
 context.stroke();
 context.fillText("("+bTemp.time+","+bTemp.temp+")",bTemp.time,bTemp.temp);
 } 
 });
 </script>
 </body>
</html>

More explanation on the way some time in da future.