Project 7: Adding Graphs

Introduction
Adding a graph to your data logger is a great way to improve its usefulness and looks.  This project will describe how to use a free Java graphing applet to generate line graphs on the Temperature Logger web page.  Now you will be able to view the recorded temperature data in graphical form through a browser.

Linegraph.class
A handy Java applet is available as freeware from GraphsCharts.com  You simply download the Java code – linegraph.class – place it in the C:\freelogger folder.   We will then modify the Temperature Logger Thin Basic program to build a web page containing the data and the instructions for creating the Java graph.

You can download linegraph.class and the documentation here.

Installing and Testing Linegraph.class
After downloading the file from GraphsCharts.com, unzip.  Installation is simplicity itself – just copy linegraph.class to C:\freelogger.  To see how this works, copy the sample html page from the .pdf file and paste  into Notepad.  Then save to C:\freelogger as graph.html.

The source code for the sample web page with the graph is here

If you have pasted and saved everything correctly, open a browser and use the File, Open commands to load the C:\freeloger\graph.html page.  It should look like that shown below:

Project 7 - Sample Java Linegraph

You can try editing some of the parameter tags in the graph page to see how they work.  The documentation supplied by GraphsCharts is clear and useful.

Now all we have to do is modify the Temperature Logger program to generate a graph.html page from the recorded temperature data.

Graph Test Program
The code for generating an html page that will create a linegraph is a bit complicated, so the best way to proceed is to write a test program first.  If that works, then it can be pasted into the actual logging program.  In this example we will write a Thin Basic program named Grapher.tbasic that will open a data file, read the values, and write an html page that includes the graphing parameters for linegraph.class.

The source code for the test program is here.

The program is self-contained, but it is written so that the entire graphing function can be called as a subroutine.  The program first creates the beginning part of the html page (named graph.html) and then opens the data file, case.txt.  This data file consists of a single column of data – just temperature readings and no time or date stamps.   The data is assumed to have been recorded at 5 minute intervals.

The data is read out from case.txt and then turned into linegraph.class parameter tags.  The end result should be a complete html page that calls linegraph.class, and plots the data.

You can copy and paste the code into a blank Thin Air project page and run it. 

Note: Be sure you have created  the case.txt file with a single column of numbers in C:\freelogger

For the source code as given, the values in the case.txt file should be between 80 and 110.  The graph will display any number of readings up to a total of 40.

If you have everything working correctly, launch the Tiny Web Server and execute the Grapher.tbasic file.  You will see just a brief flash of the DOS box – but you can check to see that graph.html exists using Windows explorer.

Launch your browser and set the address to:

http://localhost/graph.html

If successful, you should see something like the following:

Project 7 - test graph creation program

You can change the values in case.txt or the add and subtract values to see that the graph reacts correctly.  You can also modify some of the parameter statements in the Thin Basic source code to change various elements of the graph – line color, title, min and max Y axis scaling, etc.

Integrating Graphs to the Temperature Logger
Now that we have a working subroutine that graphs the contents of case.txt, we just have to splice this code into the existing Project 6 Temperature Logger.   This requires some careful editing:  the tdata.txt file is no longer created, the case.txt file must be appended only every 5 minutes, yet the pctemp.html page should be generated every 60 seconds as before.

The completed Project 7 code is shown here.

You can copy and past the entire source code into a blank Thin Basic project page, but remember to clean up any lines of code that have wrapped around to a new line – these will show up as syntax errors.

When the Project 7 code is in place, start the MBM 5 motherboard temperature program, the Tiny Web Server, the YAW CAM and Project7.tbasic.  If everything has been entered correctly you should see the same pctemp.html page from your browser, but now there is a link to the graph.html page.  Wait for 30 or 40 minutes to allow time for case.txt data to be collected, then click on the graph link.  You should see something like that shown below:

Project 7 - graphs page

In this case the PC case temperature spiked a few degrees during the start, but later settled down as the PC was not being used. 

Going Further
The graphing parameters have been fixed in the Project 7 source code, but you can make them dynamic to fit the data collected.  For example, the X Axis maximum is fixed to 200 minutes, so after that the data will not be visible on the graph.  You could test the X value of the last data point and change the Xmax parameter accordingly in the html code generated.  You might also scale the Y axis by reading in the values that occur in the case.txt file and change the Ymin and Ymax parameters accordingly.

Advertisements
%d bloggers like this: