Skip to content
Advertisement

Query ‘data-value’ to Populate Conditional If Statement

For each .round div, there is a data-value(%) which is static at the moment, but eventually going to be dynamic. Trying to call it in my JS for if data-value <= 0.50 display the bar as red, if data-value >0.50 && data-value <=0.75 display the bar as yellow and if data-value > 0.75 display it as green to call that value and wrap the Circle function in a conditional, how would I go about that?

I tried the following and it told Cannot read property 'getAttribute' of null: I tried this.getAttribute('data-value');

This is the JS with the above “solution” but doesn’t populate anything:

function Circle(el){

var a = document.querySelector("a");
console.log(a.getAttribute('data-value'));

if(a.getAttribute('data-value') <= 0.50){
    $(el).circleProgress({fill: {color: 'red'}})
    .on('circle-animation-progress', function(event,
    progress, stepValue){

        $(this).find('strong').text(String(stepValue.toFixed(2)).substr(2) + '%');
    });
    }
if(a.getAttribute('data-value') > 0.50 && a.getAttribute('data-value') <= 0.75){
    $(el).circleProgress({fill: {color: 'yellow'}})
    .on('circle-animation-progress', function(event,
    progress, stepValue){

        $(this).find('strong').text(String(stepValue.toFixed(2)).substr(2) + '%');
    });
    }
if(a.getAttribute('data-value') > 0.75){
    $(el).circleProgress({fill: {color: 'green'}})
    .on('circle-animation-progress', function(event,
    progress, stepValue){

        $(this).find('strong').text(String(stepValue.toFixed(2)).substr(2) + '%');
    });
    }

 };

Circle('.round');

Here is my working snippet:

function Circle(el){
    //if(data-value < 0.50){
    $(el).circleProgress({fill: {color: 'red'}})
    .on('circle-animation-progress', function(event,
    progress, stepValue){

        $(this).find('strong').text(String(stepValue.toFixed(2)).substr(2) + '%');
    });
    //}
    //if(data-value )
};

Circle('.round');
#circleBar {
    margin-top: 50px;
    text-align: center;
    font-family: tahoma;
}

#circleBar .round{
    min-height: 255px;
    margin-top: 30px;
    position: relative;
    margin-bottom: 20px;
}

#circleBar .round strong{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    transform: translate(-50%);
    font-size: 40px;
    color: #212121;
    font-weight: 100;
}

#circleBar span{
    display: block;
    color: #999;
    font-size: 17px;
    margin-top: 10px;
}

#circleBar span i{
    color: #104723;
    font-size: 22px;
    margin-right: 7px;
}

section button:active{
    background-color: #104723;
    border-color: #b3ab7d;
}

section button:hover{
    background-color: #104723;
    border-color: #b3ab7d;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initialscale=1.0">
    <title>Morning Report Tracker</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js" integrity="sha512-EZhmSl/hiKyEHklogkakFnSYa5mWsLmTC4ZfvVzhqYNLPbXKAXsjUYRf2O9OlzQN33H0xBVfGSEIUeqt9astHQ==" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/site.css">
</head>
<body>
    <section id="circleBar">
        <h1>Morning Report Tracker</h1>
        <p>By Location</p>

        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="round" data-value="0.87" data-size="200" data-thickness="12">
                        <strong></strong>
                        <span><i class="fa fa-map-marker"></i>
                        Kuwait
                        </span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="round" data-value="0.74" data-size="200" data-thickness="12">
                        <strong></strong>
                        <span><i class="fa fa-map-marker"></i>
                        Albania
                        </span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="round" data-value="0.44" data-size="200" data-thickness="12">
                        <strong></strong>
                        <span><i class="fa fa-map-marker"></i>
                        Australia
                        </span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="round" data-value="0.15" data-size="200" data-thickness="12">
                        <strong></strong>
                        <span><i class="fa fa-map-marker"></i>
                        Guam
                        </span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="round" data-value="0.77" data-size="200" data-thickness="12">
                        <strong></strong>
                        <span><i class="fa fa-map-marker"></i>
                        Thailand
                        </span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="round" data-value="0.74" data-size="200" data-thickness="12">
                        <strong></strong>
                        <span><i class="fa fa-map-marker"></i>
                        Syria
                        </span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="round" data-value="0.54" data-size="200" data-thickness="12">
                        <strong></strong>
                        <span><i class="fa fa-map-marker"></i>
                        Japan
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn" onclick="Circle('.round')">Load Attendance</button>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js" integrity="sha512-6kvhZ/39gRVLmoM/6JxbbJVTYzL/gnbDVsHACLx/31IREU4l3sI7yeO0d4gw8xU5Mpmm/17LMaDHOCf+TvuC2Q==" crossorigin="anonymous"></script>

</body>
</html>

Advertisement

Answer

To read the data attribute of each element in the set you’ll need to get a reference to it. As the fill.color property of the library only accepts a string, not a function, then you’ll need to use an each() loop to do that.

From there it’s a straightforward condition to determine the value and return the relevant colour. Try this:

function Circle(selector) {
  $(selector).each((i, el) => {
    let $el = $(el);
    let value = $el.data('value');
    $el.circleProgress({
      fill: { color: value < 0.5 ? 'red' : value < 0.75 ? 'yellow' : 'green' }
    }).on('circle-animation-progress', function(event, progress, stepValue) {
      $(this).find('strong').text((stepValue * 100).toFixed(0) + '%');
    });
  });
};

Circle('.round');
$('.btn').on('click', () => Circle('.round'));
#circleBar {
  margin-top: 50px;
  text-align: center;
  font-family: tahoma;
}

#circleBar .round {
  min-height: 255px;
  margin-top: 30px;
  position: relative;
  margin-bottom: 20px;
}

#circleBar .round strong {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  transform: translate(-50%);
  font-size: 40px;
  color: #212121;
  font-weight: 100;
}

#circleBar span {
  display: block;
  color: #999;
  font-size: 17px;
  margin-top: 10px;
}

#circleBar span i {
  color: #104723;
  font-size: 22px;
  margin-right: 7px;
}

section button:active {
  background-color: #104723;
  border-color: #b3ab7d;
}

section button:hover {
  background-color: #104723;
  border-color: #b3ab7d;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/site.css">
<section id="circleBar">
  <h1>Morning Report Tracker</h1>
  <p>By Location</p>

  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div class="round" data-value="0.87" data-size="200" data-thickness="12">
          <strong></strong>
          <span><i class="fa fa-map-marker"></i>Kuwait</span>
        </div>
      </div>
      <div class="col-md-3">
        <div class="round" data-value="0.74" data-size="200" data-thickness="12">
          <strong></strong>
          <span><i class="fa fa-map-marker"></i>Albania</span>
        </div>
      </div>
      <div class="col-md-3">
        <div class="round" data-value="0.44" data-size="200" data-thickness="12">
          <strong></strong>
          <span><i class="fa fa-map-marker"></i>Australia</span>
        </div>
      </div>
      <div class="col-md-3">
        <div class="round" data-value="0.15" data-size="200" data-thickness="12">
          <strong></strong>
          <span><i class="fa fa-map-marker"></i>Guam</span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="round" data-value="0.77" data-size="200" data-thickness="12">
          <strong></strong>
          <span><i class="fa fa-map-marker"></i>Thailand</span>
        </div>
      </div>
      <div class="col-md-3">
        <div class="round" data-value="0.74" data-size="200" data-thickness="12">
          <strong></strong>
          <span><i class="fa fa-map-marker"></i>Syria</span>
        </div>
      </div>
      <div class="col-md-3">
        <div class="round" data-value="0.54" data-size="200" data-thickness="12">
          <strong></strong>
          <span><i class="fa fa-map-marker"></i>Japan</span>
        </div>
      </div>
    </div>
  </div>
  <button class="btn">Load Attendance</button>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js" integrity="sha512-6kvhZ/39gRVLmoM/6JxbbJVTYzL/gnbDVsHACLx/31IREU4l3sI7yeO0d4gw8xU5Mpmm/17LMaDHOCf+TvuC2Q==" crossorigin="anonymous"></script>

Note that I tweaked the code slightly by removing the inline onclick attribute, which are bad practice and should be avoided where possible, and also converting the toFixed()/substr() calls to work with the step value as an integer and display it without decimal precision.

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement