The Semi-circular progress labels are disappearing


« 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 Daryl Davis on 11th January 2017
Long time user, first time writer...
I have just switched to using your graphs, been working with them almost a year, off and on, and I like them, and plan to continue using them.

That being said, I found an issue I thought you would like to know about,
when I continually reload a semi circular graph i loose the labels.

I have had to change the name of the graph to get a random name to get rid of the issue. So I am working, but it may be a memory error using the Canvas ID. I hope this helps.


The graph gets reloaded on a select onchange event.
Here is the function code that loads the graph
     var row = rowData.d;
     while (gg.hasChildNodes()) {
         gg.removeChild(gg.lastChild);
     }
     var gg1 = document.createElement("CANVAS");
     gg1.width = 500;
     gg1.height = 300;
     gg1.id = getRandomName(); //'cnvGraph'
     gg.appendChild(gg1);
     var i = 0;
     var compValue = 0.0;
     for (; i < row.length; i++) {

         compValue += row[i].percentage * 100;

     }
     $(icoCompliance).addClass('hide');
     var thisvalue = compValue / i;

     new RGraph.SemiCircularProgress({
         id: gg1.id,
         min: 0,
         max: 100,
         value: thisvalue.toFixed(1),
         options: {
             scaleDecimals: 1,
             unitsPost: '%',
             labelsCenterSize: 70,
             gutterbottom: 105,
             colors: ['#00BA00', 'red'],
             width: 225,
             labelsCenterBold: 'true',
             labelsMinColor: 'white',
             labelsMaxColor: 'white'
            
         }
     }).grow(30);
Posted by Richard on 12th January 2017
Hi there,

You will need a unique ID for each canvas tag that you create. Plus you have a few strange settings in the config. Have a look at this:

www.rgraph.net/fiddle/view.html/necreating-semi-circular-progress-dynamically

You could also try setting:

textAccessible: false

so that it uses canvas text instead of DOM text.




Richard

Add a reply

 




« Back to message list
RGraph on social media