analytics/webcontent/ps/cogadmin/js/barchart.js

//    Licensed Materials - Property of IBM
//
//    IBM Cognos Products: cogadmin
//
//    (C) Copyright IBM Corp. 2005, 2010
//
//    US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
//
//
// Copyright (C) 2008 Cognos ULC, an IBM Company. All rights reserved.
// Cognos (R) is a trademark of Cognos ULC, (formerly Cognos Incorporated).

function bar_chart(chartdef) {
	this.chartdef = chartdef;
	this.chart = null;
	
	if (chartdef.columns != '') {
		this.columnCount = chartdef.columns;
	}
	else {
		// default to 3 columns which is what's shown in liz.
		this.columnCount = 3;
	}
	
	this.maxValue = 0;
	this.total = 0;
	for (var i=0; i < this.chartdef.rows.length; i++) {
		if (parseInt(this.chartdef.rows[i].value) > this.maxValue) {
			this.maxValue = parseInt(this.chartdef.rows[i].value);
		}
		
		this.total += new Number(this.chartdef.rows[i].value);
	}

	// Always want ticks to be a multiple of 5
	this.axisMultiplier = 5;

	// All of this to make sure the maximum y value is divisible by axisMultiplier (5) and columnCount. 
	// Make sure we get astheticly pleasing numbers for the ticks.
	var axisRangeMultiplier = this.columnCount * this.axisMultiplier;
	var maxAxisValue = Math.ceil(this.maxValue / axisRangeMultiplier) * axisRangeMultiplier;

	// Each tick will be a multiple of this value
	this.axisTickInterval = Math.ceil(maxAxisValue / this.columnCount);
}

bar_chart.prototype = {

	buildChart: function() {

		var table = document.createElement('table');
		table.cellSpacing="0";
		table.cellPadding="0";
		table.border="0";
		if (this.chartdef.width) {
			table.style.width = this.chartdef.width;
		}
		
		tbody = document.createElement('tbody');
		table.appendChild(tbody);
		

		// title
		if (this.chartdef.title != '') {
			var tr = document.createElement('tr');

			// empty td for the labels
			tr.appendChild(document.createElement('td'));
			
			var td = document.createElement('td');
			td.className = 'tableText';

			td.setAttribute("colSpan",this.columnCount);
			td.style.textAlign = 'center';
			td.style.paddingBottom = '15px';
			td.style.fontWeight = 'bold';
			td.style.width = '100%';
			td.appendChild(document.createTextNode(this.chartdef.title + ' (' + this.total + ')'));
			tr.appendChild(td);
			tbody.appendChild(tr);
		}

		var columnWidth = Math.ceil(80 / this.columnCount);

		// build up the rows
		for (var row=0; row < this.chartdef.rows.length; row++) {
			var paddingTop = '2px';
			var paddingBottom = '2px';		
			
			// label column		
			var tr = document.createElement('tr');
			var td = tr.appendChild( document.createElement('td') );
			td.width = "20%";
			td.className = "tableText";
			td.style.textAlign = 'right';
			td.style.paddingRight = '5px';
			td.style.borderRight = '1px solid #000000';
			td.style.paddingTop = paddingTop;
			td.style.paddingBottom = paddingBottom;				
			td.appendChild(document.createTextNode(this.chartdef.rows[row].label));
					
			for (var column=0; column < this.columnCount; column++) {
				var td = tr.appendChild( document.createElement('td') );
				td.setAttribute("id",this.chartdef.unique_id + row + column);
				td.setAttribute("nowrap","nowrap");				
				td.style.width = columnWidth + "%";
				td.style.emptyCells = 'show';
				td.style.height = '21px';
				td.style.borderRight = '1px';
				td.style.borderColor = '#999999';
				td.style.borderRightStyle = 'dotted';
				td.style.paddingTop = paddingTop;
				td.style.paddingBottom = paddingBottom;	
				td.style.verticalAlign = 'top';
				
				// if we're on the last row, need some extra styles
				if ((row + 1) == this.chartdef.rows.length) {
					td.style.borderBottom = '1px solid #000000';
				}

				if (column == 0) {
					var div = td.appendChild(document.createElement('div'))
					div.setAttribute("nowrap","nowrap");	
					div.id = this.chartdef.unique_id + '_div_' + row;
					div.style.position = 'absolute';
					div.style.width = '500px';
					div.style.height = '17px';

					var table_bar = div.appendChild(document.createElement('table'));
					table_bar.cellSpacing="0";
					table_bar.cellPadding="0";
					table_bar.style.position = 'relative';
					table_bar.border="0";
			
					var tbody_bar = table_bar.appendChild(document.createElement('tbody'));
			
					var tr_bar = tbody_bar.appendChild(document.createElement('tr'));
					var td_bar = tr_bar.appendChild(document.createElement('td'));
					td_bar.id = this.chartdef.unique_id + '_td_' + row;
					td_bar.style.height = '17px';
					td_bar.style.backgroundImage = 'url(' + this.chartdef.bar_image + ')';
						
					var td_bar_value = tr_bar.appendChild(document.createElement('td'));
					if (this.chartdef.rows[row].value != '') {
						td_bar_value.appendChild(document.createTextNode(this.chartdef.rows[row].value));
					}
					else {
						td_bar_value.appendChild(document.createTextNode('0'));						
					}
					td_bar_value.style.fontFamily = 'tahoma';
					td_bar_value.style.fontWeight = 'bold';
					td_bar_value.style.color = '#0000CC';
					td_bar_value.style.textAlign = 'left';
					td_bar_value.style.paddingLeft = '5px';
				}
				td.appendChild(document.createTextNode(' '));
				tr.appendChild(td);
			}
			
			tbody.appendChild(tr);
		}


		// row to show the x axis values
		var tr = document.createElement('tr');
							
		for (var column=-1; column < this.columnCount; column++) {
			var td = tr.appendChild( document.createElement('td') );
			td.setAttribute("nowrap","nowrap");				
			td.className = 'dialogHeaderText';
			td.style.textAlign = 'right';
			
			var span = td.appendChild( document.createElement('span') );
			span.className = 'inactiveText';
			
			// when all the bars are zero, just put 1,2,3,... for the y axis values
			if (this.axisTickInterval == 0 ) {
				span.appendChild(document.createTextNode((column+1) * this.axisMultiplier));
			}
			else {				
				span.appendChild(document.createTextNode(this.axisTickInterval * (column + 1)));
			}
			 
			tr.appendChild(td);
		}
		
		tbody.appendChild(tr);
			
		$(this.chartdef.div_id).appendChild(table);
		this.chart = $(this.chartdef.div_id);
	},
	
	resizeBars: function() {
		// when a fragment that already had a graph gets refreshed, the onrezie even fires before we've
		// rebuilt the graph. Catch it here before we do any farther.
		if (!$(this.chartdef.unique_id + '_div_0')) {
			return;
		}
		var totalWidth = 0;
		var xAxisLimit = this.axisTickInterval * this.columnCount;
		
		// if xAxisLimit is 0 then return. This can happen if all the bars have a value of 0
		if (xAxisLimit == 0) {
			return;
		}
		
		// calculate the total width of the columns
		for (var column=0; column < this.columnCount; column++) {
			totalWidth += xWidth($(this.chartdef.unique_id + '0' + column));
		}

		// only resize the bars if we have a width. If the width is zero then it
		// means our div is hidden so there's no reason to resize the bars. Also
		// resizing the bars when we're hidden was causing a firefox only bug
		if (totalWidth > 0) {
			// resize the bars
			for (var row=0; row < this.chartdef.rows.length; row++) {
				// make sure the absolute div is wide enough for the table inside it (IE fix)
				$(this.chartdef.unique_id + '_div_' + row).style.width = totalWidth;
				
				var rowValue = this.chartdef.rows[row].value;
				
				var barDiv = $(this.chartdef.unique_id + '_td_' + row);
				var barLength = new Number( (rowValue * totalWidth ) / xAxisLimit).toFixed();
	
				barDiv.style.width = barLength + 'px';
			} 
		}
	},
	
	show: function() {
		if (!this.chart) {
			this.buildChart();
		}
		
		$(this.chartdef.div_id).style.display = 'block';
		
		this.resizeBars();
	}
}