Hello I fixe3d this another way - (or avoided it) by upgrading to STEM from the old education version, where there is a lovely widget that does exactly what I wanted.,
but in case anyone is reading, this worked for me:
var TOKEN = '';// your token
var TEMP1 = '5da8c6495916364832d7d36f';//temp 1 variable
var TEMP2 = '5da8c6495916364832d7d36d';//temp 2 variable
var TEMP3 = '5da8c6495916364832d7d36e';//temp 3 variable
var TEMP4 = '5da8c64a5916364832d7d371';//temp 4 variable
var TEMP5 = '5da8c64b5916364832d7d372';//temp 5 variable
var TEMP6 = '5da8c64a5916364832d7d370';//temp 6 variable
seriesOptions = [];
var seriesCounter = 0
var names = [TEMP1, TEMP2, TEMP3, TEMP4, TEMP5, TEMP6];
var nicenames = ['TEMP1', 'TEMP2', 'TEMP3', 'TEMP4', 'TEMP5', 'TEMP6'];
function getDataFromVariable(variable, token, callback) {
var url = 'https://app.ubidots.com/api/v1.6/variables/' + variable + '/values';
var headers = {
'X-Auth-Token': token,
'Content-Type': 'application/json'
};
$.ajax({
url: url,
method: 'GET',
headers: headers,
success: function (res) {
callback(res.results);
}
});
}
function createChart() {
var chart = Highcharts.chart('container', {
chart: {
type: 'spline',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Bring temp data from Ubidots, GraphThing5'
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: 'Temperature Deg (C)'
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Too Cold
from: -5,
to: 5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Too Cold',
style: {
color: '#606060'
}
}
}, { // OK
from: 5,
to: 22,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'OK',
style: {
color: '#606060'
}
}
}, { // Too Hot
from: 22,
to: 50,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Too Hot',
style: {
color: '#606060'
}
}
}]
},
credits: {
enabled: false
},
tooltip: {
xDateFormat: '%Y-%m-%d-%H:%M'
},
series: [{
data: seriesOptions[0],name:nicenames[0]
}, {
data: seriesOptions[1],name:nicenames[1]
}, {
data: seriesOptions[2],name:nicenames[2]
}, {
data: seriesOptions[3],name:nicenames[3]
}, {
data: seriesOptions[4],name:nicenames[4]
}, {
data: seriesOptions[5],name:nicenames[5]
}]
});
}
// repeating function
(function(){
// 1. Call load_seriesOptions passing a callback function,
// which will be called receiving the result from the async operation
console.log("1. function called...")
load_seriesOptions(function(result) {
// 5. Received the result from the async function,
// now do whatever you want with it:
//console.log("5. result is: ", result);
console.log("5. result received");
/* if (chart) {
chart.destroy();
chart = undefined;
} */
createChart()
});
setTimeout(arguments.callee, 60000);
})();
function load_seriesOptions(callback){
console.log("2. callback here is the function passed as argument above...")
// 3. Start async operation:
console.log("3. start async operation...")
seriesOptions = [];
for (var fieldIndex = 0; fieldIndex < names.length; fieldIndex ++) {
var name = names[fieldIndex];
getDataFromVariable(name, TOKEN, function (values) {
var data = values.map(function (value) {
return [value.timestamp, value.value];
});
seriesOptions.push(data); //1 series
if (seriesOptions.length == names.length) {
console.log("4. finished async operation, calling the callback, passing the result...")
// 4. Finished async operation,
// call the callback passing the result as argument
callback(seriesOptions);
};
});
};
}