Update percentage and circle

[fernandomatal]

Is there a way to update the percentage and the circle without re doing the circle?

I just want to update the circle every time the user performs certain action.

Thank you.

[polikin]

+1

[DlupBox]

+1

[brandonzuech]

+1

[brandonzuech]

I know this isn't the answer but I would like to offer a workaround for other developers that come across this page.

[html]
<div id="statcontianer">
<div id="myStat2"></div>
</div>

[javascript]
function reset(percent)
{
$("#myStat2").remove();
$("#statcontianer").append("<div id="myStat2"></div>");
$("#myStat2").attr("data-dimension", "250");
$("#myStat2").attr("data-info", "my text");
$("#myStat2").attr("data-width", "30");
$("#myStat2").attr("data-fontsize", "38");
$("#myStat2").attr("data-fgcolor", "#61a9dc");
$("#myStat2").attr("data-bgcolor", "#eee");
$("#myStat2").attr("data-text", percent.toString());
$("#myStat2").attr("data-percent", percent.toString());
$('#myStat2').circliful();
}

[alparslanahmed]

My solution maybe not qualified but it's work for me. I'm using this with jquery downcount plugin for under construction page (http://www.dijicat.com)

function update(area, percent) {
var percent = percent;
var width = 10;
bgcolor = "#29aae2";
fgcolor = "white";
var $canvas = $("#" + area + "> canvas");
var context = $canvas[0].getContext('2d');
var x = $canvas[0].width / 2;
var y = $canvas[0].height / 2;
var degrees = percent * 360.0;
var radians = degrees * (Math.PI / 180);
var radius = $canvas[0].width / 2.5;
var startAngle = 2.3 * Math.PI;
var endAngle = 0;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
var fill = false;
var current = percent / 100;
context.clearRect(0, 0, $canvas[0].width, $canvas[0].height);
context.beginPath();
context.arc(x, y, radius, endAngle, startAngle, false);
context.lineWidth = width - 1;

// line color
context.strokeStyle = bgcolor;
context.stroke();

if (fill) {
    context.fillStyle = fill;
    context.fill();
}
context.beginPath();
var xd = ((circ) * current) - quart;
context.arc(x, y, radius, -(quart), xd, false);
context.lineWidth = width;
// line color
context.strokeStyle = fgcolor;
context.stroke();

};

[sQu1rr]

$('#stat').empty().removeData().attr('data-percent', '[new-percent]').circliful()

[psrebrny]

Can i now update circle without redrawing them so if i have 14% and i want only update text in them to example 16% and draw a little circle not at begin?

[eugenio79]

Thanks so much sQu1rr!
It worked ;)

[PanRu]

Thanks so much, it helps a lot. 👍

[jpbrousseau]

Works for me! Thanks a lot!

[paddotk]

For anyone interested, I found a way to make the percentage text work as an updating counter. This will add up the displayed number along with the animating bar.
HTML
<span class="counter" id="counter1">0</span>

JS
$('#myCircle').circliful();
var updatePerc = 0;
setInterval(function(){
if(updatePerc <= 56){ //here goes the number that corresponds with "data-percent" -1
updatePerc++;
document.getElementById('counter1').innerHTML = updatePerc + '%';
}
},27); //this number depends on the value for "data-animation-step"

You'll have to position the span counter with css as well.
P.s. if anyone knows of a better way, I'd like to know!! :D

[kylescousin]

@paddotk You can just do

$('#your-circle').find('.circle-text').html(updatePerc + '%');

No css positioning needed

[paddotk]

@kylescousin This does exactly the same... Assuming the '.circle-text' still refers to the span inside the circle div?

[skinass]

Here is my solution

function draw(idwhere,idwhat,options){   
    $("#"+idwhat).remove();
    $("#"+idwhere).append('<div id="'+idwhat+'"></div>');
    $.each(options, function(i, val){
        $("#"+idwhat).attr('data-'+i, val)
    });
    $("#"+idwhat).circliful();
}

A little example of using

...
draw('myStatContianer','myStat',{
    percent:'99',
    text:'99%',
    dimension: "70",
    width: "10",
    fontsize: "17",
    fgcolor: "#319db5",
    bgcolor: "#e3f5ff"
})
...

And if you dont want to redraw circles there is an extended circliful lib
Circliful-reloaded
But it has some bugs in drawing more than 2 circles

[dougwells]

sQu1rr ... worked great. Wasted several hours trying to do this myself until I found your solution. THANK YOU!

[gesaleh]

Hi
I'm trying to make a half circle update using the sQu1rr method but it just erase and redraw a full circle with always 75% value.

is there a simple way to make the circle update ?

[IAmDarush]

To change the foreground circle degree I used the following method:

$("#circle").children("svg").eq(0).children("circle").eq(1).css("stroke-dasharray", degree + ", 20000");

where degree is the between 0 and 360. So you only update the outer circle degree without recreating the circle object.

[j-m]

@gesaleh Same here, my solution is a combination of answers above:

var container = $('#[id]').parent();
$('#[id]').remove();
container.append('<div id="[id]" class="animate"></div>');
$("#[id]").attr("data-percent", [new percentage]);
$("#[id]").circliful();

[pguso]

with the new implementation you can call the update function to set the percentage

circle.update({type: 'percent', value: 50});