Graphing Data in PHP

English

The table of numbers we just produced has all the information, but it is not very easy to see trends in the data. A picture being worth a thousand words, a graph, if done well, can present the data in a way that makes things like trends and noise stand out clearly.

The graph shown above was produced by this PHP program, from data collected by this PHP program and generated by this Arduino program.

These are all variations of the programs we have just discussed. The Arduino program that runs on the tiny computer takes the temperature, calculates the mean, standard deviation, and the minimum and maximum temperatures, and prints them out to the USB serial port. It should look very familiar by now. See if you can find out how it finds the minimum and maximum temperatures.

The PHP data collection program is also a trivial change from the one we have been using, as all it has added is the storing of the minimum and maximum temperatures.

The biggest change is in the way the data is presented. PHP has several graphing libraries you can use to produce nice graphs. In this case, however, I chose to use the more basic drawing commands in the GD library that is installed for you when you install XAMPP. The GD library is well documented, so you can look up any of the unfamiliar functions and find out what they do. In this case, we are producing a PNG image, by drawing lines and rectangles to graph our temperature data.

In the image, it is now easy to see how much noise there is in the data. The minimums and maximum temperatures recorded are often several degrees off from the mean. The 99.9% confidence level shown in the gray rectangle spans a smaller range, but still often varies by a degree or two from the mean. We could reduce that range by collecting more samples than the 200 we currently collect, but we are running out of memory on our tiny computer. Still, being able to clearly see the uncertainty in the data is very helpful.

You can use this code to graph all kinds of data, not just temperatures. The tiny computer can use a wide variety of sensors, and now you have the tools to both know and show just how accurate and precise the data actually is.

Below is a graph of the temperatures for an entire day. We could have made the image huge, and included ever second of the day. Or we could have changed the Arduino code to sample less often -- say every 20 minutes or so. Instead, we averaged all the means in the data over 20 minute periods, and collected the minimums, maximums, and standard deviations, this time in the PHP code. That gives us 60 data points to plot, covering midnight to midnight.

We ask the database for the samples collected for the previous day (to get the latest midnight-to-midnight data). The result looks like this:

Because the temperature changes quite a bit in 20 minutes, the standard deviations are larger. We chose a lower confidence level (95%), and still our gray confidence intervals often exceed the maximums and minimums. To keep the maximums and minimums visible, we now print them on top of the gray confidence interval, instead of under it. We also added a scale of hours at the bottom, and made a few other cosmetic changes.

You can find the new code here.