Bar Visualization for Tables

This jQuery plugin creates a simple horizontal bar. DOWNLOAD

74,-100,100

JS Fiddle example

The element that will contain the bar should have the following values in it:

[actual value],[min value],[max value].

For example, if you had a div container with 50,0,100, it would mean that the bar should be at 50, the min value is 0 and the max value is 100.

The actual value is required. However, you can set the min and max values in the options.

When to use it

I primarily like to use it in tabular data layouts for single value comparisons of a particular column like below

Product Name YTD Sales
Wheel Type A $120,000 120,0,200
Wheel Type B $110,000 110,0,200
Wheel Type C $60,000 60,0,200

By adding this visualization, I can quickly see the distribution of sales.

Example:

The Javascript

<script type=”text/javascript” src=”js/jquery-1.11.1.min.js”></script>

<script type=”text/javascript” src=”js/dv-bar.js”></script>

<script type=”text/javascript”>

jQuery(document).ready(function ()

{

jQuery(‘#dv-container’).dvBar({ });

});

</script>

The HTML Markup

<div id=”bar-container”>23,-100,100</div>

 

The Result

23,-100,100

Documentation

Options

Option Type Default Value Description
i_barContainerHeight integer 20 The height of the container of the bar in pixels
i_barContainerWidth integer 100 The width of the container of the bar in pixels
i_barHeight integer 12 The height of the bar in pixels
f_minValue float 0 The min value of the range the actual value can fall within. This will be replaced by the value in the HTML markup (the second number) if it exists.
f_maxValue float 100 The max value of the range the actual value can fall within. This will be replaced by the value in the HTML markup (the third number) if it exists.
s_barColor string ‘#808080’ The color of the bar as a hex value
s_barNegativeColor string ‘#FF0000’ The color of the bar if it is less than zero as a hex value
s_zeroLineColor string ‘#000000’ The color of the line that indicates the zero line

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *