RGraph canvas is not redrawn when I navigate back to the page

Question

I am using RGRaph.gauge and .thermometer plugins.

When I open page first time all is shown properly.

But if I will jump to another page section and then back to the page, the canvas is empty.

Refresh doesn't work neither. Necessary to press CTRL+F5 in order to reload the page without cache.

I sow that possible solution could be the usage of RGraph.ObjectRegistry.Clear(); but I am not sure when to call it.

Here is my initial code:

<!-- Include the RGraph libraries -->
<script src="ui/RGraph/libraries/RGraph.common.core.js" ></script>
<script src="ui/RGraph/libraries/RGraph.gauge.js" ></script>
<!--[if lt IE 9]><script src="ui/RGraph/excanvas/excanvas.js"></script><![endif]-->

Script and DIV:

<script>
    function PRODgauge (PROD)
    {
        var gauge = new RGraph.Gauge('cvsPROD', 0,20,PROD)

        .Set('units.post', ' K')
        .Set('shadow', false)
        .Set('zoom.shadow', false) 
        .Set('zoom.fade.in', false) 
        .Set('zoom.fade.out', false) 
        .Draw();    

        var s = document.getElementById('PRODvalue');
        s.innerHTML = PROD + ' K';
    }

    function UATgauge (UAT)
    {
        var gauge = new RGraph.Gauge('cvsUAT', 0,20,UAT)

        .Set('units.post', ' K')
        .Set('shadow', false)
        .Set('zoom.shadow', false) 
        .Set('zoom.fade.in', false) 
        .Set('zoom.fade.out', false) 
        .Draw();    

        var s = document.getElementById('UATvalue');
        s.innerHTML = UAT + ' K';
    }

    window.onload = function () {           
        RGraph.AJAX.getNumber('pages/home/last_15min_PROD_data.jsp', PRODgauge);
        RGraph.AJAX.getNumber('pages/home/last_15min_UAT_data.jsp', UATgauge);
        setTimeout(window.onload, 300000);      
    }
</script>

<div id="stats-content">
 <div id="chart1" style="display: inline-block;"></div>
 <div id="chart2" style="display: inline-block;"></div>
 <div id="chart3" style="display: inline-block;"><canvas id="cvsPROD" height="200" width="200">[No canvas support]</canvas><h3 style="position: relative; text-align: center; top: -45px;">PROD</h3><h2 style="text-align: center; position: relative; top: -45px;"><span id="PRODvalue"></span>
 </div>
 <div id="chart4" style="display: inline-block;">
        <canvas id="cvsUAT" height="200" width="200">[No canvas support]</canvas>
        <h3 style="position: relative; text-align: center; top: -45px;">UAT</h3>
        <h2 style="text-align: center; position: relative; top: -45px;"><span id="UATvalue"></span>
 </div>
</div>

Thank you very much Reddy

Richard · Answer 1 · 2020-08-16T08:23:17.120

0

Your charts appear to work OK. If it's IE7/8 that you're talking about (which I don't have to test with) I would suggest that you also try changing your timer to simply refresh the page - first though try changing the interval to 5000.

edited Aug 16 '20 at 08:23

answered Feb 12 '14 at 16:22

Richard

4,809
3
27
46

Hello Richard, the problem I have is in all browsers. It will properly show the graph, but once I will click to some submenu and then again will click to main page it will show empty space. Only visible are values shown by `var s = document.getElementById('PRODvalue'); s.innerHTML = PROD + ' K';` I suppose that there is something hidden what doesn't allow to re-paint the canvas in case that is already in cache or somewhere. Regarding the interval; this feature works perfectly. The problem is really only by reload the page. Thanks – Reddy SK Feb 19 '14 at 11:21
BTW: neither ` ` helped. Still I need to refresh page from scratch – Reddy SK Feb 19 '14 at 11:40
Well, check your JavaScript console for any error message. And try putting a demonstration page online and posting a link to it. – Richard Feb 19 '14 at 15:24

RGraph canvas is not redrawn when I navigate back to the page

1 Answers1