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

32 thoughts on “Display a Google Gauge Visualization using ThingSpeak Plugins

    1. 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) {
  1. 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)

  2. 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.

    1. I know this was a long time ago, but maybe someone else is helped with this.
      Instead of 1023 try ‘max_gauge_value’
      without the quotes ofcourse

  3. 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

  4. 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

  5. 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

  6. 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

    1. 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

  7. 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.

  8. The problem in this Gauge is the maths; if you see this part if (p)

    {
    p = Math.round((p / 1023) * 100);
    displayData(p);
    }

    you have your value modified by the factor 100/1023, so you need to erase that.

    {
    displayData(p);
    }

    with this you have the real value.

  9. I have a question like Enigma for my outdoor temp.
    Is it possible to change the values from -30 t0 + 40 instead of 0 – 100?
    And make a new colors like blue and green?

    1. Change the following

      options = {width: 120, height: 120, max:40, min:-30, redFrom: 30, redTo: 40, yellowFrom: 20, yellowTo: 30, minorTicks: 7};

  10. hi guys !!!
    just want to know how to change to color blue the color strip thats is only in red/green and yellow.
    example : rdtrom- redTo
    that I saw in other public channels !!!!
    thanks !!!!

    1. Just add the specific color to the code in the same way as the yellow and red are added –

      Your syntax should look something like:

      options = {width: 120, height: 120, blueFrom: 65, blueTo: 75, redFrom: 90, redTo: 100,
      yellowFrom:75, yellowTo: 90, minorTicks: 5};

        1. I guess you might have checked that already but blue and red are using identical ranges. Might that be the problem?

          1. Delete that, my vision seems to have been blurred out:-) still, perhaps the order matters?

        2. Try this

          options = options = {
          width: 180,
          height: 180,

          redFrom: 50,
          redTo: 100,

          yellowColor: ‘#0000ff’, //////this is blue color
          yellowFrom: 35,
          yellowTo: 50,

          greenColor: ‘#ff8400’, //////this is orange color
          greenFrom: 25,
          greenTo: 35,

          minorTicks: 10,

          min: 0,
          max: 100,

          animation: {
          duration: 400,
          easing: ‘out’,
          },

  11. Ok, I am missing something.
    I have three fields on my Channel.
    I would like to create a gauge for each field.
    Created Field 1 gauge and it works great.
    But I have not been able to get field 2 data to show up on the new gauge gauge I created for field 2.
    I have changed just about every var that I think it should be. But no luck.
    Thought this would be the spot:
    // get the data point
    p = data.field1;
    Change to data.field2…..but not luck.
    Changed just about every place there was a 1 to a 2, but still no luck.

    Any questions, do ask, any answers please share.
    Thanks for your time.

  12. Anybody who tried to make a multiple gauge? I mean 2 or 3 gauges in one visualization?
    I came across this example https://developers.google.com/chart/interactive/docs/gallery/gauge
    and tried to rework that to get the data from Thingspeak, but the moment I put in a JSON call for all the fields, it jkyst doesnt show anything (crashes I think)
    If i put in a JSON for one specific field, it doesnt crash, but the moment I try to put the datafield in the display function, again it crashes.
    Somehow I geel that I am completely on the wrong track.
    Anybody has any idea how to do this?

Leave a Reply