Search code examples
javascriptjqueryhtmljquery-knob

How to display temp and percentage symbol next to dynamic value

I have 2 questions here.

  1. How to display Temperature symbol inside the Knob next to dynamic value.
  2. How to display Percentage (%) symbol inside the Knob next to dynamic value.

I am using <input> tag and Knob JS.

enter image description here

HTML

<div class="progress-box text-center">
    <input type="text" class="knob temperature" data-width="120" data-height="120" data-thickness="0.40" data-fgColor="#000000" readonly>
    <h5 class="text-light-blue padding-top-10 weight-500">Temperature</h5>
</div>

<div class="progress-box text-center">
    <input type="text" class="knob water_level"  data-width="120" data-height="120" data-thickness="0.40" data-fgColor="#000000" readonly>
    <h5 class="text-light-blue padding-top-10 weight-500">Water Level</h5>
</div>

JS

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

$.get(('assets/summary/temperature.php'),  // url
     function (data, textStatus, jqXHR) {  // success callback
         console.log(data);
         $({animatedVal: 0}).animate({animatedVal: data}, {
         duration: 3000,
         easing: "swing",
         step: function() {
             var val = Math.ceil(this.animatedVal);
             $(".temperature").trigger('configure', {
             'fgColor': colors[(val < 40) ? 0 : (val < 70) ? 1 : 2]
             }).val(val).trigger("change");
             return val + '%';      // I tried to apply this but not happen
         }
     });
 });
Solution

  • Have you tried adding the string in var val = Math.ceil(this.animatedVal); instead? Like this: var val = Math.ceil(this.animatedVal) + ' %'; then just return val;

    EDITED TO THIS:

    try replacing return val + '%'; with var newVal = val + ' %'; $('.temperature').val(newVal); instead .

    For adding temp symbol, instead of &#8451;, try adding String.fromCharCode(176) like this: val + String.fromCharCode(176);