I have to add a chart on a website I am developing which updates on real-time when it receives values from Ubidots…
I used the following guide: http://help.ubidots.com/developer-guides/html-canvas-widget-examples to add a chart using HighCharts but nothing was displayed. I added the following line
<div id="container1" style="min-width: 310px; height: 310px; margin: 0 auto"></div>
to my HTML file and created a chart.js file and added the js codes from the guide into it(I replaced ‘YOUR TOKEN’ by my token and ‘YOUR VARIABLE’ by my variable).
var TOKEN = 'YOUR TOKEN';
var VARIABLE = 'YOUR VARIABLE';
function getDataFromVariable(variable, token, callback) {
var url = 'https://things.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'
},
xAxis: {
type: 'datetime',
},
credits: {
enabled: false
},
series: [{
data: []
}]
});
getDataFromVariable(VARIABLE, TOKEN, function (values) {
var data = values.map(function (value) {
return [value.timestamp, value.value];
});
chart.series[0].setData(data);
});
I also added the following in the head of the html document:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="chart.js"></script>
I would like to know the right approach of adding the real-time graph and if possible the codes of how to do it. I came across this also which uses Socket.io for a real-time widget: http://help.ubidots.com/developer-guides/html-canvas-creating-a-real-time-widget?utm_content=article_1373212&utm_engine=smart-search-hybrid&utm_experiment=educate-hybrid-suggestions-experiment
But I don’t really know how to integrate HighCharts with Socket.io as the chart itself isn’t appearing.
