Problems making the HorseShoe meter update
Posted by Kemal Serkan at 07:44 on Wednesday 27th January 2021 [link]
I can't refresh Pie charts according to coming data from my API, but i can refresh other HTML tags on the page. I am using this chart in Electron. Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Atolye-101</title>
<link rel="stylesheet" href="../css/styles.css">
<script src="../assets/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="../assets/bootstrap.min.css">
<link rel="stylesheet" href="../css/styles.css">
<script src="../assets/bootstrap.min.js"></script>
<script src="../js/RGraph.common.core.js"></script>
<script src="../js/RGraph.pie.js"></script>
</head>
<body onload="httpCall()">
<!-- <button class="btn btn-outline-primary" id="backBtn" style="margin: 10px">Geri</button>-->
<button type="button" class="btn btn-outline-primary" id="backBtn" style="margin: 15px">
<span class="glyphicon glyphicon-arrow-left"></span>
Geri
</button>
<div class="container">
<div class="row justify-content-center">
<h2>Atolye-101 Anlık İzleme Ekranı</h2>
</div>
<div class="row mt-4 justify-content-center">
<div class="col-4">
<h3 class="text-center">Sıcaklık</h3>
<canvas id="temp" width="300" height="300" >[No canvas support]</canvas>
</div>
<div class="col-4">
<h3 class="text-center">Nem</h3>
<canvas id="hum" width="300" height="300" >[No canvas support]</canvas>
</div>
<div class="col-4">
<h3 class="text-center">Hava Kalitesi</h3>
<canvas id="iaq" width="300" height="300" >[No canvas support]</canvas>
</div>
</div>
<div class="row mt-5 justify-content-center">
<p id="NoS-101" class="h5">Oğrenci Sayısı : 11</p>
</div>
<div class="row mt-3 justify-content-center">
<p id="dateTime-101" class="h5">Son Kayıt Zamanı : 23/02/2021 11:34</p>
</div>
</div>
<!-- <script src="../js/atolye101.js"></script>-->
<script>
const ipcRenderer = require("electron").ipcRenderer
const {session} = require('electron').remote;
// window.$ = window.jquery = require("jquery");
document.getElementById("backBtn").addEventListener("click",()=>{
ipcRenderer.send("btnBack","101");
})
temp = new RGraph.HorseshoeMeter({
id: 'temp',
min: 0,
max: 50,
value: 15,
options: {
// Some options which you can give if you choose to:
//
colors: ["#3678c1", '#BED1E3'],
//width: 25,
//textSize: 65,
textColor: "#3678c1",
//textBold: true,
//textItalic: true,
//textFont: 'Georgia'
//animationCallback: function () {$a('Finished!');}, // These can also be given as arguments to the animation function
animationOptions: {frames: 60} // Doesn't need to be a string
}
}).draw();
// }).roundRobin();
// }).roundRobin(
// {frames: 60},
// function () {console.log('Animation complete!');}
// );
hum = new RGraph.HorseshoeMeter({
id: 'hum',
min: 0,
max: 100,
value: 45,
options: {
// Some options which you can give if you choose to:
//
colors: ["#3678c1", '#BED1E3'],
//width: 25,
//textSize: 65,
textColor: "#3678c1",
//textBold: true,
//textItalic: true,
//textFont: 'Georgia'
//animationCallback: function () {$a('Finished!');}, // These can also be given as arguments to the animation function
animationOptions: {frames: 60} // Doesn't need to be a string
}
}).draw();
// }).roundRobin();
// }).roundRobin(
// {frames: 60},
// function () {console.log('Animation complete!');}
// );
iaq = new RGraph.HorseshoeMeter({
id: 'iaq',
min: 0,
max: 3000,
value: 1232,
options: {
// Some options which you can give if you choose to:
//
colors: ["#3678c1", '#BED1E3'],
//width: 25,
//textSize: 65,
textColor: "#3678c1",
//textBold: true,
//textItalic: true,
//textFont: 'Georgia'
//animationCallback: function () {$a('Finished!');}, // These can also be given as arguments to the animation function
animationOptions: {frames: 60} // Doesn't need to be a string
}
}).draw();
// }).roundRobin();
// }).roundRobin(
// {frames: 60},
// function () {console.log('Animation complete!');}
// );
async function getSessionInfo(){
let myPromise = new Promise(function(myResolve, myReject) {
session.defaultSession.cookies.get({name: "human_presence"}, (error,cookies)=>{
if(error){ myReject(error)}
if(cookies.length>0){
let arr = cookies[0];
if(arr.name === "human_presence" && ( (Date.now()-arr.expirationDate) < 600000)){
let obj = JSON.parse(arr.value);
// console.log(obj.accessToken);
myResolve(obj.accessToken);
}
else{ myResolve("Token bulunamadı")}
}
});
});
return await myPromise;
}
function httpCall(){
getSessionInfo().then(function (val){
console.log(val);
let method = "GET";
let url = "http://localhost:4000/classroom/101";
let xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
console.log(this.responseText);
let obj = JSON.parse(this.responseText);
console.log(obj);
document.getElementById("dateTime-101").innerHTML = "Son Kayıt Zamanı : "+obj.created;
document.getElementById("NoS-101").innerHTML = "Oğrenci Sayısı : "+obj.NoS;
temp.value = parseInt(obj.Temp);
hum.value = parseInt(obj.Hum);
iaq.value = parseInt(obj.IAQ);
console.log(temp.value);
console.log(hum.value);
console.log(iaq.value);
RGraph.redrawCanvas(temp.canvas);
RGraph.redrawCanvas(hum.canvas);
RGraph.redrawCanvas(iaq.canvas);
}
});
xmlHttpRequest.open(method, url);
xmlHttpRequest.setRequestHeader('Authorization', 'Bearer ' + val);
xmlHttpRequest.send();
})
}
window.onload = httpCall();
window.setInterval(function(){
httpCall();
}, 20000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Atolye-101</title>
<link rel="stylesheet" href="../css/styles.css">
<script src="../assets/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="../assets/bootstrap.min.css">
<link rel="stylesheet" href="../css/styles.css">
<script src="../assets/bootstrap.min.js"></script>
<script src="../js/RGraph.common.core.js"></script>
<script src="../js/RGraph.pie.js"></script>
</head>
<body onload="httpCall()">
<!-- <button class="btn btn-outline-primary" id="backBtn" style="margin: 10px">Geri</button>-->
<button type="button" class="btn btn-outline-primary" id="backBtn" style="margin: 15px">
<span class="glyphicon glyphicon-arrow-left"></span>
Geri
</button>
<div class="container">
<div class="row justify-content-center">
<h2>Atolye-101 Anlık İzleme Ekranı</h2>
</div>
<div class="row mt-4 justify-content-center">
<div class="col-4">
<h3 class="text-center">Sıcaklık</h3>
<canvas id="temp" width="300" height="300" >[No canvas support]</canvas>
</div>
<div class="col-4">
<h3 class="text-center">Nem</h3>
<canvas id="hum" width="300" height="300" >[No canvas support]</canvas>
</div>
<div class="col-4">
<h3 class="text-center">Hava Kalitesi</h3>
<canvas id="iaq" width="300" height="300" >[No canvas support]</canvas>
</div>
</div>
<div class="row mt-5 justify-content-center">
<p id="NoS-101" class="h5">Oğrenci Sayısı : 11</p>
</div>
<div class="row mt-3 justify-content-center">
<p id="dateTime-101" class="h5">Son Kayıt Zamanı : 23/02/2021 11:34</p>
</div>
</div>
<!-- <script src="../js/atolye101.js"></script>-->
<script>
const ipcRenderer = require("electron").ipcRenderer
const {session} = require('electron').remote;
// window.$ = window.jquery = require("jquery");
document.getElementById("backBtn").addEventListener("click",()=>{
ipcRenderer.send("btnBack","101");
})
temp = new RGraph.HorseshoeMeter({
id: 'temp',
min: 0,
max: 50,
value: 15,
options: {
// Some options which you can give if you choose to:
//
colors: ["#3678c1", '#BED1E3'],
//width: 25,
//textSize: 65,
textColor: "#3678c1",
//textBold: true,
//textItalic: true,
//textFont: 'Georgia'
//animationCallback: function () {$a('Finished!');}, // These can also be given as arguments to the animation function
animationOptions: {frames: 60} // Doesn't need to be a string
}
}).draw();
// }).roundRobin();
// }).roundRobin(
// {frames: 60},
// function () {console.log('Animation complete!');}
// );
hum = new RGraph.HorseshoeMeter({
id: 'hum',
min: 0,
max: 100,
value: 45,
options: {
// Some options which you can give if you choose to:
//
colors: ["#3678c1", '#BED1E3'],
//width: 25,
//textSize: 65,
textColor: "#3678c1",
//textBold: true,
//textItalic: true,
//textFont: 'Georgia'
//animationCallback: function () {$a('Finished!');}, // These can also be given as arguments to the animation function
animationOptions: {frames: 60} // Doesn't need to be a string
}
}).draw();
// }).roundRobin();
// }).roundRobin(
// {frames: 60},
// function () {console.log('Animation complete!');}
// );
iaq = new RGraph.HorseshoeMeter({
id: 'iaq',
min: 0,
max: 3000,
value: 1232,
options: {
// Some options which you can give if you choose to:
//
colors: ["#3678c1", '#BED1E3'],
//width: 25,
//textSize: 65,
textColor: "#3678c1",
//textBold: true,
//textItalic: true,
//textFont: 'Georgia'
//animationCallback: function () {$a('Finished!');}, // These can also be given as arguments to the animation function
animationOptions: {frames: 60} // Doesn't need to be a string
}
}).draw();
// }).roundRobin();
// }).roundRobin(
// {frames: 60},
// function () {console.log('Animation complete!');}
// );
async function getSessionInfo(){
let myPromise = new Promise(function(myResolve, myReject) {
session.defaultSession.cookies.get({name: "human_presence"}, (error,cookies)=>{
if(error){ myReject(error)}
if(cookies.length>0){
let arr = cookies[0];
if(arr.name === "human_presence" && ( (Date.now()-arr.expirationDate) < 600000)){
let obj = JSON.parse(arr.value);
// console.log(obj.accessToken);
myResolve(obj.accessToken);
}
else{ myResolve("Token bulunamadı")}
}
});
});
return await myPromise;
}
function httpCall(){
getSessionInfo().then(function (val){
console.log(val);
let method = "GET";
let url = "http://localhost:4000/classroom/101";
let xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
console.log(this.responseText);
let obj = JSON.parse(this.responseText);
console.log(obj);
document.getElementById("dateTime-101").innerHTML = "Son Kayıt Zamanı : "+obj.created;
document.getElementById("NoS-101").innerHTML = "Oğrenci Sayısı : "+obj.NoS;
temp.value = parseInt(obj.Temp);
hum.value = parseInt(obj.Hum);
iaq.value = parseInt(obj.IAQ);
console.log(temp.value);
console.log(hum.value);
console.log(iaq.value);
RGraph.redrawCanvas(temp.canvas);
RGraph.redrawCanvas(hum.canvas);
RGraph.redrawCanvas(iaq.canvas);
}
});
xmlHttpRequest.open(method, url);
xmlHttpRequest.setRequestHeader('Authorization', 'Bearer ' + val);
xmlHttpRequest.send();
})
}
window.onload = httpCall();
window.setInterval(function(){
httpCall();
}, 20000);
</script>
</body>
</html>
Posted by Richard at 15:54 on Wednesday 27th January 2021 [link]
This is as a result of the HorseShoe meter not really being a 'real' RGraph chart object - but an adaptation of the Pie chart. As a result I think it's easier to just redraw the entire chart when you update it.
Here's some code:
<!DOCTYPE html >
<html>
<head>
<script src="/libraries/RGraph.common.core.js" ></script>
<script src="/libraries/RGraph.pie.js" ></script>
<meta name="robots" content="noindex,nofollow" />
</head>
<body>
<canvas id="cvs" width="400" height="400">[No canvas support]</canvas>
<script>
function draw (value)
{
RGraph.reset(document.getElementById('cvs'));
new RGraph.HorseshoeMeter({
id: 'cvs',
min: 0,
max: 10000,
value: value,
options: {
}
}).roundRobin();
}
delay = 2000;
function update ()
{
var value = Math.random(0, 1000);
draw(value * 10000);
// Call ourselves again
setTimeout(update, delay);
}
setTimeout(update, delay);
</script>
</body>
</html>
And here's a CodePen of the code:
https://codepen.io/rgraph/pen/gOLYOej
Here's some code:
<!DOCTYPE html >
<html>
<head>
<script src="/libraries/RGraph.common.core.js" ></script>
<script src="/libraries/RGraph.pie.js" ></script>
<meta name="robots" content="noindex,nofollow" />
</head>
<body>
<canvas id="cvs" width="400" height="400">[No canvas support]</canvas>
<script>
function draw (value)
{
RGraph.reset(document.getElementById('cvs'));
new RGraph.HorseshoeMeter({
id: 'cvs',
min: 0,
max: 10000,
value: value,
options: {
}
}).roundRobin();
}
delay = 2000;
function update ()
{
var value = Math.random(0, 1000);
draw(value * 10000);
// Call ourselves again
setTimeout(update, delay);
}
setTimeout(update, delay);
</script>
</body>
</html>
And here's a CodePen of the code:
https://codepen.io/rgraph/pen/gOLYOej
Posted by Richard at 10:18 on Thursday 28th January 2021 [link]
For the next version I think I'm going to promote the Pie chart based meters (Horseshoe Meter, Segmented Meter, Activity Meter, RadialProgress Meter) to "real" chart objects instead of being based on the Pie chart. This will make it possible for animations to be better - in your case this would mean the chart wouldn't always animate from zero when it changes value. It looks much nicer when this is done.
Richard
Richard
[Replies are now closed]