Question

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

Answer 1

I created a small nice plugin:

jsBin demo

(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});