RGraph Pie Chart Doesn't Refresh Value

Question

I try to get data from the API and refresh the Pie chart on an Electron application page, but I can't refresh the value of the chart. The values on the chart never change. I tried this method with RGraph Gauge before and it worked, but with Electron doesn't refresh the value. What am I doing wrong? Thank you for your help. Screenshot of my electron application

<script>
    const ipcRenderer = require("electron").ipcRenderer;
    const  {session}  = require('electron').remote;
    document.getElementById("backBtn").addEventListener("click",()=>{
        ipcRenderer.send("btnBack","101");
    });

    temp = new RGraph.HorseshoeMeter({
        id: 'temp',
        min: 0,
        max: 50,
        value: 15,
        options: {
            colors: ["#3678c1", '#BED1E3'],
            textColor: "#3678c1",
            animationOptions: {frames: 60}                    // Doesn't need to be a string
        }
    }).draw();

    hum = new RGraph.HorseshoeMeter({
        id: 'hum',
        min: 0,
        max: 100,
        value: 45,
        options: {
            colors: ["#3678c1", '#BED1E3'],
            textColor: "#3678c1",
            animationOptions: {frames: 60}                    // Doesn't need to be a string
        }
    }).draw();

    iaq = new RGraph.HorseshoeMeter({
        id: 'iaq',
        min: 0,
        max: 3000,
        value: 1232,
        options: {
            colors: ["#3678c1", '#BED1E3'],
            textColor: "#3678c1",
            animationOptions: {frames: 60}                    // Doesn't need to be a string
         }
    }).draw();

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);
                    myResolve(obj.accessToken);
                }
                else{ myResolve("Token bulunamadı")}
            }
        });
    });
    return await myPromise;
}

function httpCall(){
    getSessionInfo().then(function (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 = "Öğrenci Sayısı : "+obj.NoS;
                temp.value = parseInt(obj.Temp);
                hum.value = parseInt(obj.Hum);
                iaq.value = parseInt(obj.IAQ);

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

score 0 · Accepted Answer · answered Jan 27 '21 at 15:59

Here's my answer that was posted to the RGraph forum:

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:

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

And here's a CodePen of the code:

https://codepen.io/rgraph/pen/gOLYOej

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, Jan 28 '21 at 09:15

RGraph Pie Chart Doesn't Refresh Value

1 Answers1