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

Avatar

Please consider registering
Guest

Search

— Forum Scope —






— Match —





— Forum Options —





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

Register Lost password?
sp_Feed sp_TopicIcon
Slow-loading Google Gauge - how do I alter the json call?
Avatar
andy
New Member
Forum Posts: 2
sp_UserOfflineSmall Offline
1
April 19, 2016 - 4:33 pm
sp_Permalink sp_Print sp_EditHistory

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

Avatar
rw950431

Forum Posts: 252
sp_UserOfflineSmall Offline
2
April 19, 2016 - 8:28 pm
sp_Permalink sp_Print

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
Avatar
andy
New Member
Forum Posts: 2
sp_UserOfflineSmall Offline
3
April 20, 2016 - 5:09 pm
sp_Permalink sp_Print

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

Avatar
rw950431

Forum Posts: 252
sp_UserOfflineSmall Offline
4
April 20, 2016 - 9:39 pm
sp_Permalink sp_Print

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:
24 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

rw950431: 252

Vinod: 164

cstapels: 96

piajola: 75

vespapierre: 63

Adarsh_Murthy: 59

Newest Members:

dannymm1

KamorkasOr

GRV2903

Jusikaclaiz

Raymondpoers

ScottDus

Forum Stats:

Groups: 4

Forums: 17

Topics: 1313

Posts: 4565

 

Member Stats:

Guest Posters: 1

Members: 5703

Moderators: 0

Admins: 2

Administrators: Hans, lee