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>