NOOB Canvas HTML two variables


#1

Hi, I’m a total noob but I know some stuff. the demos are great. I followed the “Example 5: Plotly Graph” and it works - for one variable. What if I want to display two?

This is my js. What’s wrong with it? it only shows the first one. I’m sure if I have a little help here I’ll be able to take it forward. All these variables show in the ‘standard’ dashboard widgets fine.

Also, will this js continue to refresh the dashboard widget from time to time?

var TEMP1 = '5da8c6495916364832d7d36f';//temp 1  variable
var TEMP2 = '5da8c6495916364832d7d36d';//temp 2  variable

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);
    }
  });
}

var chart = Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Bring data from Ubidots, GraphThing'
    },
    xAxis: {
        type: 'datetime',
    },
    credits: {
        enabled: false
    },
    series: [{
    	data: []
    }]
});


getDataFromVariable(TEMP1, TOKEN, function (values) {
  var data = values.map(function (value) {
    return [value.timestamp, value.value];
  });
  
  chart.series[0].setData(data);
});

getDataFromVariable(TEMP2, TOKEN, function (values) {
  var data = values.map(function (value) {
    return [value.timestamp, value.value];
  });
  
  chart.series[1].setData(data);
});

//if you got this far, thanks for reading!

#2

Hi there @tonyg , at this line:

chart.series[1].setData(data);

you are attempting to access to a non-existing position of the series array (notice that in your char setup, the series array is of length zero), so you should add an additional data object to the series array.

All the best


#3

Thank you for replying. Could you elaborate on how to add this object please in the context of my code? I have been trying all day and 8 just don’t get it…


#4

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);
};
});
};
}