Slow-loading Google Gauge - how do I alter the json call? | ThingSpeak Plugins | Forum

Avatar

Please consider registering
Guest

sp_LogInOut Log In sp_Registration Register

Register | Lost password?
Advanced Search

— Forum Scope —






— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Slow-loading Google Gauge - how do I alter the json call?
No permission to create posts
April 19, 2016
4:33 pm
Avatar
andy
New Member
Members
Forum Posts: 2
Member Since:
April 19, 2016
sp_UserOfflineSmall Offline

I've got an ESP8266 logging pool water temperature and pump pressure to ThingSpeak, and a Google chart showing the real-time value.  This is my first post, so please don't consider this spamming - it's the only way I know to post these charts publicly.  See http://www.daveandandy.com/?p=185 for the gauges.

The problem I'm having is the initial load of the gauges.  When I download the .csv data file, I see there are many gaps in the data; not every entry has a temperature, or psi, value.  When you first load the gauge the $.getJSON call returns the value for the last entry, even if it's empty.  If the value is empty (common occurrence), then the gauge just doesn't display at all.  You need to wait a minute or sometimes more before something shows up.

I would rather the json call returns the last non-empty entry, instead of the last entry.  That way the gauge will load and display the last known value, which in most cases will be close enough to the current entry.

I'm new to all this, so I'm firmly in the newb camp - please be gentle!  What should I change to get what I want:  The current JavaScript code that I'm focusing on is:
$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data)

Thanks for any and all help - I really do appreciate it! Smile

April 19, 2016
8:28 pm
Avatar
rw950431

Top
Members
Forum Posts: 261
Member Since:
January 30, 2014
sp_UserOfflineSmall Offline

How about using a different function for the initial load based on retrieving the last x results and choosing the latest one thats not blank

Eg use the URL

https://api.thingspeak.com/channels/9/feeds.json?results=10

And then iterate through the list something like (I didnt test this so the code might be wrong)
for (n = 0;n<data.feeds.length;n++) {
 if (data.feeds[n].field2) {
   p=data.feeds[n].field2;
 }
}
displayData(p);

That way you (hopefully) get at least one usable value.  

Another way might be to modify the input code so it doesn't put blank values in Laugh
April 20, 2016
5:09 pm
Avatar
andy
New Member
Members
Forum Posts: 2
Member Since:
April 19, 2016
sp_UserOfflineSmall Offline

I tried to enter your update, but I must have gotten something wrong.  Here's my JavaScript:

<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 = 107642;
  // set your channel's read api key here if necessary
  var api_key = 'SECRET API';
  // 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 + '/feeds.json?results=10,api_key=' + api_key, function(data) {

for (n = 0;n<data.feeds.length;n++) {
 if (data.feeds[n].field2) {
   p=data.feeds[n].field2;
 }
}
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>

 

Any suggestions?Embarassed

April 20, 2016
9:39 pm
Avatar
rw950431

Top
Members
Forum Posts: 261
Member Since:
January 30, 2014
sp_UserOfflineSmall Offline

I suggest you create it as  separate function like loadInitialData() which is called only once  and leave the original loadData() in place for the regular updates.

In what way doesnt it work?  The graphs on your website are marked as private so I cant really see whats happening..

Forum Timezone: America/New_York

Most Users Ever Online: 114

Currently Online: Hans, agrisensezm
36 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

rw950431: 261

Vinod: 196

piajola: 85

turgo: 70

vespapierre: 63

Adarsh_Murthy: 62

Member Stats:

Guest Posters: 1

Members: 5703

Moderators: 0

Admins: 2

Forum Stats:

Groups: 4

Forums: 17

Topics: 1313

Posts: 4565

Newest Members:

Archieter, JamesExedo, IrbosHich, brodi, kasko, franklin castro

Administrators: Hans: 387, lee: 457