Redraw RGraph SVG SemiCircular Chart

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

                    })
});

Solution

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>