IoT Charts Using Google Tools: Getting Started

The internet connected sensor revolution is here

It's getting easier every day to connect your Arduino, Raspberry Pi, ESP8266, Edison, or Photon project to the internet and push sensor measurement data to a cloud database such as ThingSpeak or Sparkfun Data. But, once your data is stored there, how do you best showcase your results to the world?

Levering the free web tools from Google is one answer

This is the first of 2 tutorials that will teach how to chart and share sensor data using free Google tools. By the end of the 2nd tutorial you will know how to rapidly build a professional looking web site that showcases the data produced by your hardware projects

A second goal of these tutorials is to teach how various internet technologies come together to produce a chart visualization

Here is the Instructables roadmap

• "Getting Started" (this instructable): Learn how to chart sensor data using a Demo Google Site with cloud data services ThingSpeak and Sparkfun Data
  

• "Build an IoT Website" (coming soon): build your own personal Google website to display custom charts of your sensor data

Here is an example website showing the potential of the Google tools. Our Hedgehog monitoring website is constructed using Google Sites, Google Charts, Google Sheets, and Google Maps. The Dashboard shows nightly and weekly statistics for our athletic pet

Google Site for Hedgehog Monitoring

For this tutorial you only need a web browser such as Chrome, Internet Explorer, or Firefox. Best usability with screen width resolutions 1280 pixels or better

ThingSpeak is a free cloud platform for storing sensor data on a remote server

Sparkfun Data is another free cloud data service offered by the excellent hobbyist company Sparkfun

Both of these services store sensor data covering all sorts of interesting applications, from nuclear radiation to beehive monitoring. Most users of these services configure their sensor data storage to be readable by the public. You can access and plot any of this public data. We will cover that in this tutorial

ThingSpeak calls each bundle of sensor data a Channel while Sparkfun Data calls it a Stream

You might already have data on ThinkSpeak or Sparkfun? Great. You can try these Google tools to chart your data

Let's start by exploring the charting capabilities of Google tools using a demo web site that I designed for this Instructables

1. Open the IoT Charts Demo website
2. Open the THINGSPEAK page. The demo site is pre-programmed to show a line chart of temperature coming from a ThingSpeak data Channel of a weather station in Szczecin, Poland
3. Change the Number of Points setting in the right side panel. Press Update Chart. The timeline changes
4. Change "field1" to "field2" in the Field box. Press Update Chart. Humidity is plotted
5. Change "field2" to "field3" in the Field box. Press Update Chart. Atmospheric Pressure is plotted
6. Change the optional Min Value to set a minimum value on the Y scale. Press Update Chart. Notice the minimum value on the Y axis changes to your new value.Why would you want to do this? Setting a minimum value is particularly useful in situations where your hardware has accidentally generated zeros in the data stream -- I see this a lot. Leaving the Min Value box empty enables auto-scaling
7. Change the optional Max Value to set a maximum value on the Y scale. Press Update Chart
8. Enter some dates into Start Date and End Date. Delete the value in Number of Points. Press Update Chart. The timeline changes to the date range you specified

Let's take a step back for a moment to consider how various internet technologies are working together to produce a chart on the demo web site. The block diagram above and the attached PDF illustrate how sensor data is turned into a chart visualization on your screen

Here is a step-by-step description of the data flow (numbers below can be found on the block diagram)

1. sensors are read by the hardware, like Arduino or ESP8266
2. the hardware pushes the sensor data to a ThingSpeak server via the internet
3. sensor data is stored on a remote server operated by ThingSpeak
4. website formatting is stored at a Google server
5. using an internet browser, like Chrome or Internet Explorer, you click on the THINGSPEAK link on the IoT Charts Demo website
6. sensor data flows from the ThingSpeak server to the browser
7. web site formatting flows from a Google Sites server to the browser
8. Google Charts software flows from a Google server to the browser
9. browser combines 6, 7, and 8 to produce a chart of the sensor data

Hopefully this helps to demystify the process of rendering a chart on your screen

This tutorial series primarily focuses on steps 4 to 9. I added a References page with information on how to program the hardware to push sensor data to ThingSpeak and Sparkfun Data (steps 1-3)

Many users of ThingSpeak configure their Channels to allow public access. You can use the demo site to chart data from these Channels

1. Select an interesting Channel from one of the ThingSpeak Public Channels. Some example channels are listed at the bottom of this page
   
2. Open one of the Channels by clicking on the title
3. Find the Channel ID (see photo above)
4. Enter the Channel ID on the ThingSpeak charting page
5. Enter a Field. All ThingSpeak sensor measurements are identified by "field1", "field2"... "field8"
6. Press the Update Chart button. You will see a chart of the sensor data you selected

Here are some ThingSpeak Channels to try

Current weather condition for Szczecin, Poland. Temperature, humidity, and pressure are monitored

Channel ID: 29084
Fields: field1, field2, field3
URL: https://thingspeak.com/channels/29084

Hamstometer is a pedometer for hamsters which measures and tracks their wheel rotations per unit time

Channel ID: 46669
Fields: field1, field2, field3
URL: https://thingspeak.com/channels/46669

http://tinwhiskers.net/how-i-open-sourced-my-hamsters

Radiation level in Montreal, Quebec, Canada

Channel ID: 9892
Fields: field5
URL: https://thingspeak.com/channels/9892

Many Sparkfun Data streams are also configured for public access

1. Pick a Stream from the listing of Sparkfun Public Streams. Some example streams are listed at the bottom of this page. Click on the Stream Name (see photo above)
2. There are two things you need from the Stream page (see photo above)
   Public Key (unique identifier for a Stream, shown in the web address)
   Field (name of data you want to plot, shown in the column title)
3. Enter the Public Key and Field into the edit boxes on the Sparkfun charting page of the demo site
4. Press the Update Chart button. In a short time you will see a plot of the sensor data. You might need to be patient - sometimes the Sparkfun Data site is slow to return data
5. The chart title can be customized by entering text into the Chart Title box

Try plotting these Example Sparkfun Streams ...

A home weather station in Elizabethtown KY USA:

Public Key: KJ111xY17xsRaKyw27XA
Fields: dailyrainin, tempf
URL: https://data.sparkfun.com/streams/KJ111xY17xsRaKyw27XA

Open Source Beehives Project:

Public Key: OGw6o7Z7AWsWVEZlEjj6
Fields: tempc_hive1, tempc_hive2
URL: https://data.sparkfun.com/streams/OGw6o7Z7AWsWVEZlEjj6

CO2 Sensor:

Public Key: ZG0aKVyV3DsQGNY8maO9
Fields: co2_ppm
URL: https://data.sparkfun.com/streams/ZG0aKVyV3DsQGNY8maO9

This section is written for the technical ninja wanting to know more about the IoT Charts Demo site

The demo site is a Google Site. The charting features are built using Google Charts and Google Gadgets. A Gadget consists of HTML and JavaScript code wrapped by some "boilerplate" XML code. The gadget is embedded into a web page on the Google Site. The gadget code used on the charting demo site can be downloaded from my GitHub gadget repository. The gadget is called gadget-iotcharts-line-v1-1.xml (version 1-1 created on Oct 20, 2016 to correct a problem with the web site hosting the spinner script)

You can extend the capabilities of this gadget far beyond what is shown in this tutorial. There is a lot of potential for customization:

• change chart types. Try a bar chart, a pie chart. The Chart Gallery shows the possibilities
• change the height and width of the gadget
• pull data from a different data server like the Nimbits public cloud
• change colors
• format for mobile screens
• report error conditions to user
• configure the gadget to use tabs for the chart options, rather than a side panel

If you decide peek under the hood and extend the functionality I would appreciate any technical feedback on my implementation. Thanks !

Acknowledgements: This tutorial was built using knowledge generously shared by many developers, discovered by hours of Googling and reading StackExchange forums. It is truly a great age, where technical information is shared so openly. In some ways this Instructables is a small way of giving back

Here are some references that teach how to program the hardware platforms to push sensor data to a cloud database

ThingSpeak

Arduino

Raspberry Pi

ESP8266

Particle Photon

Intel Edison

Sparkfun Data

Arduino

Raspberry Pi

ESP8266

Particle Photon

This tutorial is a first step to bigger and better things. In a soon-to-be-published Instructable I'll show how you can take full advantage of Google Sites. Using a Google Site Template I will show how a customized IoT web site can be built in less than 30 minutes. You will be able to mix sensor charts with other visual Google features, like configurable gadgets and maps

The end result will be a sensor web site, the way you want it to look. And, no JavaScript or HTML coding will be needed

Google gives us powerful capabilities to display and share our sensor data. High availability and free