Alterando o data-percentage attribute

Estou tentando implementar o sistema de mostrar % em circulo, o botão de porcentagem funciona perfeitamente, mas apenas alterando os números de data-percent = "50", em outro modelo de botão diferente, eu uso isso style = "width: @ {@ ViewBag.PercentOnline}% "para calcular%, como posso implementar isso em vez da data percentual? muito obrigado

(function(a) { a.fn.circliful = function(b, d) { var c = a.extend({ fgcolor: "#556b2f", bgcolor: "#eee", fill: false, width: 15, dimension: 200, fontsize: 15, percent: 50, animationstep: 1, iconsize: "20px", iconcolor: "#999", border: "default", complete: null }, b). return this.each(function() { var w = ["fgcolor", "bgcolor", "fill", "width", "dimension", "fontsize", "animationstep", "endPercent", "icon", "iconcolor", "iconsize", "border"]. var f = {}. var F = "". var n = 0. var t = a(this). var A = false. var v, G. t.addClass("circliful"). e(t). if (t.data("text")!= undefined) { v = t.data("text"). if (t.data("icon")!= undefined) { F = a("<i></i>").addClass("fa " + a(this).data("icon")).css({ color: f.iconcolor, "font-size": f.iconsize }) } if (t.data("type")!= undefined) { j = a(this).data("type"). if (j == "half") { s(t, "circle-text-half", (f.dimension / 1.45)) } else { s(t, "circle-text", f.dimension) } } else { s(t, "circle-text", f.dimension) } } if (a(this).data("total")!= undefined && a(this).data("part")!= undefined) { var I = a(this).data("total") / 100. percent = ((a(this).data("part") / I) / 100).toFixed(3). n = (a(this).data("part") / I).toFixed(3) } else { if (a(this).data("percent")!= undefined) { percent = a(this).data("percent") / 100. n = a(this).data("percent") } else { percent = c.percent / 100 } } if (a(this).data("info")!= undefined) { G = a(this).data("info"). if (a(this).data("type")!= undefined) { j = a(this).data("type"). if (j == "half") { D(t, 0.9) } else { D(t, 1.25) } } else { D(t, 1.25) } } a(this).width(f.dimension + "px"). var i = a("<canvas></canvas>").attr({ width: f.dimension, height: f.dimension }).appendTo(a(this)).get(0). var g = i.getContext("2d"). var r = i.width / 2. var q = i.height / 2. var C = f.percent * 360. var H = C * (Math.PI / 180). var l = i.width / 2.5. var B = 2.3 * Math.PI. var z = 0. var E = false. var o = f.animationstep === 0? n: 0. var p = Math.max(f.animationstep, 0). var u = Math.PI * 2. var h = Math.PI / 2. var j = "". var k = true. if (a(this).data("type")!= undefined) { j = a(this).data("type"). if (j == "half") { B = 2 * Math.PI. z = 3.13. u = Math.PI * 1. h = Math.PI / 0.996 } } function s(J, x, y) { a("<span></span>").appendTo(J).addClass(x).text(v).prepend(F).css({ "line-height": y + "px", "font-size": f.fontsize + "px" }) } function D(y, x) { a("<span></span>").appendTo(y).addClass("circle-info-half").css("line-height", (f.dimension * x) + "px") } function e(x) { a.each(w, function(y, J) { if (x.data(J)!= undefined) { f[J] = x.data(J) } else { f[J] = a(c).attr(J) } if (J == "fill" && x.data("fill")!= undefined) { A = true } }) } function m(x) { g.clearRect(0, 0, i.width, i.height). g.beginPath(). g.arc(r, q, l, z, B, false). g.lineWidth = f.width + 1. g.strokeStyle = f.bgcolor. g.stroke(). if (A) { g.fillStyle = f.fill. g.fill() } g.beginPath(). g.arc(r, q, l, -(h), ((u) * x) - h, false). if (f.border == "outline") { g.lineWidth = f.width + 13 } else { if (f.border == "inline") { g.lineWidth = f.width - 13 } } g.strokeStyle = f.fgcolor. g.stroke(). if (o < n) { o += p. requestAnimationFrame(function() { m(Math.min(o, n) / 100) }, t) } if (o == n && k && typeof(b)!= "undefined") { if (a.isFunction(b.complete)) { b.complete(). k = false } } } m(o / 100) }) }
}(jQuery)). <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="circlestat circliful" data-dimension="190" data-width="6" data-fontsize="12" data-percent="50" data-fgcolor="#fff" data-bgcolor="rgba(51, 51, 51, 0)" style="width: 190px. "> <canvas style="width: 190px. height:190px. "></canvas>
</div> <script type="text/javascript"> $(function() { $('.circlestat').circliful(). }). </script>