jQuery Plugin For Creating Excel-Like Data Bars - Databar

File Size: 13.5 KB
Views Total: 5307
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Creating Excel-Like Data Bars - Databar

Databar is a lite jQuery plugin that provides a simple way to represent data graphically inside the table cells, similar to the Microsoft Excel data bar.

How to use it:

1. Load the jQuery library and the jQuery databar plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.databar.js"></script>

2. Create a set of data in an Html table that will be formatted as data bars.

<table>
<thead>
<tr>
<th>Demo</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</tbody>
</table>

3. Call the plugin on the table and we're done.

$(function () {
$('table').databar();
});

Change log:

2014-11-03

  • fix float bug, add class name to ignore

This awesome jQuery plugin is developed by ts-3156. For more Advanced Usages, please check the demo page or visit the official website.