Web-Based Sensor-Data Graphing Tools
My first project at the James Reserve involved creating web-accessible graphing interfaces for our large sensor database.
These php-generated, DHTML interfaces are used to monitor sensor network health and to browse large micro-climate and imagery datasets. They are linked to from the James Reserve KML layer, so that Google Earth users can access data graphs and images from directly inside the GE web-browser window.
Without some guidance and explanation, most of these tools will be a bit difficult to use effectively. But free free to check them out and I can answer any questions you might have.
These interfaces are written in PHP. The first two, "GUI2" and "GUI3", use the OO PHP module JpGraph to generate graphs. The third uses a commercial java applet called EasyCharts.
CENS CMS GUI2 Wizard:
...a wizard for creating graphs from scratch
http://cens.jamesreserve.edu/jrcensweb/GUI/start.php
Without a familiarity of the system at the James Reserve, this "wizard" can be a little confusing. Nevertheless, this step-by-step process allows you to select what you want to graph, and ends by forwarding you off to the graphing tools shown below.
This wizard has been replaced, in part, by the James Reserve KML layer, which allows users to choose which sensors values they want to see from Google Earth. However, the KML layer does not currently allow you generate graphs with more than one sensor type at a time. This functionality will be added soon, made possible by KML 2.1's <Update> features.
GUI2 - Graphing tool:
Once the desired sensor measurements are specified by the above wizard, or from the KML layer, this DHTML "applet" allows you to surf through the data. There are options to pan, re-center and zoom through the data using the buttons at the bottom of each graph. By clicking the "Show" button to expose the Options menu more features are revealed, such as adding new measurements to the graph, changing the behavior of the mouse clicks on the data, and resizing the graphs.
Humidity shown at 3 different location. You can use the buttons to pan and zoom through the data. Clicking the "show" Options button reveals more options, including the ability to delete, hide, move or add new measurements to the graph
"Loader" for the GUI3 and EasyCharts tools
As the next two examples do not have a built-in options for adding or deleting sensor measurement "traces" (as above in GUI2), you can use this little "loader" to create plots in either the GUI3 or EasyCharts grapher.
http://cens.jamesreserve.edu/jrcensweb/EasyCharts/examples/loader.php
- Choose a time-frame, which determines which sensors are available - click the "Please Refresh" button
- Choose the numbers of "traces" or data series you want to chart - click "Please Refresh"
- Choose the which locations ("sites") and measurements ("sensors") you want, click "Please Refresh"
- Next follow either of the links to the GUI3 or EasyCharts tool
This little loader is not designed as an easy end-user interface, rather it's a development tool to save me time from hand-entering the correct syntax to generate charts and graphs. End-users use other entry-points to these grapher, namely the James Reserve KML layer.
Keep in mind this loader does not allow you to add image time-series to GUI3. For examples of that, click on the GUI3 screenshot below.
GUI3 Graphing Tool with integrated image time-series support
This is the default graphing tool used by the James Reserve KML layer.
It does not have the javascript/dhtml options menu, as with GUI2, but includes the ability to display image time-series synced with sensor measurements.
The links below have a simple debugging feature enabled, so that one can easily edit the URL query string GET variables using a textfield form. Unless you are familiar with the syntax creating the images and sensors graphs, I wouldn't recommend changing any values in those field.
You can zoom and pan, and also click on images for a larger view. The black and yellow horizontal lines above the images are representative of the images available during that same timeframe. The yellow lines represent the image thumbnails you currently viewing, and the black lines indicate the other images available during this time frame.
EasyCharts
I experimented with the java applet EasyCharts in attempts to create a better user experience. Due to some limitations of the applet, particularly with with image handling, I abandoned development. However, you can still see it in action, including a long HTML form to the right that implementing the java applet's entire API via javascript. This HTML form was generated in part with the PHP PEAR module HTML_QuickForm.
