jQuery Bar Indicator Examples
A jQuery plugin to visualize numeric data
This is a demo page that shows how you can use barIndicator plugin.
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
Also, set a minimum and maximum limit.
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
(For more details, check the README file)
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-avgClassattribute 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
avgActiveoption to set average activation to
true
Average and min/max amounts
avgActive
+ horTitle
Set
20.3
9.2
29.4
5.9
6.8
16.4
12
avgActive
to true
and calculate and display the average amount of the defined group.
jQuery
var opt = {
avgActive: true,
avgColorIndicator: true,
lbDecimals: 2,
horTitle: 'bi-title-id',
milestones: false
};
$('#bar').barIndicator(opt);
If you set
You can change those colours either in
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
(check the README file for more information)
35
In order to reinitialize the plugin on
#initBtn
click, you have to set forceAnim
option to true
(check the README file for more information)
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
(check the README file for more information)
35
getPluginData
getter and get the barLength
property.(check the README file for more information)
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
As soon as the animation has stoped, the two other buttons will get enabled.
jQuery
var bar = $('#bar');
$('#initPluginEventBtn').on('click', function() {
$(document).on('bi.innerContentAppended', function() {
//Call any function on event occurrence
});
});