percentBar

Display percentage value as a bar

This data rendering helper method will convert percentage values into a bar. Values can either have the % sign or not and decimals get rounded to the given value. The percentage will have a max value of 100%.

This function should be used with the columns.render configuration option of DataTables.

v1.1 Changelog - Added a seventh border type parameter. - All parameters are now optional. - Improved styling. - Bug fix: Text is always centered now.

It accepts seven parameters:

  1. string square as default or round for a rounded bar.
  2. string A hex color for the text.
  3. string A hex color for the border.
  4. string A hex color for the bar.
  5. string A hex color for the background.
  6. integer A number used to round the value.
  7. string A border style, default=ridge (solid, outset, groove, ridge)

DEMO : http://codepen.io/RedJokingInn/pen/jrkZQN

Plug-in code

jQuery.fn.dataTable.render.percentBar = function(pShape, cText, cBorder, cBar, cBack, vRound, bType) {
  pShape = pShape || 'square';
  cText = cText || '#000';
  cBorder = cBorder || '#BCBCBC';
  cBar = cBar || '#5FD868';
  cBack = cBack || '#E6E6E6';
  vRound = vRound || 0;
  bType = bType || 'ridge';
  //Bar templates
  var styleRule1 = 'max-width:100px;height:12px;margin:0 auto;';
  var styleRule2 = 'border:2px '+bType+' '+cBorder+';line-height:12px;font-size:14px;color:'+cText+';background:'+cBack+';position:relative;';
  var styleRule3 = 'height:12px;line-height:12px;text-align:center;background-color:'+cBar+';padding:auto 6px;';
  //Square is default, make template round if pShape == round
  if(pShape=='round'){
    styleRule2 += 'border-radius:5px;';
    styleRule3 += 'border-top-left-radius:4px;border-bottom-left-radius:4px;';
  }

  return function(d, type, row) {
    //Remove % if found in the value
    //Round to the given parameter vRound
    s = parseFloat(d.toString().replace(/\s%|%/g,'')).toFixed(vRound);
    //Not allowed to go over 100%
    if(s>100){s=100}
    
    // Order, search and type gets numbers
    if (type !== 'display') {
      return s;
    }
    if (typeof d !== 'number' && typeof d !== 'string') {
      return d;
    }
    
    //Return the code for the bar
    return '<div style="'+styleRule1+'"><div style="'+styleRule2+'"><div style="'+styleRule3+'width:'+s+ '%;"></div><div style="width:100%;text-align:center;position:absolute;left:0;top:0;">'+s+'%</div></div></div>';
  };
};

CDN

This plug-in is available on the DataTables CDN:

JS

Note that if you are using multiple plug-ins, it is beneficial in terms of performance to combine the plug-ins into a single file and host it on your own server, rather than making multiple requests to the DataTables CDN.

Version control

If you have any ideas for how this plug-in can be improved, or spot anything that is in error, it is available on GitHub and pull requests are very welcome!

Examples

// Display rounded bars with white text, medium blue border, light blue bar, dark blue background, rounded to one decimal.
  $('#example').DataTable( {
    columnDefs: [ {
      targets: 4,
      render: $.fn.dataTable.render.percentBar( 'round','#FFF', '#269ABC', '#31B0D5', '#286090', 1, 'groove' )
    } ]
  } );
// All default values used. Square bars with black text, gray ridged border, light green bar, light gray background, rounded to integer.
  $('#example').DataTable( {
    columnDefs: [ {
      targets: 2,
      render: $.fn.dataTable.render.percentBar()
    } ]
  } );