Example Data

Live Data from RadMon-Plus:

The charts below show live data from the RadMon Plus monitoring site in my backyard. The RadMon Plus sends its data to my ThingSpeak channelwhere it is collected and stored by the ThingSpeak servers. Three methods are described below which show how to get the ThingSpeak data to display on this Google Sites page.

  1. Embedding the ThingSpeak charts into Google Sites.
  2. Using the "IoT Charting Gadget" generously created by Mike Teachman. .
  3. Create a web page that gets the data from ThingSpeak and displays it using Google Charts.

Embed method ...

Variations of this method will work on the original rollout of Google Sites as well as the new version of Google Sites.

Here on this original version of Google Sites we are using the "Iframe Wrapper" gadget. Get it at Insert / ... More Gadgets on Google Sites.

To get the data for the "Document / page URL" field of that gadget, do the following:

  1. Open your Public page in ThingSpeak.
  2. Select the graph you want to add.
  3. At the top of the graph, click on the box with the arrow sticking out.
  4. Go to the new page that opened and copy the URL from that page.
  5. Insert it in the "Document / page URL" field.

For the new version of Google Sites it's even easier to embed the ThingSpeak URL into the site.

  1. Find where you want to place your graph, double click to open the content creation menu.
  2. Click the "Insert" option and use the Embed by URL Tab.
  3. Enter the URL from the ThingSpeak chart that you got from Step 4 above.

You can also insert an iFrame instead of embedding. In that case you use the "callout / speech bubble" icon at the top of the chart.

I will add more about this in the near future.

(Thanks to Marco for these techniques.)

Four examples are shown below.

IoT Charting Gadget method ...

This method will only work on the original rollout of Google Sites. Therefore it can not be shown here.

Each gadget will read the data from the ThingSpeak server, and use Google Charts to chart the data on this page.

  1. Get Mike Teachman's IoT Charting Gadget here. A PDF file is included in the download that provided instructions on how to add the gadget to your Google Site.
  2. Insert the gadget in your site where you want to add the chart..
  3. Set the parameters on the gadget to select the field number and other options.

(Thanks to Mike Teachman for this technique.)

Web Page with Google Charts:

http://denvercircuits.com/TS-GoogleChart-GK-RadMonPlus.html

I was able to turn the "IoT Charting Gadget" into an HTML page that gets RadMon+ data from ThingSpeak. (I had previously made a page that got the data from SparkFun, but their servers are often slow.)

I added multiple gauges and charts in this single page.

The image on the left shows what it looks like. If you click on it you will see the live data. From there you can right click on most browsers to get the source.