GIF89a;
Mini Shell
Mini Shell
/**
* Table Bar Chart jQuery plugin 1.0
*
* Copyright (c) 2014, AIWSolutions
* License: GPL2
* Project Website: http://wiki.aiwsolutions.net/Snld9
**/
jQuery.fn.tableBarChart = function(targetDiv, caption, reverseGroup) {
var source = $(this);
var target = $(targetDiv);
var maxValue = 0;
var minValue = Number.MAX_VALUE;
var yAxisMax = 0;
var yAxisMin = 0;
var groupTitles = [];
var legends = [];
var tableData = [];
function getHeaderNames(isColumn) {
var parentNode = isColumn ? 'thead' : 'tbody';
var names = [];
source.find(parentNode + ' th').each(function(index, element) {
// skip first cell
if (index > 0 || isColumn === undefined || !isColumn) {
names.push($(element).text());
}
});
return names;
}
function getDataByRow() {
var dataMatrix = [];
source.find('tbody tr').each(function(i, trElement) {
var rowValue = [];
$(trElement).find('td').each(function(j, tdElement) {
var intValue = parseInt($(tdElement).text());
if (intValue > maxValue) {
maxValue = intValue;
} else if (intValue < minValue) {
minValue = intValue;
}
rowValue.push(intValue);
});
dataMatrix.push(rowValue);
});
return dataMatrix;
}
function getDataByColumn() {
var dataMatrix = [];
var numCols = source.find('tbody tr:eq(0) td').size();
for (var i = 0; i < numCols; i++) {
var colValue = [];
source.find('tbody tr').each(function() {
var intValue = parseInt($($(this).find('td:eq(' + i + ')')[0]).text());
if (intValue > maxValue) {
maxValue = intValue;
} else if (intValue < minValue) {
minValue = intValue;
}
colValue.push(intValue);
});
dataMatrix.push(colValue);
}
return dataMatrix;
}
function getCaption() {
if (caption === undefined || caption.length === 0) {
caption = '';
source.find('caption').each(function() {
caption = $(this).text();
});
}
return caption;
}
function getAxisHTML(sourceArray, cssClass) {
var axis = $('<ul class="' + cssClass + '"></ul>');
$(sourceArray).each(function() {
axis.append('<li><span>' + this + '</span></li>');
});
return axis;
}
function getYAxisArray(stepCount) {
var maxDigitCount = String(maxValue).length;
var minDigitCount = String(minValue).length;
var base10 = Math.pow(10, maxDigitCount - 1);
yAxisMax = base10 * (Math.floor(maxValue / base10) + 1);
if (maxDigitCount === minDigitCount) {
yAxisMin = base10 * (Math.floor(minValue / base10));
}
var result = [];
var step = (yAxisMax - yAxisMin) / stepCount;
for (var i = stepCount; i >= 0; i--) {
var stepValue = yAxisMin + step * i;
if (stepValue % 1 !== 0) {
stepValue = parseFloat(Math.round(stepValue * 100) / 100).toFixed(2);
}
result.push(stepValue);
}
return result;
}
function animateBar(index) {
target.find('.bar.item-' + index).each(function() {
var bar = $(this);
bar.css('height', 0);
var value = bar.attr('value');
bar.animate({
'height': value
}, 800);
});
}
function getLegendHTML() {
var legendContainer = $('<ul class="legend"></ul>');
$(legends).each(function(index) {
var legendItem = $('<li><span class="icon item-' + index + '"></span>' +
this + '</li>');
legendItem.mouseenter(function() {
animateBar(index);
});
legendContainer.append(legendItem);
});
return legendContainer;
}
function getBarChartHTML() {
var barsContainer = $('<div class="bars"></div>');
$(tableData).each(function(i, columnGroup) {
var barGroup = $('<div class="bar-group"></div>');
$(columnGroup).each(function(j, cell) {
var bar = $('<div class="bar item-' + j + '" value="' +
Math.floor((cell - yAxisMin) / (yAxisMax - yAxisMin) * 100) + '%"><span>' +
cell + '</span></div>');
// CSS :hover won't work on IE
bar.hover(function() {
bar.find('span').css('display', 'block');
}, function() {
bar.find('span').css('display', 'none');
});
barGroup.append(bar);
});
barsContainer.append(barGroup);
});
return barsContainer;
}
function layout() {
var defaultMargin = 10;
var yAxisWidth = 50;
target.find('.y-axis').css('width', '100%');
target.find('.y-axis span').css('width', yAxisWidth).css('margin', '-' + defaultMargin + 'px 0 0 -' + (yAxisWidth + defaultMargin) + 'px');
var graphWidth = target.width() - (yAxisWidth + 2 * defaultMargin);
var graphHeight = target.height() - target.find('.caption').height() - target.find('.legend').height() - 3 * defaultMargin;
target.find('.graph').css('width', graphWidth).css('height', graphHeight);
var stepHeight = Math.floor((graphHeight - target.find('.x-axis').height() - 2 * defaultMargin) / (groupTitles.length + 1));
target.find('.y-axis li').css('height', stepHeight).css('width', '100%');
var barGroupHeight = (target.find('.y-axis li').height() + 1) * (groupTitles.length + 1);
target.find('.bars').css('height', barGroupHeight).css('width', '100%');
var barGroupWidth = graphWidth / groupTitles.length - 2 * defaultMargin;
target.find('.bar-group').css('width', barGroupWidth).css('margin', '0 ' + defaultMargin);
target.find('.x-axis li').css('width', barGroupWidth);
var barWidth = barGroupWidth / legends.length - 2;
target.find('.bar').css('width', barWidth);
for (var i = 0; i < legends.length; i++) {
target.find('.bar.item-' + i).css('left', i * (barWidth + 2));
animateBar(i);
}
}
function render() {
target.append('<div class="caption">' + getCaption() + '</div>');
var graphContainer = $('<div class="graph"></div>');
graphContainer.append(getAxisHTML(groupTitles, 'x-axis'));
graphContainer.append(getAxisHTML(getYAxisArray(groupTitles.length + 1), 'y-axis'));
graphContainer.append(getBarChartHTML());
target.append(graphContainer);
target.append(getLegendHTML());
layout();
}
function initialize() {
groupTitles = getHeaderNames(reverseGroup ? false : true);
legends = getHeaderNames(reverseGroup ? true : false);
tableData = reverseGroup ? getDataByRow() : getDataByColumn();
render();
}
initialize();
}
./BlackJoker Mini Shell 1.0