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>
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