% Dew point in Google Gauge | ThingSpeak Apps | 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
% Dew point in Google Gauge
No permission to create posts
August 11, 2016
4:46 am
Avatar
rberkelm

Silver
Members
Forum Posts: 13
Member Since:
June 23, 2016
sp_UserOfflineSmall Offline

Hi all

A small problem that has been driving me crazy for a week:

I want to display how close the current temperature is to the dew point, i.e. dew point as a percentage of temperature ((d/t)*100) and show the result in a Google gauge. Using the supplied app I can show dew point as a % of some fixed number (as per app example). I can extract the latest temperature and display that the same way. Separately, I can manipulate either variable with a maths function and display the result. However, when I divide dew point by temperature (or do any maths function on both variables) the result is infinity (or NaN, not a number). Any ideas?

My Java code below, the relevant lines in pink:

<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 = .......;
// set your channel's read api key here if necessary
var api_key = '......';
// maximum value for the gauge
var max_gauge_value = ;
// name of the gauge
var gauge_name = 'Dew Pt %';

// 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 t;
var p;

// get the data from thingspeak
$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {

// get the data point
t = data.field1;
p = data.field5;

// if there is a data point display it
if (p) {
p = Math.round((p/t) * 100);
displayData(p);
}

});
}

// initialize the chart
function initChart() {

data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(1);

chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
options = {width: 120, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5};

loadData();

// load new data every 15 seconds
setInterval('loadData()', 15000);
}

</script>

August 11, 2016
8:22 pm
Avatar
rw950431

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

Is it possible that t is 0 or nul?

If your browser supports it you can use console.log() to print the values of p and t so you can see whats happening. Otherwise fetch the URL in your browser and examine the data.

August 11, 2016
10:05 pm
Avatar
Vinod

MathWorks
Members
Forum Posts: 200
Member Since:
May 1, 2016
sp_UserOfflineSmall Offline

Try pasting this into an HTML file and loading it in a browser.

 

<html>

<head>
<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'>
// maximum value for the gauge
var max_gauge_value = 100;
// name of the gauge
var gauge_name = 'Dew Pt %';
// global variables
var chart;
var data;
// load the google gauge visualization
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(initChart);
// display the data
function displayData(point) {
console.log();
data.setValue(0, 0, gauge_name);
data.setValue(0, 1, point);
chart.draw(data);
}
// load the data
function loadData() {
// variable for the data point
var t, d, testRatio;

// get the data from thingspeak
$.getJSON('https://api.thingspeak.com/channels/81097/feeds/last.json', function(data) {
// get the data point
t = data.field1;
d = data.field3;
displayData(Math.round((d/t) * 100));
});
}

// initialize the chart
function initChart() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(1);
chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
options = {width: 120, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5};
loadData();
// load new data every 15 seconds
setInterval('loadData()', 15000);
}

</script>
</head>

<body>
<div id="gauge_div"></div>
<button id="demo" onclick="initChart()">Click to update gauge.</p>
</body>
</html>

August 12, 2016
8:10 pm
Avatar
rberkelm

Silver
Members
Forum Posts: 13
Member Since:
June 23, 2016
sp_UserOfflineSmall Offline

Thanks for the responses guys! I'm not too familiar with HTML but I found an online HTML editor and pasted in your code Vinod (thnx!), with my own channel number in the $.getJSON line. All I get is a white screen with an "Click to update gauge" button. No guage, no data. The channel is public, so no key should be required. What am I doing wrong?

rw950431, I'm not sure where or how to use "console.log() to print the values of p and t". Can you give me some more detail? It is quite possible that t is null, but as I said when I get the latest t and show it in the gauge, it certainly displays as a proper number. I doubt that t=0 because when I do t = Math.round((t/p) * 100) I still get "infinity" (instead of 0).

August 14, 2016
8:33 pm
Avatar
Vinod

MathWorks
Members
Forum Posts: 200
Member Since:
May 1, 2016
sp_UserOfflineSmall Offline

try this:

1) Copy all of the example code I posted from <html> to </html>

2) Open notepad.exe

3) paste the code in

4) save the file on your computer as test.html

5) open test.html in a web browser

If that works, then it shows you how to set up your app.

 

If you are not familiar with HTML and JavaScript, you may want to learn a bit about those.

If you are familiar with MATLAB you may use the MATLAB analysis app to calculate the percentage of dew point and use the thingSpeakWrite function to write it to a new channel or field. Then modify the example google gauge plugin to read the value from that field and display it.

August 15, 2016
8:45 am
Avatar
rberkelm

Silver
Members
Forum Posts: 13
Member Since:
June 23, 2016
sp_UserOfflineSmall Offline

Hi Vinod

That was very useful, thank you! Your Notepad suggestion worked for some fields but not for the Dew Point field. This made a dim light bulb go off in my brain! I think the reason why I am getting "infinity" maths results is because temperature and dew point have different time stamps in the sql db. Naturally, Dew point has a different time stamp to the rest of the fields since it is a calculated param. By querying both variables for the latest entry in the same command, it only returns the value for one, not the other, hence the null value and the NaN/infinity maths result. What I need to do is query the variables separately and then do the maths ratio. Unfortunately when I tried it in Matlab, it didn't work either, but the gauge takes soooo long to load  it is hard to work out what works and what doesn't. At least with your HTML script the result is instant. Thanks for pointing the way forward. I have something to go on with!

R

September 12, 2016
8:22 am
Avatar
rberkelm

Silver
Members
Forum Posts: 13
Member Since:
June 23, 2016
sp_UserOfflineSmall Offline

For the record, the mismatched timestamps of the temperature and dew point fields were the problem. For any given time, one or the other field would have a null value, hence the 'NaN'. I have since moved the dew point field to a new channel and now I can calculate the dew point/temperature ratio by querying the last readings in the two channels separately - full code below. Thanks for the pointers guys!

In case anyone is wondering, this ratio is a measure of how close we are to having fog and dew...

-------------------------

<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 dew pt channel id here
var channel_id = xxxxxx;
// set dew pt channel's read api key here if necessary
var api_key = 'xxxxxxx';

// set temp channel id here
var channel_id2 = xxxxxxx;
// set temp channel's read api key here if necessary
var api_key2 = 'xxxxxxx';

// maximum value for the gauge
var max_gauge_value = 100;
// name of the gauge
var gauge_name = 'D_ratio';

// 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 d;
var t;

// get the data from dew point channel
$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {

// get the data point
d = data.field1;
});

// get the data from temp channel
$.getJSON('https://api.thingspeak.com/channels/' + channel_id2 + '/feed/last.json?api_key=' + api_key2, function(data) {

// get the data point
t = data.field1;

// if there is a data point display it
//if (d) {
d = (Math.round((d/ t) * 1000))/10;
displayData(d);
});
}

// initialize the chart
function initChart() {

data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(1);

chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
options = {width: 120, height: 120, redFrom: 80, redTo: 100, yellowFrom:60, yellowTo: 80, greenFrom:40, greenTo:60, min:0, max:100, minorTicks: 5,
};

loadData();

// load new data every 15 seconds
setInterval('loadData()', 15000);
}

</script>

Forum Timezone: America/New_York

Most Users Ever Online: 114

Currently Online:
13 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:

harriettlf60, ShaToow, Aleftinfenny, DiaBentee, hugo11dom@gmail.com, Pisaruk530

Administrators: Hans: 387, lee: 457