Redraw RGraph SVG SemiCircular Chart

Question

I have a webapplication with some SVG SemiCircular RGraph charts. The initial drawing of these SVG graphs goes well. Some of these charts I want to update on the fly with a new value. I saw in the answer (How do I redraw an RGraph SVG line plot?) that you first need to clear the previous svg, but running the grow/draw function straight after it, doesn't work. The graph is cleared, but is not redrawn with the grow function. Probably some async issue.. Did anybody encounter this behavior before? I am not really looking forward to adding a timeout or similar approach and hope I can solve it with the RGraph API itself. This is what I have:

if (this._gauge){
    // If the chart has already been created then clear the SVG
    RGraph.SVG.clear(this._gauge.svg);
} else {
    // if using SVG target the div domNode instead of the canvas element
    this._gauge = new RGraph.SVG.SemiCircularProgress ({
        id: this.domNode.id,
        min: minValue,
        max: maxValue,
        value: value,
        options: this._options
    });
}
this._gauge.grow({  frames: this.easingDuration,
                    callback: dojoLang.hitch(this,function (){
                        // for no apparent reason, if multiple SVG gauges are added, the callback is only effective for one of the gauges randomly.
                        // a timeout fixes this...
                        window.setTimeout(dojoLang.hitch(this,function(){
                             this._gauge.path.onclick = dojoLang.hitch(this, function (e){
                                 this._execMF(this.onClickMF,this._contextObj.getGuid());
                             });
                             this._gauge.path.onmousemove = dojoLang.hitch(this, function (e){
                                 e.target.style.cursor = 'pointer';
                             });
                        }),1000);

                    })
});

Richard · Accepted Answer · 2020-02-09T17:01:55.047

1

I couldn't replicate your issue. Have you tried using the canvas version of the Semi-Circular Progress bar? Canvas is a lot easier to work with if you ask me.

Before switching you could try changing your call from RGraph.SVG.clear() to RGraph.SVG.reset() and see if that has any effect.

The page for a canvas version is this:

<html>
<head>
    <script src="RGraph.common.core.js" ></script>
    <script src="RGraph.common.dynamic.js" ></script>
    <script src="RGraph.semicircularprogress.js" ></script>

    <meta name="robots" content="noindex,nofollow" />
</head>
<body>

    <canvas id="cvs" width="600" height="300">[No canvas support]</canvas>

    <script>
        scp = new RGraph.SemiCircularProgress({
            id: 'cvs',
            min: 0,
            max: 10,
            value: 8,
            options: {
            }
        }).grow(null, function ()
        {
            alert('In First grow effects callback');

        })
        //.on('click', function (e)
        //{
        //    $a('Inside the click event that sets a random value');
        //    scp.value = RGraph.random(0,10);
        //    scp.grow();
        //});

        setTimeout(function ()
        {
            scp.value = 4;
            scp.grow(null, function ()
            {
                alert('In second grow effects callback');
            });
        }, 3000);
    </script>
</body>
</html>

edited Feb 09 '20 at 17:01

answered Feb 09 '20 at 16:56

Richard

4,809
3
27
46

Hi Richard, thanks for your quick response! I have actually implemented both the canvas and the svg charts and do need both implementations. For canvas everything is working as expected. Could you really not replicate it for SVG? So first creating a chart with .grow() function, after this remove the svg with .clear() and after this again do a .grow() and it worked? – Ivo Sturm Feb 10 '20 at 07:42
I tried the Reset option, but it is giving me: 'RGraph.SVG.reset is not a function'. I do see rhe function exists in RGraph object, but not on RGraph.SVG. Perhaps I am using an older version of the API? I can't seem to find an attribute called 'version' in the RGraph files I am using though. I am probably not looking in the correct spot.. – Ivo Sturm Feb 10 '20 at 08:07
The reset function is definitely there in RGraph.svg.common.core.js. You can see the file here: https://www.rgraph.net/libraries/src/RGraph.svg.common.core.js Just search for "RGraph.SVG.reset =" If the function isn't there in your version you could try updating (this version is 5.21). You can, by the way, just update a single file. If you upgrade you'll have to update all of the SVG libraries that are used on the page. – Richard Feb 10 '20 at 11:08
It turned out the upgrade of the RGraph library did the trick. I implemented a version from 2017 when I built this widget back in 2018. Perhaps it is an idea to add a version attribute in the RGraph object? In that way it is easy to see on which version an implementation is running. I could also get rid of the timeout in the grow function :). Anyway, thanks for the help! – Ivo Sturm Feb 10 '20 at 18:40

Redraw RGraph SVG SemiCircular Chart

1 Answers1