Overriding units on a jQuery Knob does not redraw correctly on page reload

Question

I have a readonly jQuery Knob. I have been able to add units to the numeric display (as per How to display units with Jquery Knob ), but the foreground (ie. graphical value indicator) of the dial is no longer displayed when the page is reloaded.

Here's my HTML:

<input class="knob" id="workload" data-angleoffset=-125 data-anglearc=250 value="{{ workload }}" >

( {{ workload }} is a floating point Django template value - it is being substituted correctly )

Inside my jQuery ready function, I have:

if (jQuery().knob && ! App.isIE8()) {

    // Workload Indicator
    $(".knob").knob({
        'dynamicDraw': true,
        'min': 0, 'max':100,
        'thickness': 0.2,
        'tickColorizeValues': true,
        'readOnly': true,
        'skin': 'tron',
        'fgColor': '#F00', 
        'inputColor':'#3D3D3D',
        'bgColor': '#3D3D3D',
        'width' : 150,
        'draw' : function () {
            $(this.i).val( parseInt(this.cv) + '%');
        }
    });
}

fgColor was originally set from the template value, but the above code with a hard-coded fgColor produces the same result.

Commenting out the draw callback works as expected: The knob is drawn complete with a numeric value in the middle and a red colored indicator on the outside arc. Uncommenting the draw fixes the numeric formatting (no decimal points + a percentage sign). The numeric formatting remains correct for initial display and on re-load. However the red arc only appears on the initial display - it disappears when the page is re-loaded!

So what is going on? Is draw over-riding jquery-knob's own canvas draw method? If so, how can I call the graphical draw part?

Answer 1

Here is the solution, sent to me by Sally Maughan (not of this parish):

$(".knob").each( function () {
     this.value = Math.round( this.getAttribute('value') );
    }).knob({

    'dynamicDraw': true,
    'min': 0, 'max':100,
    'thickness': 0.2,
    'tickColorizeValues': true,
    'readOnly': true,
    'skin': 'tron',
    'fgColor': wcol,
    'inputColor':'#3D3D3D',
    'bgColor': '#3D3D3D',
    'width' : 150,
    'draw' : function () {
        this.i.val( this.cv + '%');
    }
});

The above version uses a new value from the HTML with each reload. If you want to keep the same value through the reload, then Sally suggests replacing the this.value assignment with:

this.value = Math.round( this.value.replace('%','') );

Answer 2

I was able to use this:

$('.knob').val(0).trigger('change').trigger('draw');