Updating my Gauge causes it to overwrite the existing chart

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Gary Halpin on 18th November 2017
When updating a gauge from a button click, specifically the valueText, the new value overwrites the existing value making the text unreadable, everything else updates fine. Please assist. Thanks,
Posted by Richard on 18th November 2017
Hi there,

You might need to clear the canvas before you update it. You can do that with this:


Posted by Paul on 27th November 2017
I am using the 'RGraph.SVG.SemiCircularProgress' gauge and updating the gauge every few seconds via ajax.
I am having the same "text over-writing" issue as the person above is having.
Where do I put the RGraph.clear(canvas-name) statement? When I put the RGraph.clear
statement inside the RGraph.SVG.SemiCircularProgress code, it throws an error and when
I put it either before or after the RGraph.SVG.SemiCircularProgress code, the gauge disappears..

You can see the issue here:


I'm using .grow instead of .draw so you can see the issue without having to wait for the data to change.
Posted by Richard on 27th November 2017
Hi there,

Well if you're using the SVG Semi-circular Progress then using the canvas clear function won't work - you'll need to use the SVG clear function instead:


And then redraw the chart, or as you appear to be doing, animate the chart again.

Posted by Paul on 27th November 2017
Sorry Richard,

I'm a total noob. I've searched the forum and found a bit more info but not enough to fix my problem:

Here is the code (from your example pages) that I am using to generate the gauge. Where do I add the clear statement.

  new RGraph.SVG.SemiCircularProgress({
   id: 'chart-container',
   max: 100,
   value: state,
   options: {
    colors: ['Gradient(red:orange:yellow:green)'],
    backgroundStrokeLinewidth: 2,
    backgroundStroke: 'black',
    backgroundFill: 'gray',
    backgroundFillOpacity: 0.2,
    labelsCenterUnitsPost: '%',
    labelsCenterDecimals: 0

Thank you for your help. Expect a donation from me!

Posted by Richard on 28th November 2017
Hi there,

You can add the clear call before you create the chart the second time - so that you are starting with a clean SVG tag. eg:



Add a reply

« Back to message list