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&#305;k &#304;zleme Ekran&#305;</h2>
    </div>

    <div class="row mt-4 justify-content-center">

        <div class="col-4">
            <h3 class="text-center">S&#305;cakl&#305;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&#287;renci Say&#305;s&#305; : 11</p>
    </div>
    <div class="row mt-3 justify-content-center">
        <p id="dateTime-101" class="h5">Son Kay&#305;t Zaman&#305; : 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&#305;")}
                }
            });
        });
        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&#305;t Zaman&#305; : "+obj.created;
                    document.getElementById("NoS-101").innerHTML = "O&#287;renci Say&#305;s&#305; : "+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

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

[Replies are now closed]