CODEWITHSUNDEEP
jqueryflot
user1469174
user1469174

Reputation: 75

Show actual numbers on bars when X axis is of percentage values (Flot bar charts)

Is it possible to have the axis show % values from serioes data and yet the inside of the bars show as actual values in Flot horizontal bar charts

Upvotes: 1

Views: 1208

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206048


I created a small nice plugin:

jsBin demo

jQuery bars plugin

(Gold is the element's BG color, while jQuery animates the same element's BG image (grad.azure one))

<div class="bar">66%</div>
<div class="bar bar5">4.5</div>

basic CSS:

.bar{
  width:300px;
  height:20px;
  background:#444 url(barBG.jpg) 0px 0px no-repeat;
  color:#fff;
}

Small tip: make sure your BG image's width is at least wide as the element desired width, so e.g. 0% will be fully covered.

jQuery plugin:

(function($){
  $.fn.bars = function( opts ) {  
    var set = $.extend( {
      'max': 100
    }, opts );
    return this.each(function(){ 
      var $this = $(this);
      var barW = $this.width();
      var val = parseFloat( $this.text().replace(',','.') );
      var ratio = ( val/set.max*barW );          
      $this.stop().animate({backgroundPosition: ratio+'px'},600);             
    });
  };
})(jQuery);

$('.bar').bars(); // default rates = 100
$('.bar5').bars({max:5});

Upvotes: 1

Related Questions