How auto execute function and change stroke color to svg by percent?

I’m aproach tto js but I’ve many difficult to do the below action.

I’m using the circlifull jquery for a data counter in my web page, the data is calle ny api from the server and sent to the page by modifying the css. I have difficult to change the attribute stroke to class "circle" setting colors by percent printed in the text section.

Source code circlifull

<section id="connect-data" stroke="rgb(255, 0, 0)" class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">undefined<circle cx="100" cy="100" r="57" class="border" fill="none" stroke="#ccc" stroke-width="10" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle>
<circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#008000" stroke-width="10" stroke-dasharray="36, 20000" transform="rotate(-90,100,100)"></circle>undefined<text class="timer" text-anchor="middle" x="100" y="110" style="font-size: 22px; undefined;" fill="#aaa">10%</text></svg>
</section>

I tried this test code inside to the html page for to change the color to circlifull progress bar but doesn’t work.

<script>
// Color red     --> rgb(255, 0, 0);
// Color orange  --> rgb(255, 182, 25);
// Color green   --> rgb(0, 128, 0);
$(document).ready(function() {
  if
  document.getElementById("connect-data").setAttribute ("stroke", "rgb(255, 0, 0)");
 });
</script>

How can I change the color and also setting condition for to assign:

Red under 10%
Orange 10% to 30%
Green 30%+

???

Thanks if someone can help me.

Section container

<section id="connect-data" stroke="rgb(255, 0, 0)" class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">undefined<circle cx="100" cy="100" r="57" class="border" fill="none" stroke="#ccc" stroke-width="10" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle> <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#008000" stroke-width="10" stroke-dasharray="36, 20000" transform="rotate(-90,100,100)"></circle>undefined<text class="timer" text-anchor="middle" x="100" y="110" style="font-size: 22px; undefined;" fill="#aaa">10%</text></svg> </section>

My JS code

<script>
// Color red     --> rgb(255, 0, 0);
// Color orange  --> rgb(255, 182, 25);
// Color green   --> rgb(0, 128, 0);
$(document).ready(function() {
  if
  document.getElementById("connect-data").setAttribute ("stroke", "rgb(255, 0, 0)");
 });
</script>

You need to sign in to view this answers