Display real-time charts on localhost(website) from values received on Ubidots using HighCharts


#1

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.


#2

Hi @tia,

your js sources should be at the bottom of the JS source code, not inside the HTML document:

imagen

that is maybe your error.

Regards


#3

But that is for how it should be if I am writing the codes in the HTML canvas widget, right? I mean, then I should add the .js sources at the bottom of the JS source codes like you did. I have to add a chart on a website I am developing(currently on localhost) which updates on real-time when it receives values from my Ubidots… I referenced the js sources in the HTML doc.


#4

Hi I am also facing same issue.@tia please let me know whether you could resolve this issue.