6

I'm using JQuery Knob to make some cool graphs and it's working perfectly. But I have one problem: I want to make the display number between the graph have a '%' symbol concatenated. but I just cant seem to make it work. Modifying the input through jquery wont do it, and I've tried reading into the code of the library but with no luck. Has any one else had this problem before?

Guj Mil
  • 333
  • 4
  • 16
  • 1
    Could you show what you've tried? It will benefit anyone trying to help you. – Erik Sep 24 '12 at 04:52
  • Changing with JQuery the value of the input I used for the graph after it has been created, adding a '%' at the end, but that didnt do it. Trying to change the value manually using firebug to test, but that also didnt do. I opened the knob source code, but they work with a lot of html5 there which I lack knowledge, tried to add '%' in some values without success... – Guj Mil Sep 24 '12 at 05:18

3 Answers3

30

If you take a quick look at the github repo you'll see that there's a draw hook that's called everytime the canvas is drawn. If you implement that hook you should be able to add whatever you wish to the input. Here's a short example of the functionality you're looking for (to try it: http://jsfiddle.net/eAQA2/ ) and for future reference:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<script>
$(function() {
    $(".dial").knob({
      'draw' : function () { 
        $(this.i).val(this.cv + '%')
      }
    })
})
</script>
</head>
<body>
<input type="text" class="dial" data-min="0" data-max="100">
</body>
</html>​
Erik
  • 2,276
  • 1
  • 20
  • 20
6

As of version 1.2.7 there is now a format hook for performing tasks like this:

$(".dial").knob({
  'format' : function (value) {
     return value + '%';
  }
});
Ben Holmes
  • 451
  • 5
  • 4
2

I managed to achieve this with animation too:

My solutions does this by adding the percentage each time the value gets increased:

$(function() {
      $('.dial_overall').each(function () {

           var $this = $(this);
           var myVal = $this.attr("value");

           $this.knob({
           });

           $({
               value: 0 
           }).animate({

               value: myVal
           }, {
               duration: 1600,
               easing: 'swing',
               step: function () {
                   $this.val(Math.ceil(this.value)).trigger('change');
                     $('.dial_overall').val($('.dial_overall').val() + '%');
               }

           })   
       });

    });
mgilberties
  • 434
  • 4
  • 13