Top

Bar Indicator

A jQuery plugin to visualize numeric data Fork on GitHub

This is a demo page that shows how you can use Bar Indicator plugin.

55

Contents-

Options

Methods + Getters

Events

In order to implement it in your site, just copy the barIndicator folder with all it's contents and make links to the bi-style.css and jquery-barIndicator.js files

Don't forget to include jQuery and easing before the plugin.

All you need is a simple html element like a span or a div

HTML <head>
 <link href="../barIndicator/css/bi-style.css" rel="stylesheet" />
 <script src="../jQuery.js"></script>
 <script src="../barIndicator/jquery-barIndicator.js"></script>
</head>
<body>
 ...
 <span id="bar">25</span>
 ...
</body>

And just initialize it!

jQuery <script>
 $('#bar').barIndicator();
</script>

Options

For more information about options, methods and events, check the README file.

Horizontal (Default)

25
jQuery $('#bar').barIndicator();

Vertical style

25
jQuery var opt = { style:'vertical' }; $('#bar').barIndicator(opt);

Bar height horBarHeight

25
jQuery var opt = { horBarHeight:30 }; $('#bar').barIndicator(opt);

Bar color foreColor

25
jQuery var opt = {
 foreColor:'#e25a48'
};
$('#bar').barIndicator(opt);

Bar holder color backColor

25
jQuery var opt = {
 foreColor:'#e25a48',
 backColor:'rgb(126,196,107)'
};
$('#bar').barIndicator(opt);

Label position horLabelPos

25 25 25
jQuery var opt = {
 horLabelPos:'topRight' //'left'/'right'
};
$('#bar').barIndicator(opt);

Title horTitle

25
jQuery var opt = {
 horTitle:'This is a sample title'
};
$('#bar').barIndicator(opt);

Bar color range colorRange

Set 'colorRange' option to true. The plugin holds it's default color limits.
25 55 95
jQuery var opt = {
 colorRange:true
};
$('#bar').barIndicator(opt);

Custom color range
colorRange + colorRangeLimits

Provide a custom object that holds your custom color limits.
15 35 45 80 95
jQuery var opt = {
 colorRange:true
 colorRangeLimits: {
  optimal: '0-20',
  newRangeOne: '21-40-#4aa64f',
  newRangeTwo: '41-60-green',
  newRangeThree: '61-90-rgb(241,144,40)',
  critical: '91-100'
 }
};
$('#bar').barIndicator(opt);

Absolute numbers
numType + numMin + numMax

Set the type of number to 'absolute'.
Also, set a minimum and maximum limit.
150
HTML <span id="bar">150</span>
jQuery var opt = {
 numType:'absolute',
 numMin:0,
 numMax:250
};
$('#bar').barIndicator(opt);

Min/max numbers (labels)
numMinLabel + numMaxLabel

Enable the minimum / maximum number indicator labels.
25
jQuery var opt = {
 numMinLabel:true,
 numMaxLabel:true
};
$('#bar').barIndicator(opt);
You can customize the appearance of the labels, either by editing the bi-style.css file, or by passing specific options like numMinLbLeft, numMaxLbRight etc
(For more details, check the README file)

Milestones milestones

Provide an object that holds your custom milestone points.
25
jQuery var opt = {
 milestones: {
  1: {
   mlPos: 20,
   mlId: false,
   mlClass: 'bi-custom',
   mlDim: '200%',
   mlLabel: 'Milestone one',
   mlLabelVis: 'hover',
   mlHoverRange: 15,
   mlLineWidth: 1
  },
  2: {
   mlPos: 60,
   mlId: false,
   mlClass: 'bi-custom',
   mlDim: '200%',
   mlLabel: 'Milestone two',
   mlLabelVis: 'hover',
   mlHoverRange: 15,
   mlLineWidth: 1
  }
 }
};
$('#bar').barIndicator(opt);

Average calculation

Bar Indicator gives you the option to calculate and display the average amount of a group of numbers.

Assuming that you have a group of elements and each of them represents one of the seven continents of Earth. Let's say that you want to display the percent of landmass of each continent relatively to the total landmass.

You have to tell the plugin which of the provided elements are included in the average calculation. In order to do that, you have to set the 

data-avgClass
attribute and give a common value to those elements that belong to the same group.

HTML <span id="africa" class="contBar" data-avgClass="continent">20.3</span>
<span id="antarctica" class="contBar" data-avgClass="continent">9.2</span>
<span id="asia" class="contBar" data-avgClass="continent">29.4</span>
<span id="australia" class="contBar" data-avgClass="continent">5.9</span>
<span id="europe" class="contBar" data-avgClass="continent">6.8</span>
<span id="northAmerica" class="contBar" data-avgClass="continent">16.4</span>
<span id="southAmerica" class="contBar" data-avgClass="continent">12</span>

Use 

avgActive
option to set average activation to 
true

Average and min/max amounts
avgActive + horTitle

Set avgActive to true and calculate and display the average amount of the defined group.
20.3 9.2 29.4 5.9 6.8 16.4 12
jQuery var opt = {
 avgActive: true,
 avgColorIndicator: true,
 lbDecimals: 2,
 horTitle: 'bi-title-id',
 milestones: false
};
$('#bar').barIndicator(opt);
If you set avgColorIndicator to true, every bar that is above the average will be red and every bar that is below the average will get green.
You can change those colours either in bi-style.css or by giving the avgColorBelowAvg and avgColorAboveAvg options, a valid colour value.

Methods

Reanimate reanimateBar

Call this method if you want to execute the loading animation on demand.
85
jQuery var bar = $('#bar');
bar.barIndicator();
//Call the method on click $('#reanimateBtn').on('click', function() {
 bar.barIndicator('reanimateBar');
});

Load new data loadNewData

Call this method if you want to load new data on demand.
35
jQuery var bar = $('#bar');
bar.barIndicator();
//Call the method on click $('#reanimateBtn').on('click', function() {
 var newData = 85;
 bar.barIndicator('loadNewData', [newData]);
});

Destroy destroy

Call this method if you want to disable the plugin and remove all of it's data.
In order to reinitialize the plugin on #initBtn click, you have to set forceAnim option to true
(check the README file for more information)
35
jQuery var bar = $('#bar');
bar.barIndicator();
//Call the method on click
//Destroy
$('#destroyBtn').on('click', function() {
 bar.barIndicator('destroy');
});
//Reinitialize
$('#initBtn').on('click', function() {
 bar.barIndicator({ forceAnim:true });
});

Getters

Get plugin data getPluginData

Call the getPluginData getter and get the barLength property.
(check the README file for more information)
35
jQuery var bar = $('#bar');
bar.barIndicator();
//Call the getter and store the data in a new variable
var data = bar.barIndicator('getPluginData');
alert(data.barLength);

Events

Events

Click the 'Start' button and check the events triggered.
As soon as the animation has stoped, the two other buttons will get enabled.
35
    jQuery var bar = $('#bar');
    $('#initPluginEventBtn').on('click', function() {
     $(document).on('bi.innerContentAppended', function() {
      //Call any function on event occurrence  });
    });