Disable rounding in jQuery knob library

Question

I have a float value, that comes from JSON data. Calling console.log() displays the correct value fe: 12.3. But I don't know why, when I try to set this value with val() it rounds the value fe: 12.0?

If the value is 23.4, displays 23.0. If 31.8, displays 32.0.

This is the snippet in which I want to set the value:

$(document).ready(function() {
  var color = 'green'
  $('.dial').knob({
    'min': 0,
    'max': 100,
    'width': "100%",
    'height': "100%",
    'displayInput': true,
    'fgColor': color,
    'readOnly': true,
    'draw': function() {
      $(this.i)
        .val(this.cv.toFixed(1) + 'ms')
        .css('font-size', '15pt')
        .css('color', 'black');
    }
  });
});

And this is the code that sets the value:

$.ajax({
  url: "stats.php",
  type: "POST",
  data: data
}).done(function(answer) {
  console.log(answer)
  time = answer.TIME
  time = parseFloat(time)
  $(<?php echo "host".$i ?>).val(time);
  $(<?php echo "host".$i ?>).trigger('change');
  setColor();
});

Thank you!

I think it supports float values, because until now my knob was working correctly displaying the correct data. I have started to have this problem since i set the value with jquery val() :( Thank you so much! — Emile, May 24 '21 at 15:32

score 0 · Accepted Answer · answered May 24 '21 at 15:28

By default jQuery Knob only supports integers. To make it correctly format floating point values, you need to set the step parameter to the level of accuracy you require. In this case, 0.1:

$(document).ready(function() {
  var color = 'green'

  $('.dial').knob({
    min: 0.0,
    max: 100.0,
    step: 0.1, // add this
    width: "100%",
    height: "100%",
    displayInput: true,
    fgColor: color,
    readOnly: true,
    draw: function() {
      $(this.i).val(this.cv.toFixed(1) + 'ms').css({
        'font-size': '1em',
        'color': 'black'
      });
    }
  });

  // for testing
  let value = 12.3;
  $('.dial').val(value).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" integrity="sha512-NhRZzPdzMOMf005Xmd4JonwPftz4Pe99mRVcFeRDcdCtfjv46zPIi/7ZKScbpHD/V0HB1Eb+ZWigMqw94VUVaw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<input type="text" class="dial" />

Also note that I adjusted the font size of the output so that it fits within the control.

Disable rounding in jQuery knob library

1 Answers1