jQuery Knob won't display correctly

Question

All I get when I use this below is a text box with a number in it..... What did I do wrong ? Aren't I supposed to get the circular bars around it? I've tried every browser none works.

All I get is shown in this picture https://i.stack.imgur.com/Pr5kI.jpg

I have them included.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.knob.js"></script>



    <input type="text" value="75" class="dial">
    <script>
    $('.dial')
    .trigger(
        'configure',
        {
        "min":10,
        "max":40,
        "fgColor":"#FF0000",
        "skin":"tron",
        "cursor":true
        }
    );
</script>

Answer 1

It appears you require the script in the example code in addition to the script to dynamically configure the knob.

$(".dial").knob({
    'change' : function (v) { console.log(v); }
});

$('.dial').trigger(
    'configure',
    {
        "min":10,
        "max":40,
        "fgColor":"#FF0000",
        "skin":"tron",
        "cursor":true,
    }
);

See fiddle: http://jsfiddle.net/v1gu9cLt/