I am monitoring some particle variables from a Photon application in a simple html document, using accessToken and deviceID.
However when opening that html page on my computer the variables are displayed in the document very, very slowly: it might take several seconds to show only 6 variables.
Anyhow it is much slower than when reading the variables through Particle console.
Would this be due to my html page, is it likely that it has something to do with the Particle.process(), or should I take any general measures to assure that the optimal speed ia achieved???
Hi,
any of your code will be helpful 
I use simple html doc with google charts and “fetch” and I’m able to get Particle variable even every 500ms with no problem but my data is a JSON format and all variables is combined to one Particle.variable. here is my example and some results:
<html>
<head>
<style>
html {
background-color: black;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var dane = 0;
const url = "https://api.particle.io/v1/devices/YOUR_DEVICE_ID_HERE/status?access_token=YOUR_ACCESS_TOKEN_HERE";
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function get_boron_data(){
fetch(url)
.then((resp) => resp.json())
.then(function(data){
dane = JSON.parse(data.result);
})
.catch(function(error) {
console.log(error);
});
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['temp. [C]', 0],
['humi. [%]', 0]
]);
var options = {
width: 1200, height: 360,
redFrom: 90, redTo: 100,
yellowFrom: 40, yellowTo: 90,
greenFrom: 0, greenTo: 40,
minorTicks: 10,
majorTicks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
easing: 'inAndOut'
};
var data2 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['press. [kPa]', 0],
['altit. [m]', 0]
]);
var options2 = {
width: 1200, height: 360,
redFrom: 900, redTo: 1200,
yellowFrom:300, yellowTo: 900,
greenFrom: 0, greenTo: 300,
minorTicks: 10,
majorTicks: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
min: 0,
max: 1200,
easing: 'inAndOut',
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));
chart.draw(data, options);
chart2.draw(data2, options2);
setInterval(function() {
get_boron_data();
if(dane != 0){
console.log("from_s_interval",dane);
data.setValue(0, 1, dane.temperature_c.toFixed(2));
data.setValue(1, 1, dane.humidity.toFixed(2));
chart.draw(data, options);
data2.setValue(0, 1, dane.pressure_pKa.toFixed(2));
data2.setValue(1, 1, dane.altitude_m);
chart2.draw(data2 ,options2);
}
}, 500);
}
</script>
</head>
<body>
<div style="display: inline-block; margin: 50px; ">
<div id="chart_div" style="width: 1200px; height: 360px; opacity: 0.9"></div>
<div id="chart_div2" style="width: 1200px; height: 360px; opacity: 0.9"></div>
</div>
</body>
</html>
and some results with timestamp:
and my Particle.variable format:
It’s not really professional approach but is working pretty good
2 Likes
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.