jquery knob not updating via webbsockets

Question

I am getting the knob value via websockets and am able to display the value on the html page via document.elementId.. However I then try to update the knob based on this value and it does not occur

    <table id="speedTable">
        <tr>
            <td>revolutions</td></tr>
            <tr><td id="revolutions"></td>

        </tr>
    </table>

    <input type="text" class="dial" id="revdial" value="0" data-width="120" data-thickness="0.4" >

</div>


$(document).ready(function() {

   $('.dial').knob({
        'min': 0,
            'max': 100,
            'step': 1,
            'readOnly': false,
            'linecap': 'round',
            'displayInput': true,
        'displayPrevious': false,
            'angleOffset': -125,
            'angleArc': 250
    });

    $('#revolutions).trigger('configure', {
        'draw': function (v) {
            v=parseInt(document.getElementById('revolutions').value);

            if (v > 2050 ) {
                this.o.fgColor='red';
                $("#revdial").css("color", "red");

            }
            if (v <= 2030 ) {
                this.o.fgColor='#87CEEB';
                $("#revdial").css("color", "#87CEEB");
                           }
            if (v > 2000  && v<=2030) {
                this.o.fgColor='#87CEEB';
                $("#revdial").css("color", "#87CEEB");

            }
        },
        'format': function (v) {
            return v + ' %';
        }
    });
    $('#revdial').trigger('change');
});

Please help. thank you

Answer 1

As per your comments i have prepared a demo similar to your requirement based on jQuery roundSlider plugin. Please check the below demo, it can be further customizable based on your requirement.

DEMO

For more details check the demos and documentation page.