% Dew point in Google Gauge | ThingSpeak Apps | 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
% Dew point in Google Gauge
Avatar
rberkelm

Silver
Forum Posts: 8
sp_UserOfflineSmall Offline
1
August 11, 2016 - 4:46 am
sp_Permalink sp_Print

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>

Avatar
rw950431

Forum Posts: 252
sp_UserOfflineSmall Offline
2
August 11, 2016 - 8:22 pm
sp_Permalink sp_Print sp_EditHistory

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.

Avatar
Vinod

Forum Posts: 183
sp_UserOfflineSmall Offline
3
August 11, 2016 - 10:05 pm
sp_Permalink sp_Print

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>

Avatar
rberkelm

Silver
Forum Posts: 8
sp_UserOfflineSmall Offline
4
August 12, 2016 - 8:10 pm
sp_Permalink sp_Print

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

Avatar
Vinod

Forum Posts: 183
sp_UserOfflineSmall Offline
5
August 14, 2016 - 8:33 pm
sp_Permalink sp_Print

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.

Avatar
rberkelm

Silver
Forum Posts: 8
sp_UserOfflineSmall Offline
6
August 15, 2016 - 8:45 am
sp_Permalink sp_Print

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

Avatar
rberkelm

Silver
Forum Posts: 8
sp_UserOfflineSmall Offline
7
September 12, 2016 - 8:22 am
sp_Permalink sp_Print

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: jacktheripper125
20 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:

Nsneilotof

angieus2

goldiepw11

BinanceoSt

gnarender123@gmail.com

edenderest

Forum Stats:

Groups: 4

Forums: 17

Topics: 1313

Posts: 4565

 

Member Stats:

Guest Posters: 1

Members: 5703

Moderators: 0

Admins: 2

Administrators: Hans, lee