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

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

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

  11. Is there a way to incorporate a minimum value that is not zero?

  12. Is there a way to add additional color ranges ie blue?

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

    • Change the following

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

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

    • 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};

      • thanks Randy but didnt work….I tried before doing this but nothing happened..
        I”ll keep trying !!!!

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

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

  15. It works with greenTo and greenFrom.
    Cheers!

Leave a comment