K'NEK-TEK

A webpage to document and share my open-source software/hardware projects.

Home » Using Dygraphs to display sensor data

Using Dygraphs to display sensor data

Dygraphs are a quick and very feature-rich way of displaying data on a webpage. I’ve used it to take recorded sensor data from sensors connected to my beaglebone and quickly display the data in an interactive graph available on a website on the local area network. This was as easy as writing a python or bash script to record the sensor data in a file periodically, and then using node.js to create a webserver and serve a webpage in which dygraphs took those text files of data and displayed them.

The Software Stack

Here’s the code for the webpage with dygraphs from the Beaglebone, taken from one of the code samples on the official website:

where temp_hum_data.csv is a file that looks like:

Dygraphs will pull the graph’s axis titles from the first line, and the data from all subsequent lines. In this short example these are the readings from the first 8 minutes after midnight.

Hosting Multiple Webpages

This initially created problems for the apache2 webserver running on the Beaglebone because this is the second website I’m hosting on this hardware (the other is the tor hidden-service version of this blog). In order to fix this and get the apache2 software to host two different webpages, I had to edit the files in /etc/apache2/ to make these changes:

ports.conf:

Then in the sites-available folder (default location is /etc/apache2/sites-available/) you will need to create a file with a name like “my_dygraphs_website” or whatever you want, and in it put:

Do the same for the other website, creating a file in sites-available/ named whatever you want, and change the VirtualHost port and the DocumentRoot and ErrorLog/CustomLog filepaths. You should also change the ServerName and ServerAlias to match. It’s up to you to create a folder structure to store the logs for your various websites that makes sense to you.

For the example above, the index.html file for my_dygraphs_website must be located at /var/www/my_dygraphs_website/index.html. Note that there is NOT a final “/” on the filepath for DocumentRoot.

Please note you should NOT add a “virtual.conf” file in conf.d/ with ” NameVirtualHost * ” as this guide says to (and that guide is one of the first results for the search term “apache2 multiple web pages”). This will cause an error upon starting the apache2 instance complaining about multiple VirtualHost/NameVirtualHost definitions:

Clearly defining the VirtualHost address:port for each configuration file in sites-available/ will prevent this error. Once that’s done, you need to use two apache utilities called a2ensite and a2dissite to enable and disable your webpages. These take available website configuration files from /etc/apache2/sites-available and make a symbolic link into /etc/apache2/sites-enabled so that you don’t have to muck around with linking things yourself. Once you’ve done that, you need to reload your apache2 daemon by typing:

and if it doesn’t give any errors, you should be all set! Assuming that your webpage is properly coded, and that the index.html file is located in the DocumentRoot directory you specified earlier. You can also try the stronger

to restart the whole apache2 service and see if that generates any useful errors to help you debug.

The Hardware

The data I used for my sensors website was gathered from a humidity/temperature sensor called the HIH6130, the MPL3115A2 barometer/pressure sensor, and a 3-axis magnetometer called the HMC5883L. Both of the “H____” chips are Honeywell chips and I used the breakout boards from Sparkfun for all three sensors. For this writeup I’ll first assume that you’ve hooked up the HIH6130 breakout board to your beaglebone’s power, ground, and I2C lines. Don’t forget the pullup resistors on both I2C lines!

To get the temperature and humidity sensor working and displaying a live Dygraph chart, download the humidity_rw.py file from my github and then create a file called temp_hum_data.csv in your /var/www/<name of website>/ folder. Modify the ownership so it’s the same as the owner of the humidity_rw.py file. Then, type

to open your cron file, and add this line:

where /usr/bin/python is the path where your copy of python is installed (check with “$ which python” if you’re confused where it is on your system) and replace the /home/myusername/ path with the path to humidity_rw.py. This will cause the humidity_rw.py script to run every minute, reading the temperature in Celsius and humidity in %RH from the HIH6130 device and writing those values to a csv file which should be located in the same folder as index.html. The website then pulls that data and displays it.

2 thoughts on “Using Dygraphs to display sensor data

  • Hey Erik, thanks for sharing.
    Did you compared the results of HIH6130 and MPL3115A2 with the SparkFun’s breakboard BME280?
    I don’t know if is better an All-in-one like BME280, or separated Chips.

    Thank you again.

    Reply
    • Hi John,
      I haven’t tested out the BME280 so I can’t give you any data on a comparison. Sparkfun’s website doesn’t give a good comparison in terms of Pascals for the altitude sensor, although the description of the BME280 says it has a much wider temperature range and wider humidity detection range than the HIH6130.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *