Home » Jquery » html – How to display value at knob chart using jquery?-Exceptionshub

html – How to display value at knob chart using jquery?-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:
  1. How to display value that get from some URL using jQuery Knob Chart in Bootstrap 4. I got “NaN” value. (Please refer code below)
  2. How to display “-” dash symbol if the data is null. (Please refer code below)

enter image description here

HTML

<input type="text" class="knob" id="avg_temperature" data-width="120" data-height="120" data-thickness="0.40" data-fgColor="#000000" readonly>

JS

$.ajax({
    url : XXX,
    type : 'POST',
    dataType : 'json',
    cache: false,
    async: false,
    dataSrc : 'data',
    contentType: false,
    processData: true,
    success: function(response){
        if (response.status == "Success"){            
            if (response.data[0]["avg_temperature"] == null){
                response.data[0]["avg_temperature"] = "-";
                $("#avg_temperature").text("-");
            }
            $("#avg_temperature").text(response.data[0]["avg_temperature"]);

            var colors = ['#11E117', '#FFC300', '#C00']

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

            $({animatedVal: 0}).animate({animatedVal: response},{
                duration: 3000,
                easing: "swing",
                async: false,
                step: function() {
                    var val = Math.ceil(this.animatedVal);
                    $("#avg_temperature").trigger('configure', {
                        'fgColor': colors[(val < 40) ? 0 : (val < 70) ? 1 : 2]
                    }).val(val).trigger("change");
                    var newVal = val + String.fromCharCode(176) + 'C'; $('#avg_temperature').val(newVal);
                }
            });
        }
    },
});
How to&Answer:

From the context of your code it seems that response is an object, and this is the cause of the issue as animate() expects the value you provide to be an integer.

From the context of your usage of response elsewhere in the code it appears that you need to access a specific temperature property from it, like this:

if (response.data[0]["avg_temperature"] == null)
    response.data[0]["avg_temperature"] = "-";

var colors = ['#11E117', '#FFC300', '#C00']

let $avgTemp = $("#avg_temperature").text(response.data[0]["avg_temperature"]);
$avgTemp.data('fgColor', '#11E117').knob();

$({
  animatedVal: 0
}).animate({
  animatedVal: parseInt(response.data[0]["avg_temperature"], 10) // update here
}, {
  duration: 3000,
  easing: "swing",
  step: function() {
    var val = Math.ceil(this.animatedVal);
    $avgTemp.trigger('configure', {
      'fgColor': colors[(val < 40) ? 0 : (val < 70) ? 1 : 2]
    }).val(val).trigger("change");

    var newVal = val + String.fromCharCode(176) + 'C';
    $avgTemp.val(newVal);
  }
});

Also note the removal of async: false. It’s bad practice, and you don’t need it here anyway