How to display value at knob chart using jquery?

Question

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

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);
                }
            });
        }
    },
});

This seems to work in isolation: https://jsfiddle.net/RoryMcCrossan/qzfw36ct/1/. Can you please add a working example of the issue to the question so we can create an MCVE. Note that the AJAX section can be removed as it's not relevant to the problem. — Rory McCrossan, Feb 14 '20 at 11:12
I already provide the code at that link. for HTML and JS. please let me know if that is not sufficient. — mastersuse, Feb 14 '20 at 11:23
I created a variable `$("#avg_temperature").val = "90";` as the value. — mastersuse, Feb 14 '20 at 11:27
No, I asked what is the value of the `response` argument in your `$.ajax` call. You're using this in the `animate()` method. I'm assuming it's an object, not an integer, hence your mistake. From the context it looks like you should be using `...animate({ animatedVal: parseInt(response.data[0]["avg_temperature"], 10) })` — Rory McCrossan, Feb 14 '20 at 11:31
You are amazing! It works! Please put that solution as Answer so I can vote up. — mastersuse, Feb 14 '20 at 11:39

Rory McCrossan · Accepted Answer · 2020-02-14T11:44:02.997

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

Hi, just wanna know what are the function of integer "10" use for at the the row of the answer? — mastersuse, Feb 14 '20 at 12:12
It's the radix: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt#Syntax — Rory McCrossan, Feb 14 '20 at 12:15
Hi, could you help me on this problem? https://stackoverflow.com/questions/60236178/how-to-make-toggle-option-return-to-default-after-modal-event-close-happen — mastersuse, Feb 15 '20 at 13:14

How to display value at knob chart using jquery?

1 Answers1