Sample Programs

CSS Vertical Grouped Bar Graph

  • 2003 - 2004
  • 2004 - 2005
  • 2005 - 2006
  • 2006 - 2007
  • 2007 - 2008
  • 2008 - 2009
  • $250,000

    $200,000

    $150,000

    $100,000

    $50,000

This bargraph is drawn usng completely CSS and no images. This graph can also be drawn dynamically using CSS and Javascript. Check out the code below.


<HTML>
 <HEAD>
  <TITLE> CSS Vertical Grouped Bar Graph </TITLE>
  
	<style>

	/** CSS VERTICAL BARGRAPH STYLE. (GROUPED BAR GRAPH) **/
	#bargraph1 {
	position: relative; 
	width: 600px; 
	height: 300px;
	margin: 1.1em 0 3.5em; 
	padding: 0;
    background: #F2F2F2 repeat-x;
    border: 2px solid gray; 
	list-style: none;
    font: 10px Helvetica, Geneva, sans-serif;
	}
	#bargraph1 ul {
		margin: 0; 
		padding: 0; 
		list-style: none;
	}
	#bargraph1 li {
		position: absolute; 
		bottom: 0; 
		width: 100px; 
		z-index: 2;
		margin: 0; 
		padding: 0;
		text-align: center; 
		list-style: none;
	}
	#bargraph1 li.yr {
		height: 298px; 
		padding-top: 2px;
		border-right: 1px dotted #C4C4C4; color: #AAA;
	}
	#bargraph1 li.bar {
		width: 40px; 
		border: 1px solid; 
		border-bottom: none; 
		color: #000;
	}
	#bargraph1 li.bar p {
		margin: 5px 0 0; 
		padding: 0;
	}
	#bargraph1 li.sent {
		left: 7px; 
		background: #D2B55B  repeat-x;
		border-color: #EDC #BA9 #000 #EDC;
	}
	#bargraph1 li.paid {
		left: 48px; 
		background: #6FCD61  repeat-x;
		border-color: #CDC #9B9 #000 #BFB;
	}
	#bargraph1 #yr1 {
		left: 0;
	}
	#bargraph1 #yr2 {
		left: 100px;
	}
	#bargraph1 #yr3 {
		left: 200px;
	}
	#bargraph1 #yr4 {
		left: 300px;
	}
	#bargraph1 #yr5 {
		left: 400px;
	}
	#bargraph1 #yr6 {
		left: 500px; 
		border-right: none;
	}

	#bargraph1 #profitRange {
		width: 600px; 
		height: 300px; 
		z-index: 1;
	}
	#bargraph1 #profitRange .pr {
		position: relative; 
		border-bottom: 1px solid #BBB; 
		width: 600px;
	}
	#bargraph1 #profitRange .pr p {
		position: absolute; 
		left: 100%; 
		top: -0.67em; 
		margin: 0 0 0 0.5em;
	}

	</style>
 </HEAD>

 <BODY>
  
    <ul id="bargraph1">
	<li class="yr" id="yr1">2003 - 2004
	<ul>
	<li class="sent bar" style="height: 100px;"></li>
	<li class="paid bar" style="height: 264px;"></li>
	</ul>
	</li>

	<li class="yr" id="yr2">2004 - 2005
	<ul>
	<li class="sent bar" style="height: 124px;"></li>
	<li class="paid bar" style="height: 100px;"></li>
	</ul>
	</li>

	<li class="yr" id="yr3">2005 - 2006
	<ul>
	<li class="sent bar" style="height: 43px;"></li>
	<li class="paid bar" style="height: 93px;"></li>
	</ul>
	</li>

	<li class="yr" id="yr4">2006 - 2007
	<ul>
	<li class="sent bar" style="height: 110px;"></li>
	<li class="paid bar" style="height: 205px;"></li>
	</ul>
	</li>

	<li class="yr" id="yr5">2007 - 2008
	<ul>
	<li class="sent bar" style="height: 130px;"></li>
	<li class="paid bar" style="height: 265px;"></li>
	</ul>
	</li>

	<li class="yr" id="yr6">2008 - 2009
	<ul>
	<li class="sent bar" style="height: 170px;"></li>
	<li class="paid bar" style="height: 105px;"></li>
	</ul>
	</li>

	<li id="profitRange">
	<div class="pr" style="height: 59px;"><p>$250,000</p></div>
	<div class="pr" style="height: 59px;"><p>$200,000</p></div>
	<div class="pr" style="height: 59px;"><p>$150,000</p></div>
	<div class="pr" style="height: 59px;"><p>$100,000</p></div>
	<div class="pr" style="height: 59px;"><p>$50,000</p></div>
	</li>

	</ul>
 </BODY>
</HTML>



blog comments powered by Disqus