ThingSpeak – Apps

As promised, here’s a bit more information from our pals at ThingSpeak.

One of the visualizations you can add are Gauges.  Below are two gauges, one showing realtime pump pressure, the other realtime pool temperature:

Bear in mind, as of this writing the temperature can only be trusted if the pump is running. That’s because when the pump stops, the water in the pipes stop too, and the temperature starts to change based on ambient air temperature, sunlight, etc. I’ll be looking at ways to keep the last “good” temperature displayed while the pump is off.

Okay, how it’s done:

1. ThingSpeak Configuration
   1. Select Apps from the menu at the top of the page
   2. Click on Plugins, New
   3. Select Google Gauge from the selection of radio buttons, then hit Create
   4. There are four windows containing customization elements
      1. In the Name window, enter what you want the gauge called
      2. Leave the HTML window alone
      3. I found the default gauges to be too small, so in the CSS window I changed #gauge_div width from 120px to 220px
      4. I changed a lot in the JavaScript window, so I’m just going to copy and paste what I have for the Pressure Gauge:
         <script type=’text/javascript’ src=’https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’></script>
         <script type=’text/javascript’ src=’https://www.google.com/jsapi’></script>
         <script type=’text/javascript’>// set your channel id here
         var channel_id = 123456;
         // set your channel’s read api key here if necessary
         var api_key = ’96LKJWOM0EVM3IJS’;
         // maximum value for the gauge
         var max_gauge_value = 100;
         // name of the gauge
         var gauge_name = ‘psi’;// global variables
         var chart, charts, data;// load the google gauge visualization
         google.load(‘visualization’, ‘1’, {packages:[‘gauge’]});
         google.setOnLoadCallback(initChart);// display the data
         function displayData(point) {
         data.setValue(0, 0, gauge_name);
         data.setValue(0, 1, point);
         chart.draw(data,options);
         }

         // load the data
         function loadData() {
         // variable for the data point
         var p;

         // get the data from thingspeak
         $.getJSON(‘https://api.thingspeak.com/channels/’ + channel_id + ‘/feed/last.json?api_key=’ + api_key, function(data) {

         // get the data point
         p = data.field2;

         // if there is a data point display it
         if (p) {
         //     p = Math.round((p / max_gauge_value) * 100);
         displayData(p);
         }

         });
         }

         // initialize the chart
         function initChart() {

         data = new google.visualization.DataTable();
         data.addColumn(‘string’, ‘Label’);
         data.addColumn(‘number’, ‘Value’);
         data.addRows(2);

         chart = new google.visualization.Gauge(document.getElementById(‘gauge_div’));
         options = {
         title: ‘Pump Pressure’,
         width: 220,
         height: 220,
         min: 0,
         max: 50,
         redFrom: 40,
         redTo: 50,
         yellowFrom:30,
         yellowTo: 40,
         majorTicks: [“0″,”10″,”20″,”30″,”40″,”50”],
         minorTicks: 5
         };

         loadData();

         // load new data every 15 seconds
         setInterval(‘loadData()’, 15000);
         }

         </script>

   5. Click the check box for the channel you want the gauge to display and hit Save
   6. Go to your channel and hit Refresh.  You may get a blank window at first, but it’s just waiting for some data.  Once it gets some (should be within 15 seconds), your gauge will display!

I’ve seen some really nice dashboards that use Google Gauges, and I’m anxious to put something together that combines all the data I want to see in an easy to understand dashboard.  I’ll post that up once I’ve got it figured out!