StackBars

Animated stacked bars percentage indicator jQuery plugin
jQuery Plugin for indicating percentage values with the option of clicking on each bar for selection purpose
build upon D3.js

jQuery initialization and customization

This plugin requires jQuery (>= 1.8.x) and D3.js (>= v5.4.0)
Font Awesome (4.4.x) is used for the handles inner icon symbols.

Minimal html configuration

<div id="indicator"></div>

Minimal CSS settings

text {
	fill: #777;
	font-family: Helvetica, Arial;
	font-size: 11px;
}
.stack:hover {
	cursor: pointer;
}

jQuery initialization and customization

This plugin requires jQuery (>= 1.8.x) and D3.js (>= v5.4.0)

$("#indicator").stackbars({
	data: [],
	height: 48,
	bottomMargin: 0,
	container: '#indicator',
	colorSetting: ["#33876b","#559559","#77a347","#98b236","#bac024","#dcce12"],
	stackMargin: 0,
	stackHeight: 6,
	textPositionEven: -4,
	textPositionOdd: -4,
	hoverButtonWidth: 200,
	stackMinWidth: 15,
	disableEvents: false,
	onSectionClick: function (obj) {
		console.log("Clicked Section Data",obj);
	},
	hoverText: function (obj) {
		return obj.value +" ("+obj.percent+"): " + obj.label;
	}
});

Options and parameters

Parameter	Type	Default	Description
container	string	#indicator	ID or class of HTML container element (div)
height	int	48	total height of SVG container
bottomMargin	int	0	bottom margin after the stack bar element
stackMargin	int	0	margin between each stack element
stackHeight	int	6	height of stack bar (small value for thin bar)
stackMinWidth	int	15	minimal width of stack bar to show percentage value above (hide text if bar is very small) this corresponds to the textsize text { font-size: 11px; }
textPositionEven	int	- 4	The percentage text value for each stack bar can be positioned above or under the bar. negative value for above positive value for under This value will change all even items.
textPositionOdd	int	- 4	The percentage text value for each stack bar can be positioned above or under the bar. negative value for above positive value for under This value will change all odd items.
hoverButtonWidth	int	200	minimal width of button element when mouse pointer hoovers over
colorSetting	array	["#33876b", "#559559", "#77a347", "#98b236", "#bac024", "#dcce12", "#cccccc", "#b2b2b2", "#9a9a9a", "#808080", "#4a4a4a", "#121212"]	array of color definitions (HEX values)
disableEvents	boolean	false	set to true if you do not wish to enable any mouse interaction (clicking) default: enabled events
data	array	[]	data array: [{"key": 0, label: "Element", "value": 1}] object properties: "key" (int): ID of current set "label" (string): label of current set "value" (int): value of current set

Events

Parameter	Description
onSectionClick	call back function for click event object keys: "key" (int): ID of clicked element "label" (string): label of clicked element "value" (int): value of clicked element "percent" (string): percentage value of clicked element "total" (int): total amount of all data
hoverText	call back function for custom hover text format expects string as return value object keys: "key" (int): ID of current element "label" (string): label of current element "value" (int): value of current element "percent" (string): percentage value of current element "total" (int): total amount of all data

Methods

Parameter	Description
update	update graph method name "update" expects second parameter "data" var data = []; $("#indicator").stackbars("update", data);

Demo

See working demo on developer.jpweiner.net.

Credits

Built on top of jQuery Boilerplate.

License

MIT License © Zeno Rocha