Display a Google Gauge Visualization using ThingSpeak Plugins

This tutorial shows you how to use a Google Visualization inside of ThingSpeak Plugins. We will be the Google Gauge visualization to display the last value of a ThingSpeak channel. We will be using jQuery to get and parse JSON from the feed. The Google Gauge also auto updates with the latest value using JSONP.

Setup Plugin

  • Sign into to ThingSpeak
  • Select Plugins
  • Click Create New Plugin

Copy Code Sections

Google Gauge Code

Live Demo

12 comments

  1. Where should I put in my API Key?

    • The example uses a public channel, so no API Key is needed. For a private channel you need to add a “read” API key in the following line:

      $.getJSON('https://api.thingspeak.com/channels/9/feed/last.json?apikey=READAPIKEY&callback=?', function(data) {
  2. Hi, what value should be changed so that the result was displayed with an accuracy of one decimal place eg 0.1 ? (sorry for my english)

  3. I’ve just tried this plugin but my value doesn’t seem to correspond with the data values shown on the graph, it should be a temperature value between 20 to 60 degrees.

    It shows 18.8 degrees when the chart shows 25.

  4. hey,
    I just wanted to know that, can we update plugins with the help of micro-controller (Arduino) as we update the charts in the channel, also can talk back read values from the channel graphs and send command to the micro-controller. Please reply as soon as possible.

    Thank you

  5. Hi vishal,

    You can update plugins using JavaScript, so as long as you build in communications to your Arduino via JavaScript you can do whatever you want with it.

    If you want to read values from the Channel, it’s probably easiest to use React ( https://thingspeak.com/docs/react ) to send commands to the microcontroller.

    lee

  6. Hey,

    Thank you for the previous reply, that certainly helped. Recently I was trying to integrate Google gauge with my channels and I followed the tutorial and did the following changes in the given code:

    $.getJSON(‘https://api.thingspeak.com/channels/2/feed/last.json?apikey=ReadAPikey=?’, function(data)

    In the code its given channels/9 which i changed to 2 because i wanted to read the value form field 2 .

    p = data.field2;

    similarly i changed the value form field1 to field2.

    but i could not get my plugin to work. Can you please help me and tell me what else I need to do or where am I going wrong.

    Thank You

  7. Sorry there is a typo in last msg……in the following line:

    “In the code its given channels/9 which i changed to 2 because i wanted to read the value form field 2 .”

    Here i have put channel ID in place of 9.

    Thank you

    • Use your channel ID in channels/??? (personnel channel ID visible in private view)
      and
      p = data.field2;
      to read the value from field 2

      Sorry for my english. I’m french

  8. interesting Gauge, sadly the value is presented in % of the total scale and that is hardly an interesting number :-)

  9. Am I missing something? I can’t see any way to change the FS and rescale the needle position to follow.

    If the fullscale value of the reading happens to be 100 then this Guage is really great. But without the means of changing the fullscale it’s just a missed opportunity.

Leave a comment