supratims/bargraph.html

## bargraph.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
body {
	padding-top: 20px;
	padding-bottom: 60px;
	background: rgb(76, 77, 77);
}

.container {
	width: 800px;
	margin: 0px auto;
}

.chart {

}
.header {
    height: 50px;
    text-align: center;
    font-weight: bold;
    color: #fff
}

.bar {
	border: 0px solid lightgrey;
	float: left;
	margin:0px 10px;
}

.minwidth {
	min-width:80px;
}

.minheight {
	height:400px;
}
.halfheigt {

}
.half {
	width: 100%;
}

.tophalf {
	border-bottom: 0px solid lightgrey;
	position: relative;
	height: 180px;
}

.bottomhalf {

}

.axislabel {
	margin: 10px auto;
	height: 40px;
	color: grey;
	text-align:center;
	line-height: 40px;
}

.topfill {
	position: absolute;
	bottom: 0px;
}

.bottomfill {

}
.fill {
	box-shadow: 5px 5px 5px #1a1a1a;
}
.label {
	color: #fff;
	text-align: center;
	font-size: 0.75em;
}

.toplabel {
	padding: 3px 0px;
}
.bottomlabel {
	bottom: 0px;
}

.clickable {
	cursor: pointer;
}

.greenFill{background:#6AA63B;}
.yellowFill{background:#FBC700;}
.redFill{background:#D52100;}
.purpleFill{background:#5122B4;}
.blueFill{background:#0292C0;}

</style>

<script>
Array.max = function( array ){
    return Math.max.apply( Math, array );
};

// Function to get the Min value in Array
Array.min = function( array ){
    return Math.min.apply( Math, array );
};

$().ready(function() {
	$(".clickable").live("click", function() {
		alert("Clicked");
	});

	var c_data = [90000, -68000, 1100, 14000,];
	var c_label_data = ['Total','Committed','Available','Others'];
	var c_fillclasses = ['greenFill','yellowFill','blueFill','blueFill'];
	var nc_data = [-25000, 100900, 68500, -1000];
	var nc_label_data = ['Total','Committed','Available','Others'];
	var nc_fillclasses = ['greenFill','yellowFill','blueFill','blueFill'];

    var max = Array.max( $.merge($.merge( [], c_data ), nc_data) );
    var min = Array.min( $.merge($.merge( [], c_data ), nc_data) );
    max = (max != 0 ? 1.35*parseInt(max) : max);
    min = (min != 0 ? 1.35*parseInt(min) : min);

	var c_options = {
		id: '#chart_c_budget',
		data: c_data,
		headerText: 'Campaign Budget',
		barWidth: '90',
		labeldata: c_label_data,
		fillcolors: c_fillclasses,
		maxData: max,
		minData: min,
		maxHeight: '180',
		negativeClass: 'redFill'

	};
	var nc_options = {
		id: '#chart_non_c_budget',
		data: nc_data,
		headerText: 'Non Campaign Budget',
		barWidth: '90',
		labeldata: nc_label_data,
		fillcolors: nc_fillclasses,
		maxData: max,
		minData: min,
		maxHeight: '180',
		negativeClass: 'redFill'
	};

	var _buildChart = function(options) {
		var _generateHeader = function(options, elem) {
			var hdr = document.createElement('div');
			$(hdr).addClass('header')
				.append('<div class="headerlabel"><span>'+ options.headerText + '</span></div>');
			$(hdr).appendTo(elem);
		};
		var _generateContent = function(options, elem) {
			$.each(options.data, function(i, v) {
				var bar = document.createElement('div');
				$(bar).addClass('bar').addClass('minwidth').addClass('minheight');
				if (parseInt(v) >= 0) {
					var tophalf = document.createElement('div');
					$(tophalf).addClass('half').addClass('tophalf').addClass('halfheigt');

					var fill = document.createElement('div');
					$(fill).addClass('clickable').addClass('topfill').addClass('fill').addClass('minwidth').addClass(options.fillcolors[i]);
					$(fill).append('<div class="toplabel label">' + options.data[i] + '</div>');
					$(fill).css('height', Math.abs(parseInt(options.maxHeight) * options.data[i]/options.maxData));

					$(tophalf).append(fill).appendTo(bar);
					var bottomhalf = document.createElement('div');
					$(bottomhalf).addClass('half').addClass('bottomhalf').addClass('halfheigt');
					$(bottomhalf).appendTo(bar);
					$(bottomhalf).css('height', Math.abs(parseInt(options.maxHeight) * options.minData/options.maxData));//to make sure bottom labels are aligned
				} else {
					var tophalf = document.createElement('div');
					$(tophalf).addClass('half').addClass('tophalf').addClass('halfheigt');
					$(tophalf).appendTo(bar);

					var bottomhalf = document.createElement('div');
					$(bottomhalf).addClass('half').addClass('bottomhalf').addClass('halfheigt');
					$(bottomhalf).css('height', Math.abs(parseInt(options.maxHeight) * options.minData/options.maxData));//to make sure bottom labels are aligned

					var fill = document.createElement('div');
					$(fill).addClass('clickable').addClass('bottomfill').addClass('fill').addClass('minwidth').addClass(options.negativeClass);
					$(fill).append('<div class="bottomlabel label">' + options.data[i] + '</div>');
					$(fill).css('height', Math.abs(parseInt(options.maxHeight) * options.data[i]/options.maxData));
					$(bottomhalf).append(fill).appendTo(bar);
				}
				var axis = document.createElement('div');
				$(axis).addClass('half').addClass('axislabel').
					append('<span>' + options.labeldata[i] + '</span>');
				$(axis).appendTo(bar);
				$(bar).appendTo(elem);
			});
		};
		var top = document.createElement('div');
		$(top).addClass('chart');
		_generateHeader(options, top);
		_generateContent(options, top);

		$(options.id).append(top);
	};

	_buildChart(c_options);
	_buildChart(nc_options);
});
</script>

</head>

<body>
<div style="width:700px; margin: 0px auto">
	<div style="width: 100%; float:left;" id="defaultCharts">
		<div id="chart_c_budget" class="defaultchart"
			 style="margin-top:15px; width:300px; height:250px; float:left"></div>
		<div id="chart_non_c_budget" class="defaultchart"
			 style="margin-top:15px; width:300px; height:250px;float:left"></div>
	</div>
</div>
</body>

</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
	<style type="text/css">
	body {
	padding-top: 20px;
	padding-bottom: 60px;
	background: rgb(76, 77, 77);
	}

	.container {
	width: 800px;
	margin: 0px auto;
	}

	.chart {

	}
	.header {
	height: 50px;
	text-align: center;
	font-weight: bold;
	color: #fff
	}

	.bar {
	border: 0px solid lightgrey;
	float: left;
	margin:0px 10px;
	}

	.minwidth {
	min-width:80px;
	}

	.minheight {
	height:400px;
	}
	.halfheigt {

	}
	.half {
	width: 100%;
	}

	.tophalf {
	border-bottom: 0px solid lightgrey;
	position: relative;
	height: 180px;
	}

	.bottomhalf {

	}

	.axislabel {
	margin: 10px auto;
	height: 40px;
	color: grey;
	text-align:center;
	line-height: 40px;
	}

	.topfill {
	position: absolute;
	bottom: 0px;
	}

	.bottomfill {

	}
	.fill {
	box-shadow: 5px 5px 5px #1a1a1a;
	}
	.label {
	color: #fff;
	text-align: center;
	font-size: 0.75em;
	}

	.toplabel {
	padding: 3px 0px;
	}
	.bottomlabel {
	bottom: 0px;
	}

	.clickable {
	cursor: pointer;
	}

	.greenFill{background:#6AA63B;}
	.yellowFill{background:#FBC700;}
	.redFill{background:#D52100;}
	.purpleFill{background:#5122B4;}
	.blueFill{background:#0292C0;}

	</style>

	<script>
	Array.max = function( array ){
	return Math.max.apply( Math, array );
	};

	// Function to get the Min value in Array
	Array.min = function( array ){
	return Math.min.apply( Math, array );
	};

	$().ready(function() {
	$(".clickable").live("click", function() {
	alert("Clicked");
	});

	var c_data = [90000, -68000, 1100, 14000,];
	var c_label_data = ['Total','Committed','Available','Others'];
	var c_fillclasses = ['greenFill','yellowFill','blueFill','blueFill'];
	var nc_data = [-25000, 100900, 68500, -1000];
	var nc_label_data = ['Total','Committed','Available','Others'];
	var nc_fillclasses = ['greenFill','yellowFill','blueFill','blueFill'];

	var max = Array.max( $.merge($.merge( [], c_data ), nc_data) );
	var min = Array.min( $.merge($.merge( [], c_data ), nc_data) );
	max = (max != 0 ? 1.35*parseInt(max) : max);
	min = (min != 0 ? 1.35*parseInt(min) : min);

	var c_options = {
	id: '#chart_c_budget',
	data: c_data,
	headerText: 'Campaign Budget',
	barWidth: '90',
	labeldata: c_label_data,
	fillcolors: c_fillclasses,
	maxData: max,
	minData: min,
	maxHeight: '180',
	negativeClass: 'redFill'

	};
	var nc_options = {
	id: '#chart_non_c_budget',
	data: nc_data,
	headerText: 'Non Campaign Budget',
	barWidth: '90',
	labeldata: nc_label_data,
	fillcolors: nc_fillclasses,
	maxData: max,
	minData: min,
	maxHeight: '180',
	negativeClass: 'redFill'
	};

	var _buildChart = function(options) {
	var _generateHeader = function(options, elem) {
	var hdr = document.createElement('div');
	$(hdr).addClass('header')
	.append('<div class="headerlabel"><span>'+ options.headerText + '</span></div>');
	$(hdr).appendTo(elem);
	};
	var _generateContent = function(options, elem) {
	$.each(options.data, function(i, v) {
	var bar = document.createElement('div');
	$(bar).addClass('bar').addClass('minwidth').addClass('minheight');
	if (parseInt(v) >= 0) {
	var tophalf = document.createElement('div');
	$(tophalf).addClass('half').addClass('tophalf').addClass('halfheigt');

	var fill = document.createElement('div');
	$(fill).addClass('clickable').addClass('topfill').addClass('fill').addClass('minwidth').addClass(options.fillcolors[i]);
	$(fill).append('<div class="toplabel label">' + options.data[i] + '</div>');
	$(fill).css('height', Math.abs(parseInt(options.maxHeight) * options.data[i]/options.maxData));

	$(tophalf).append(fill).appendTo(bar);
	var bottomhalf = document.createElement('div');
	$(bottomhalf).addClass('half').addClass('bottomhalf').addClass('halfheigt');
	$(bottomhalf).appendTo(bar);
	$(bottomhalf).css('height', Math.abs(parseInt(options.maxHeight) * options.minData/options.maxData));//to make sure bottom labels are aligned
	} else {
	var tophalf = document.createElement('div');
	$(tophalf).addClass('half').addClass('tophalf').addClass('halfheigt');
	$(tophalf).appendTo(bar);

	var bottomhalf = document.createElement('div');
	$(bottomhalf).addClass('half').addClass('bottomhalf').addClass('halfheigt');
	$(bottomhalf).css('height', Math.abs(parseInt(options.maxHeight) * options.minData/options.maxData));//to make sure bottom labels are aligned

	var fill = document.createElement('div');
	$(fill).addClass('clickable').addClass('bottomfill').addClass('fill').addClass('minwidth').addClass(options.negativeClass);
	$(fill).append('<div class="bottomlabel label">' + options.data[i] + '</div>');
	$(fill).css('height', Math.abs(parseInt(options.maxHeight) * options.data[i]/options.maxData));
	$(bottomhalf).append(fill).appendTo(bar);
	}
	var axis = document.createElement('div');
	$(axis).addClass('half').addClass('axislabel').
	append('<span>' + options.labeldata[i] + '</span>');
	$(axis).appendTo(bar);
	$(bar).appendTo(elem);
	});
	};
	var top = document.createElement('div');
	$(top).addClass('chart');
	_generateHeader(options, top);
	_generateContent(options, top);

	$(options.id).append(top);
	};

	_buildChart(c_options);
	_buildChart(nc_options);
	});
	</script>

	</head>

	<body>
	<div style="width:700px; margin: 0px auto">
	<div style="width: 100%; float:left;" id="defaultCharts">
	<div id="chart_c_budget" class="defaultchart"
	style="margin-top:15px; width:300px; height:250px; float:left"></div>
	<div id="chart_non_c_budget" class="defaultchart"
	style="margin-top:15px; width:300px; height:250px;float:left"></div>
	</div>
	</div>
	</body>

	</html>