Access data from a weather station with the Raspberry Pi

Displaying Data Charts on Websites

Creating charts from the data and then embedding them in a web page can be done several ways. With Gnuplot, for example, a script could generate a graphic file, which is then embedded as an image in the website.

Google Charts provides a way to transmit the data to a web interface and returns an image file. You do not need graphics applications on your own web server in this case. I decided on a third option and used the Highcharts JavaScript library [6] to generate the charts.

Highcharts provides very attractive results. Although use for commercial purposes is a little expensive, private use is licensed free of charge by Highsoft Solutions AS under the "Creative Commons Attribution-NonCommercial 3.0 Unported" license.

Listing 3 creates a graph of a temperature profile over 24 hours. All it takes is to embed the two JavaScript libraries, jQuery and Highcharts. The chart itself is defined as a JavaScript function. The only special feature is the identification of the x-axis as date values and embedding the data values. A data value consists of the time and the temperature. The time data from the weather station previously had to be multiplied by 1,000 because JavaScript expects the values in milliseconds, and the measured data are stated in seconds.

Listing 3

Highcharts JS Graph

01 <html>
02   <head>
03    <script src=""></script>
04    <script src=""></script>
05    <script>
06  $(function () {
07    var chart = new Highcharts.Chart({
08     chart: { renderTo: 'container' },
09     title: { text: 'Measured_data'},
10     xAxis: { type: 'datetime' },
11     yAxis: { title: { text: 'Temperature (C)' } },
12     series: [{
13      name: "Temperature",
14      data: [[1363465023000, -1.3], [1363468623000, -1.9], [1363472223000, -2.5],
15             [1363475823000, -2.5], [1363479423000, -2.8], [1363483023000, -3.1],
16             [1363486623000, -3.4], [1363490223000, -3.7], [1363493823000, -3.9],
17             [1363497423000, -3.9], [1363501023000, -3.3], [1363504622000, 2.0],
18             [1363508223000, 1.1], [1363511822000, 7.8], [1363515422000, 5.4],
19             [1363519022000, 4.3], [1363522623000, 5.9], [1363526223000, 6.3],
20             [1363529823000, 5.2], [1363533423000, 3.8], [1363537023000, 3.1],
21             [1363540623000, 2.0], [1363544223000, 1.6], [1363547823000, 1.3],
22             [1363551422000, 1.1]],
23      pointStart: 1363465023000,
24      pointInterval: 3600 * 1000 // one hour
25     }]
26    });
27 });
28    </script>
29   </head>
30   </body>
31    <div id="container" style="height: 400px"></div>
32   </body>
33 </html>

All Together Now

The ingredients described thus far make up the core of the application. What is still lacking is essentially regular data updates and interaction between the ingredients described above. A simple web application that reads data from the database and generates the corresponding chart is shown in Listing 4.

Listing 4

Generating the Chart as a Web App

01 require 'active_record'
02 require 'sinatra'
04 ActiveRecord::Base.establish_connection({"adapter"=>"sqlite3", "database"=>"db.sqlite3"})
05 class Temperature < ActiveRecord::Base
06 end
08 get '/' do
09   values = Temperature.all(order: "time desc" limit: 24)
10   @data = {|m| [m.time * 1000, m.t]}.inspect
11   @start_time = value.first.time
13   inherit :index
14 end
16 __END__
18 @@ index
19 <html>
20   <head>
21     <script src=""></script>
22     <script src=""></script>
23     <script>
24  $(function () {
25    var chart = new Highcharts.Chart({
26      chart: { renderTo: 'container', type: 'line' },
27      title: { text: 'Measured_data' },
28      xAxis: { type: 'datetime' },
29      yAxis: { title: { text: 'Temperature (C)' } },
30      series: [{
31         name: "Temperature",
32         data: <%= @data %>,
33         pointStart: <%= @start_time * 1000 %>,
34         pointInterval: 3600 * 1000 // one hour
35      }]
36    });
37 });
38    </script>
39   </head>
40   <body>
41   <div id="container" style="height: 400px"></div>
42   </body>
43 </html>

The Sinatra web application is in lines 10 to 16. The call to inherit **:index embeds the data in the website. The website is then embedded in the script in line 21. Then, inherit replaces the code in line 32, <% = @data%>, with the contents of the @data variable. The result in the browser is shown in Figure 3.

Figure 3: A Highchart diagram in a Sinatra web application.

The only question that remains is how to collect the data regularly, which is handled by the previously mentioned cron job with an hourly call to the script in Listing 5.

Listing 5

Cron Job

30 * * * * /usr/local/bin/load-data > /dev/null 2>&1

This script is stored in the directory /etc/cron.hourly and tagged as executable using:

sudo chmod a+x crontab_pi

The load_data script, executed as a cron job, acquires the measured data, writes it to a CSV file, and uploads the file to the database.

Listing 4 shows how Sinatra can create a full-fledged web application with relatively little code. The rest of the process is hard work and involves acquiring the other readings from the weather station and cleaning up the code a little. In the end, the code might look like that shown in Figure 4.

Figure 4: The weather data in the finished application.


I have published the preliminary results of my weather application as source code on [7]. To download and test the code with Git, call

git clone git://

to create a local copy. You can update later with:

git pull

The code needs improvements in many places, but it provides insight into some ways to use your Raspberry Pi to build your own web applications.

The Author

Marcus Nasarek is a security professional and very much into shells and scripting languages.

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy Linux Magazine

Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • Charly's Column: Weather Page

    To find out what the weather is like, sys admin columnist Charly Kühnast no longer needs to go outdoors get wet, blown away, frozen to death, or sunburned.

  • Software-Defined Radio

    Armed with a US$ 20 hunk of hardware and a free software-defined radio tool, Konstantin starts the hunt for radio-transmitted data from a weather station.

  • Processing Map Data with OpenLayers

    OpenLayers is a JavaScript library that allows you to integrate maps into web pages. You can program the geodetic data directly or read it from a database.

  • Perl: Linux-based Gardening

    In this month’s Perl column, we will introduce a system to water your plants while you are away from home. With a little help from Perl, a friendly, Linux-based irrigation system waters your plants twice a day.

  • Perl: Temperature Sensors

    Linux lets tinkerers connect their hardware creations to computers. We’ll show you how you can use a simple Perl interface to check the temperature of your home or office while you’re away.

comments powered by Disqus

Direct Download

Read full article as PDF:

Price $2.95


njobs Europe
Njobs Netherlands Njobs Deutschland Njobs United Kingdom Njobs Italia Njobs France Njobs Espana Njobs Poland
Njobs Austria Njobs Denmark Njobs Belgium Njobs Czech Republic Njobs Mexico Njobs India Njobs Colombia