Help with web ploting javascript

dsn101 · May 26, 2020, 3:48am

Hi guys, I’m currently doing a personal project to monitor the temperature of the room I am, and plot it via web. I’m using a Particle photon micro controller to gather the temperature and send it via JSON. I’m trying to plot it with “plot.ly” and when I’m trying to change the default value to my variable, it doesn’t work. I already plot it using high-charts and a google gauges.

A little background, I don’t have knowledge programming on javascript or using JSON.
This is my code:

var accessToken = "xxxxxxxx"; //not display for security
var deviceID = "xxxxx" ////not display for security
var url_temp = "https://api.particle.io/v1/devices/" + deviceID + "/Temperatura";

var tiempo = 50;
var tiempo_r= 500;


//TEMPERATURA
function callback_temp(data, status){
  if (status == "success") {
    temp = parseFloat(data.result);
    setTimeout(getReading, tiempo_r);
  }
  else {
    alert("There was a problem");
  }
}

function getReading_temp(){
    $.get(url_temp, {access_token: accessToken}, callback_temp);
}

var data = [
  {
    domain: { x: [0, 1], y: [0, 1] },
    value: temp,
    title: { text: "Temperature" },
    type: "indicator",
    mode: "gauge+number"
  }
];

var layout = { width: 600, height: 500, margin: { t: 0, b: 0 } };
Plotly.newPlot('myDiv', data, layout);

First image: Attribute “value:temp” the graph stops rendering

Second image: Attribute “value:250”

var data = [
  {
    domain: { x: [0, 1], y: [0, 1] },
    value: 250,
    title: { text: "Temperature" },
    type: "indicator",
    mode: "gauge+number"
  }
];

Any ideas on how to correct it?

ps:I didn’t include the js for the other 2 graps because they work ok, no need to change them.

ScruffR · May 26, 2020, 5:06am

You got several screenshots but we have no context what you want to see vs. what you see.
There is also one “stray” screenshot which shows a value of 450 but nothing to compare that with.

BTW, you have 450 - which obviously relates to speed - but then you want to know about temp - how do those two things relate to oneanother?

And you should have a global temp variable defined before using it in callback_temp to ensure the received value is not only living inside that function and vanish after the function is finished.
You also call g.refresh(temp) but we don’t know how this is implemented as we don’t know what kind of object g is nor what refresh() does.

dsn101 · May 26, 2020, 4:30pm

Hi ScruffR, thank you for taking the time to look at it, let me try to explain myself better.

we have no context what you want to see vs. what you see

What I want to see is the reading from my photon's temp variable on the right upper graph, as I do on both lower graphs that display this value.
When I change the value of the attribute "value" on the graph for my variable temp, the graph stops rendering as the first image. When I put a random number(as the second picture) it shows it.

BTW, you have 450 - which obviously relates to speed - but then you want to know about temp - how do those two things relate to oneanother?

The title speed is just the graph demo's name, it has nothing to do with what I want to show. I'll try to correct this on the first post to ensure it is clear.

dreamER · May 26, 2020, 8:50pm

Hi,
with Particle official approach works like charm (personally I don’t like JQUERY)

<html>
  <head>
        <meta charset="utf-8"/>
		    

  <body>
    
 <div id="chart_div" ></div>
 <div id="chart_div2" ></div>
    
  </body>
  
  

      <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/particle-api-js@8/dist/particle.min.js">
        </script>


   <script type="text/javascript">
      
      var dane = 0; 
      

      var particle = new Particle();
            
      var layout = { width: 600, height: 500, margin: { t: 0, b: 0 } };
      var layout2 = { width: 600, height: 500, margin: { t: 0, b: 0 } }; 

     var token1 = "YOUR_TOKEN";
     var devID = "YOUR_DEV_ID";
  
         function get_data(){
         
         particle.getVariable({ deviceId: devID , name: 'status', auth: token1 }).then(

            function(data) {
               console.log('Device variable retrieved successfully:', JSON.parse(data.body.result));
               dane = JSON.parse(data.body.result);
               
            }, 
            function(err) {
               console.log('An error occurred while getting attrs:', err);
           });
         }
        
        setInterval(function() {

          get_data();

          if(dane != 0){
            console.log('temp_boron', dane.temperature_c.toFixed(2));
            console.log('battery_v', dane.bat.toFixed(2) );	
            plot(); 	                  
          }
        
        }, 2000);      



   function plot(){
            var data = [
               {
                domain: { x: [0, 1], y: [0, 1] },
                value: dane.temperature_c,
                title: { text: "Temperature" },
                type: "indicator",
                mode: "gauge+number"
              }
            ]; 

             Plotly.newPlot('chart_div', data, layout);  


          var data2 = [
            {
             domain: { x: [0, 1], y: [0, 1] },
             value: dane.pressure_pKa,
             title: { text: "pressure" },
             type: "indicator",
             mode: "gauge+number"
            }
          ]; 

             Plotly.newPlot('chart_div2', data2, layout2);  


}
  
      
    </script>
  </head>
  
</html>

I guessing with your approach, you have to call “var data” and Plotly.newPlot every time you want to refresh your data so try to modify your js. some like this:

<html>
  <head>
        <meta charset="utf-8"/>
		    

  <body>
    
 <div id="chart_div" ></div>
 <div id="chart_div2" ></div>
    
  </body>
  
  

      <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script type="text/javascript">



var accessToken = "YOUR_TOKEN"; //not display for security
var deviceID = "YOUR_DEV_ID" ////not display for security
var url_temp = "https://api.particle.io/v1/devices/" + deviceID + "/status";

var tiempo = 50;
var tiempo_r= 1000;

var layout = { width: 600, height: 500, margin: { t: 0, b: 0 } };




//TEMPERATURA
function callback_temp(data, status){
  if (status == "success") {
    var temp = JSON.parse(data.result);
    //console.log("temp", temp);
    //var temperature = temp.temperature_c;
    //console.log("tempperature", temperature);

    //setTimeout(getReading, tiempo_r);
    plot(temp.temperature_c);
  }
  else {
    console.log("There was a problem");
  }
}

function getReading_temp(){
    $.get(url_temp, {access_token: accessToken}, callback_temp);
}

function plot(res){
   var data = [
    {
    domain: { x: [0, 1], y: [0, 1] },
    value: res,
    title: { text: "Temperature" },
    type: "indicator",
    mode: "gauge+number"
   }
 ];

 Plotly.newPlot('chart_div', data, layout);
}


setInterval(function() {

getReading_temp();

}, tiempo_r);  
   


    </script>
  </head>
  
</html>

Also setTimeout(getReading, tiempo_r) will never be called as getReading does not exist and is inside callback_temp function which is also not called nowhere you have to use setInterval() instead of setTimeout() and call getReading_temp() over and over and over…

I tested both solutions they are working fine

Your Modified js.

With Particle object.

dsn101 · May 26, 2020, 10:16pm

Hi dreamER, thank you for your respond!
I copied your code with my token and device id, but didn’t work. So I did try to adapt my code to yours, making some changes.

This is my whole .js code


var accessToken = "xxx";
var deviceID = "xxx"
var url_temp = "https://api.particle.io/v1/devices/" + deviceID + "/Temperatura";

var layout = { width: 300, height: 300, margin: { t: 0, b: 0 } };

//TEMPERATURA
function callback_temp(data, status){
  if (status == "success") {
      temp = JSON.parse(data.result);
     plot(temp.temperature_c);
  }
  else {
    alert("There was a problem");
  }
}

function getReading_temp(){
    $.get(url_temp, {access_token: accessToken}, callback_temp);
}

// GOOGLE GAUGE
google.charts.load('current', {'packages':['gauge']});

google.charts.setOnLoadCallback(temperatura);

  //MEDIDOR DE TEMPERATURA  
	function temperatura() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temperatura', 0],
        ]);

        var options = {
          width: 250, height: 250,
          yellowFrom:30, yellowTo: 40,
          redFrom: 40, redTo: 50,
          minorTicks: 5,
          min:0,
          max:50,
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_temp'));
		
        setInterval(function() 
        {
		      getReading_temp();
		      chart.draw(data, options);
          data.setValue(0, 1, temp);
        }, 1000);
  }

//----------------------------high-charts graph

var gaugeOptions = {
    chart: {
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['50%', '85%'],
        size: '150%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor:
                Highcharts.defaultOptions.legend.backgroundColor || '#2B1B17',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    exporting: {
        enabled: false
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        tickWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};

// The speed gauge
var chartSpeed = Highcharts.chart('chart-temp', Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 60,
        title: {
            text: 'ºC'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'Speed',
        data: [0],
        dataLabels: {
            format:
                '<div style="text-align:center">' +
                '<span style="font-size:80px">{y}</span><br/>' +  //TAMAÑO NUMERO DE ABAJO
                '<span style="font-size:12px;opacity:0.4">ºC</span>' + //tamaño unidades
                '</div>'
        },
        tooltip: {
            valueSuffix:'TEMP'
        }
    }]
}));

// Updating the graph
setInterval(function () {
    var point,
        newVal,
        inc;

    if (chartSpeed) {
        point = chartSpeed.series[0].points[0];
        inc = Math.round((Math.random() - 0.5) * 100);
        newVal = point.y + inc;

        if (newVal < 0 || newVal > 200) {
            newVal = point.y - inc;
        }

        point.update(temp);
    }
}, 2000);

//----------------------------PLOTLY GRAPH------------------------

function plot(temp){
  var data = [
  {
    domain: { x: [0, 1], y: [0, 1] },
    value : temp,
    title: { text: "Temp" },
    type: "indicator",
    mode: "gauge+number"
  }
];

Plotly.newPlot('prueba', data, layout);
}

setInterval(function(){
  
  getReading_temp();

}, 1000);

I did change your variable res for mine, temp

function plot(temp){
  var data = [
  {
    domain: { x: [0, 1], y: [0, 1] },
    value : temp,
    title: { text: "Temp" },
    type: "indicator",
    mode: "gauge+number"
  }
];

This is how it is display

ps.
I change:
var temp = JSON.parse(data.result);
to:

temp = JSON.parse(data.result);

Because leaving the var temp will affect the other two graphs, displaying them like this:

I really don’t know why this happened.

Thank you again for your help.

dreamER · May 27, 2020, 4:21am

You can have as many var temp as you want as long as they are local like in the example above but…
your issue is not here .

I can bet that you don’t have a key “temperature_c” in jour variable named “Temperatura” as I have in my named “status”

My JSON rsults looks like this for example:

{bat: 4.03, MQ2: 10.01, humidity: -15.12, pressure_pKa: 1032.37, temperature_c: 19.64, …}
MQ2: 10.01
altitude_m: 925.99
bat: 4.03
charg: 80.58
humidity: -15.12
pressure_pKa: 1032.37
temperature_c: 19.64
__proto__: Object

As you can see I have a key in my variable “status” which is "temperature_c"

Firstly we wlii have to see jour JSON results from your var “Temperatura”
To get that, simply unmark console.log(“temp”, temp); in callback_temp() function.

and then try this

<html>
  <head>
        <meta charset="utf-8"/>
		    

  <body>
  <style>  
            #MQ2 { 
                float:left;  
                 
                width:33%; 
                 
            } 
            #altitude_m{ 
                float:left;  
                
                width:33%; 
                
            } 
            #bat{ 
                float:left;  
             
                width:33%; 
                 
            } 
             #charg{ 
                float:right; 
               
                width:33%; 
                 
            } 
             #humidity{ 
                float:right; 
                 
                width:33%; 
                
            } 
             #pressure_pKa{ 
                float:right; 
             
                width:33%; 
                 
            } 
             #temperature_c{ 
                float:left; 
                 
                width:33%; 
               
            } 
             
        </style> 
 <div>   
 <div id="MQ2" ></div>
 <div id="altitude_m" ></div>
 </div>
 <p>
 <div id="bat" ></div>
 <div id="charg" ></div> 
 <p>
 <div id="humidity" ></div>
 <div id="pressure_pKa" ></div>
 <p>
 <div id="temperature_c" ></div>
    
  </body>
  
  

      <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script type="text/javascript">



var accessToken = "xxxxxxxxxxx"; //not display for security
var deviceID = "xxxxxxxxxxxx" //not display for security
var url_temp = "https://api.particle.io/v1/devices/" + deviceID + "/status";

var tiempo = 50;
var tiempo_r= 1000;

var layout = { width: 300, height: 200, margin: { t: 0, b: 0 } };




//TEMPERATURA
function callback_temp(data, status){
  if (status == "success") {
    var temp = JSON.parse(data.result);
    console.log("temp", temp);
    //var temperature = temp.temperature_c;
    //console.log("tempperature", temperature);

    plot(temp);
  }
  else {
    console.log("There was a problem");
  }
}

function getReading_temp(){
    $.get(url_temp, {access_token: accessToken}, callback_temp);
}

function plot(chupacabra){
  for (key in chupacabra ){

    
   var data = [
    {
    domain: { x: [0, 1], y: [0, 1] },
    value: chupacabra[key],
    title: { text: key },
    type: "indicator",
    mode: "gauge+number"
   }
 ];

 Plotly.newPlot(key, data, layout);
 }
}

setInterval(function() {

getReading_temp();

}, tiempo_r);  
   


    </script>
  </head>
  
</html>

Make sure that your "div id " is exactly the same as your keys in your variable named "Temperatura"

Also par name in function plot(usududu) can be any

Here how is looks like:

dsn101 · July 11, 2020, 11:50pm

Thank you very much!!

system · January 10, 2021, 11:50am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Monitoring particle.variables in html document? Cloud photon	2	1037	April 3, 2020
Using javascript to display data General	3	3672	January 23, 2016
Javascript from HTML causes Photon to SOS Troubleshooting	8	2586	June 3, 2016
Using Particle App to pass variable values General	6	1338	March 20, 2018
NEED HELP want to display 2 temperatures on my html page General	2	639	April 29, 2018

Help with web ploting javascript

Related Topics