/**
* jqBarGraph - jQuery plugin
* @version: 1.1 (2011/04/03)
* @requires jQuery v1.2.2 or later
* @author Ivan Lazarevic
* Examples and documentation at: http://www.workshop.rs/jqbargraph/
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* @param data: arrayOfData // array of data for your graph
* @param title: false // title of your graph, accept HTML
* @param barSpace: 10 // this is default space between bars in pixels
* @param width: 400 // default width of your graph ghhjgjhg
* @param height: 200 //default height of your graph
* @param color: '#000000' // if you don't send colors for your data this will be default bars color
* @param colors: false // array of colors that will be used for your bars and legends
* @param lbl: '' // if there is no label in your array
* @param sort: false // sort your data before displaying graph, you can sort as 'asc' or 'desc'
* @param position: 'bottom' // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type
* @param prefix: '' // text that will be shown before every label
* @param postfix: '' // text that will be shown after every label
* @param animate: true // if you don't need animated appereance change to false
* @param speed: 2 // speed of animation in seconds
* @param legendWidth: 100 // width of your legend box
* @param legend: false // if you want legend change to true
* @param legends: false // array for legend. for simple graph type legend will be extracted from labels if you don't set this
* @param type: false // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type
* @param showValues: true // you can use this for multi and stacked type and it will show values of every bar part
* @param showValuesColor: '#fff' // color of font for values
* @example $('#divForGraph').jqBarGraph({ data: arrayOfData });
**/
(function($) {
var opts = new Array;
var level = new Array;
$.fn.jqBarGraph = $.fn.jqbargraph = function(options){
init = function(el){
opts[el.id] = $.extend({}, $.fn.jqBarGraph.defaults, options);
$(el).css({ 'width': opts[el.id].width, 'height': opts[el.id].height, 'position':'relative', 'text-align':'center' });
doGraph(el);
};
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
// sum of array elements
sum = function(ar){
total = 0;
for(val in ar){
total += ar[val];
}
return total.toFixed(0);
};
// count max value of array
max = function(ar){
maxvalue = 0;
for(var val in ar){
value = ar[val][0];
if(value instanceof Array) value = sum(value);
if (parseFloat(value) > parseFloat(maxvalue)) maxvalue=value;
}
return maxvalue;
};
// max value of multi array
maxMulti = function(ar){
maxvalue = 0;
maxvalue2 = 0;
for(var val in ar){
ar2 = ar[val][0];
for(var val2 in ar2){
if(ar2[val2]>maxvalue2) maxvalue2 = ar2[val2];
}
if (maxvalue2>maxvalue) maxvalue=maxvalue2;
}
return maxvalue;
};
doGraph = function(el){
arr = opts[el.id];
data = arr.data;
//check if array is bad or empty
if(data == undefined) {
$(el).html('There is not enough data for graph');
return;
}
//sorting ascending or descending
if(arr.sort == 'asc') data.sort(sortNumberAsc);
if(arr.sort == 'desc') data.sort(sortNumberDesc);
legend = '';
prefix = arr.prefix;
postfix = arr.postfix;
space = arr.barSpace; //space between bars
legendWidth = arr.legend ? arr.legendWidth : 0; //width of legend box
fieldWidth = ($(el).width()-legendWidth)/data.length; //width of bar
totalHeight = $(el).height(); //total height of graph box
var leg = new Array(); //legends array
//max value in data, I use this to calculate height of bar
max = max(data);
colPosition = 0; // for printing colors on simple bar graph
for(var val in data){
valueData = data[val][0];
if (valueData instanceof Array)
value = sum(valueData);
else
value = valueData;
lbl = data[val][1];
color = data[val][2];
unique = val+el.id; //unique identifier
if (color == undefined && arr.colors == false)
color = arr.color;
if (arr.colors && !color){
colorsCounter = arr.colors.length;
if (colorsCounter == colPosition) colPosition = 0;
color = arr.colors[colPosition];
colPosition++;
}
var xtraClasses = '';
if (lbl === '5.25%' || lbl === '5.0%' || lbl === '3.25%') {
xtraClasses = 'd-none d-lg-block ';
}
if(arr.type == 'multi') color = 'none';
if (lbl == undefined) lbl = arr.lbl;
out = "";
out += "
"+prefix+numberWithCommas(value)+postfix+"
";
out += "
";
// if there is no legend or exist legends display lbl at the bottom
if(!arr.legend || arr.legends)
out += "
"+lbl+"
";
out += "
Principal: $' + numberWithCommas(valueData[0]) + '
';
popContent = popContent + 'Interest: $' + numberWithCommas(valueData[1]) + '
';
popContent = popContent + 'Taxes + Insurance: $' + numberWithCommas(valueData[2]) + '
';
popContent = popContent + '
';
popContent = popContent + 'Total Payment: $' + numberWithCommas(value) + '
';
$('#graphField'+unique).popover({
placement : 'top',
trigger: 'manual',
html : true,
content: popContent
//content : '| Principal: | $' + numberWithCommas(valueData[0]) + ' |
| Interest: | $' + numberWithCommas(valueData[1]) + ' |
| Taxes + Insurance: | $' + numberWithCommas(valueData[2]) + ' |
| Total Payment: | $' + numberWithCommas(value) + ' |
'
}).on('mouseenter', function(e) {
$(this).popover('show');
}).on('mouseleave', function(e) {
$(this).popover('hide');
});
// multi array
if(valueData instanceof Array){
if(arr.type=="multi"){
maxe = maxMulti(data);
totalHeightBar = fieldHeight = totalHeight - $('.graphLabel'+el.id).height();
$('.graphValue'+el.id).remove();
} else {
maxe = max;
}
for (i in valueData){
heig = totalHeightBar*valueData[i]/maxe;
wid = parseInt((fieldWidth-space)/valueData.length);
sv = ''; // show values
fs = 0; // font size
if (arr.showValues){
sv = arr.prefix+valueData[i]+arr.postfix;
fs = 12; // font-size is 0 if showValues = false
}
if (heig > 0) {
o = ""+numberWithCommas(sv)+"
";
} else {
o = "";
}
$('#graphFieldBar'+unique).prepend(o);
}
}
if(arr.type=='multi')
$('.subBars'+el.id).css({ 'width': wid, 'position': 'absolute', 'bottom': 0 });
//position of bars
if(arr.position == 'bottom') $('.graphField'+el.id).css('bottom',0);
//creating legend array from lbl if there is no legends param
if(!arr.legends)
leg.push([ color, lbl, el.id, unique ]);
// animated apearing
if(arr.animate){
$('#graphFieldBar'+unique).css({ 'height' : 0 });
$('#graphFieldBar'+unique).animate({'height': fieldHeight},arr.speed*1000);
} else {
$('#graphFieldBar'+unique).css({'height': fieldHeight});
}
}
//creating legend array from legends param
for(var l in arr.legends){
leg.push([ arr.colors[l], arr.legends[l], el.id, l ]);
}
createLegend(leg); // create legend from array
//position of legend
if(arr.legend){
$(el).append("");
$('#legendHolder'+unique).css({ 'width': legendWidth, 'float': 'right', 'text-align' : 'left'});
$('#legendHolder'+unique).append(legend);
$('.legendBar'+el.id).css({ 'float':'left', 'margin': 3, 'height': 12, 'width': 20, 'font-size': 0});
}
//position of title
if(arr.title){
$(el).wrap("");
$('#graphHolder'+unique).prepend(arr.title).css({ 'width' : arr.width+'px', 'text-align' : 'center' });
}
};
//creating legend from array
createLegend = function(legendArr){
legend = '';
for(var val in legendArr){
legend += "";
legend += "
";
legend += "
"+legendArr[val][1]+"
";
legend += "