Hardware Reference
In-Depth Information
Displaying the results
We are now going to use the data that was logged in the database and display it on a graph
for more convenience. For this task, we are going to use a JavaScript library called
flot
,
which is already included in the code for this chapter. This library provides nice functions
to plot data on a web page, and also allows you to plot data in real time, so you will see the
graph being automatically updated as more data comes in.
Everything will happen inside an HTML file called
plot.html
. We will only see the
most important parts of the code here. Please refer to the GitHub repository of the chapter
to get the complete files. Inside this file, you first have to include the files required for the
flot
library:
<script src="flot/jquery.js"></script>
<script src="flot/jquery.flot.js"></script>
<script src="flot/jquery.flot.time.js"></script>
You also need an element in the HTML page that will host the graph. This is done using the
following piece of code:
<div id="placeholder" style="width:800px;
height:450px;"></div>
Let's also define some options for the plot. Since this is now JavaScript, we have to write
this code inside the
<script>…</script>
tags. If you want to learn more about
JavaScript first, I recommend this excellent interactive tutorial:
Because we have timestamps as the
x-axis
, we need to specify that the data for this axis is a
specific time, and that we want to display the hours, minutes, and seconds:
var options = {
xaxis: {
mode: "time",
timeformat: "%H:%M:%S"
}
};
