In the final project of this chapter, we are going to learn how to plot the data that was measured by the Raspberry Pi Zero board. We are actually going to combine what we did in the other projects of this chapter and add the plotting part on top of that.
As the code is quite similar to what we have already seen, I will only highlight the main changes here. First, we need to define a route for the data:
app.get('/data', function (req, res) {
db.find({}, function (err, docs) {
res.json(docs);
});
});This will make sure that, when it is queried on this route, the server will return all the measurements stored so far inside the database.
Then, to display the plot of all the measurements, we are going to use a JavaScript called HighCharts. You can find more information about HighCharts here:
We'll include it inside an HTML file that we will place inside a folder called public, so our app can access it. This file will basically import all the JavaScript libraries that we need, another script, which we'll see in a moment, and a container for the plot:
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="js/script.js"></script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html>
Now, we also need to make the link between the HTML page and our application. This will be done in a script file called script.js. This is the content of this file:
var dates = [];
var temperature = [];
var humidity = [];
console.log(measurements);
for (i = 0; i < measurements.length; i++) {
dates.push(measurements[i].date);
temperature.push(parseFloat(measurements[i].temperature));
humidity.push(parseFloat(measurements[i].humidity));
}
$('#container').highcharts({
title: {
text: 'Temperature & Humidity Data',
x: -20 //center
},
xAxis: {
categories: dates
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Temperature',
data: temperature
},
{
name: 'Humidity',
data: humidity
}]
});Basically, this file will query the most recent data from the application, format it for HighCharts, and then actually plot the data.
You can now grab all the files from the book's GitHub repository and start the application with the following:
sudo node sensor_plot.jsThe first thing you can do is test the data route by going to the IP address of your Pi, followed by port 3000 and the data route:
As you can see, all the measurements made so far are extracted from the database and returned by the server.
You can again go to the main route, and you should see the same data on a nice plot:
If you wait a bit more, you'll see a nice graph with all the data recorded so far by the application running on your Raspberry Pi board:
Of course, you can adjust some settings, for example, the delay between two measurements, inside the code for your own projects.