CODEWITHSUNDEEP
jqueryhtml
mastersuse
mastersuse

Reputation: 988

Change Color using JQuery

Currently I am doing as portal whereby the chart is not change the color when reaching 70% utilization.

I tried to apply "If" statement unfortunately not reflect at my chart.

<div class="progress-box text-center">
  <input type="text" class="knob dial1" value="66" data-width="120" data-height="120" data-thickness="0.40" data-fgColor="" readonly>
  <h5 class="text-blue padding-top-10 weight-500">Central</h5>
</div>

$('.dial1').attr('data-fgColor', '#11E117');
$(".dial1").knob();

$({
  animatedVal: 0
}).animate({
  animatedVal: 66
}, {
  duration: 3000,
  easing: "swing",
  step: function() {
    $(".dial1").val(Math.ceil(this.animatedVal)).trigger("change");
  }
});

The chart is able to change the color to red if the percentage reach 70% utilization.

Upvotes: 1

Views: 463

Answers (4)

jedel
jedel

Reputation: 11

$('any_selector').attr('any_attribute','any_value');

Try it!

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

To change the colours dynamically you can use the configure event of the Knob library, which you can call on each step of the animation.

Note that I amended the value to go to 100 in this example to show all the colour steps.

$('.dial1').knob();
var colors = ['#11E117', '#CC0', '#C00']

$({
  animatedVal: 0
}).animate({
  animatedVal: 100
}, {
  duration: 3000,
  easing: "swing",
  step: function() {
    var val = Math.ceil(this.animatedVal);
    $(".dial1").trigger('configure', {
      'fgColor': colors[(val < 70) ? 0 : (val < 90) ? 1 : 2]
    }).val(val).trigger("change");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>
<div class="progress-box text-center">
  <input type="text" class="knob dial1" value="66" data-width="120" data-height="120" data-thickness="0.40" data-fgColor="" readonly>
  <h5 class="text-blue padding-top-10 weight-500">Central</h5>
</div>

Upvotes: 1

DAustin
DAustin

Reputation: 471

It's hard to tell what you're after so I'm just assuming you want a color change when ".dial1" has a value of 70 or more?

$(".dial1").on("change", function (){
    if($(this).val() >= 70){
        $(".progress-box").css({"background-color":"red"});
    }
    else{
        $(".progress-box").css({"background-color":"blue"});
    }
})

Upvotes: 0

Donny
Donny

Reputation: 487

.dial1 is a css class and therefore it has no data-fgColor proprerty.

If you want to change data-fgColor you need to assign an id in your input tag.

Then you can do:

$('#inputId').attr('data-fgColor', '#11E117');

Upvotes: 0

Related Questions