Значение в ручке jquery не отображается

Я использую jquery-ручку в моем проекте, чтобы установить значение некоторого параметра. Тем не менее, я не могу видеть входное значение в центре ручки jquery. Я попробовал это в jsfiddle, и это работает, но точно такая же вещь не работает, если я использую ее в своем коде. Я не уверен, где я ошибаюсь? Может кто-нибудь угодить совету?

jsFiddle ссылка: http://jsfiddle.net/pljsf/RJY3N/

HTML:

<script src='https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js'></script>

<input type="text" value="55" class="dial">

JavaScript ниже:

$('document').ready(function() {

var dialColor = 'blue';  
var dialValue = $('.dial').val() ;

$(".dial").knob({
            'width':"200",
            'height':"200",
            'min' : "50",
            'max' : "110",
            'thickness':.3,
            'fgColor':dialColor,
            'tickColorizeValues': true,
            'dynamicDraw': true,
            'displayInput': true,
            "skin":"tron",
            'inputColor' : "#ff0000",  
            //'change' : function(dialValue) {  $('.dial').val(dialValue);  }            
            });
  $('.dial').val(dialValue).trigger('change');

});                                                                                          

(Ни один из решений, которые я искал, работал для меня. :()

благодаря