Demo

README.md

@@ -381,7 +381,14 @@ The default object holds only one milestone and looks like this:
 
 #### avgActive
 
-Enable or disable the average amount calculation of grouped elements
+Enable or disable the average amount calculation of grouped elements. 
+
+In order for the average calculator to work, you have to provide `data-avgClass` attribute to every element you want to be calculated in a group.
+
+For example, you might have 10 elements but you want to devide them into two smaller groups. You can give `data-avgClass="groupOne"` to the first 5 elements and `data-avgClass="groupTwo"` to the last 5 of them.
+
+> - Default: `false`
+> - Possible values: `[boolean]`: `true` / `false`
 
 #### limLabel
 

barIndicator/css/bi-style.css

@@ -159,6 +159,11 @@
 .bi-wrp.bi-default-theme.bi-cRange-optimal .bi-barInner { background-color:rgb(92, 184, 92) }
 .bi-wrp.bi-default-theme.bi-cRange-alert .bi-barInner { background-color:rgb(217, 170, 79) }
 .bi-wrp.bi-default-theme.bi-cRange-critical .bi-barInner { background-color:rgb(217, 83, 79) }
+
+/* (Default) Bar color according to average */
+.bi-wrp.bi-default-theme.bi-avgBelow .bi-barInner { background-color:rgb(92, 184, 92) }
+.bi-wrp.bi-default-theme.bi-avgAbove .bi-barInner { background-color:rgb(217, 83, 79) }
+
 /* (Default) Milestones */
 .bi-wrp.bi-default-theme .bi-milestone {
 	background-color:transparent;

barIndicator/jquery-barIndicator.js

@@ -370,7 +370,6 @@
 				var tm = opt.timeOut;
 				var bar = that.$el.find('.bi-barInner');
 				var bl = par.bl;
-				console.log('_animateBar');
 				setTimeout(function() {
 					if (style == 'vertical') {
 						if (par.reanim == true) { 
@@ -682,6 +681,9 @@
 				var $el = par.$el;
 				var opt = that.opt;
 				var mlst = opt.milestones;
+				var avgColorIndicator = opt.avgColorIndicator;
+				var avgColorBelowAvg = opt.avgColorBelowAvg;
+				var avgColorAboveAvg = opt.avgColorAboveAvg;
 				var avgAttr = $el.attr('data-biAvg');
 				if (avgAttr && avgAttr.length > 0) {
 					var avg = parseFloat(avgAttr);
@@ -698,6 +700,23 @@
 						}
 					};
 					var mlstObj = $.extend({}, mlst, avgObj);
+					if (avgColorIndicator == true) {
+						var innerBar = $el.find('.bi-barInner');
+						var lbNum = $el.attr('data-lbnum');						
+						if (parseFloat(lbNum) > avg) {
+							$el.addClass('bi-avgAbove');
+							if (avgColorAboveAvg != false) {
+								var colAbove = Plugin.prototype._getColorValue.apply(this, [avgColorAboveAvg]);
+								innerBar.css({'background-color':colAbove});
+							}
+						} else {
+							$el.addClass('bi-avgBelow');
+							if (avgColorBelowAvg != false) {
+								var colBelow = Plugin.prototype._getColorValue.apply(this, [avgColorBelowAvg]);
+								innerBar.css({'background-color':colBelow});
+							}
+						}
+					}
 				} else {
 					var mlstObj = mlst;
 				}				
@@ -716,7 +735,6 @@
 		getPluginData: function() {			
 			var $el = this.$el;
 			var pluginData = $.data($el,'storedAttr');
-			console.log(pluginData);
 			return pluginData;
 		},
 
@@ -894,7 +912,9 @@
 			}
 		},
 		avgActive: false,
-		avgGroupClass: '',
+		avgColorIndicator: false,	//Readme
+		avgColorBelowAvg: false,
+		avgColorAboveAvg: false,
 		avgMlId: false,
 		avgMlClass: 'bi-average-mlst',
 		avgMlDim: 'inherit',

css/style.css

@@ -155,6 +155,7 @@ h3.sectionHeader {
 	background-color:#f4f4f4;
 	margin-bottom:20px;
 	font-weight:100;
+	line-height: 1.7;
 }
 .secInner-btn button {
 	border:none;

demo.html

@@ -391,13 +391,18 @@ <h3 class="sectionHeader">Average and min/max amounts<br /> <code>avgActive</cod
 					<code>
 						var opt = {<br />
 						&nbsp;avgActive: true,<br />
+						&nbsp;avgColorIndicator: true,<br />
 						&nbsp;lbDecimals: 2,<br />						
 						&nbsp;horTitle: 'bi-title-id',<br />
 						&nbsp;milestones: false<br />
 						};<br />
 						$('#bar').barIndicator(opt);
 					</code>
 				</div>
+				<div class="secInner-comments marginTop-md">
+					If you set <code>avgColorIndicator</code> to <code>true</code>, every bar that is above the average will be red and every bar that is below the average will get green.<br />
+					You can change those colours either in <code>bi-style.css</code> or by giving the <code>avgColorBelowAvg</code> and <code>avgColorAboveAvg</code> options, a valid colour value.
+				</div>
 			</div>
 		</div>
 

scripts/scripts.js

@@ -125,6 +125,7 @@ $(document).ready(function() {
 	//#17
 	var opt14 = {
 		avgActive: true,
+		avgColorIndicator: true,
 		lbDecimals: 2,
 		horTitle: 'bi-title-id',
 		milestones: false