jQuery Plugin - Histogram

<script src="jquery.js"></script>


<div id="chart">
<div id="inner">
 <div id="left">a

 </div>

 <div id="right">
  <div id="main">  
    <div id="one" class="bar">    
     <div class="center"></div>        
    </div>
    <div id="two" class="bar">    
     <div class="center"></div>    
    </div>
    <div id="three" class="bar">    
     <div class="center"></div>    
    </div>
    <div id="four" class="bar">    
     <div class="center"></div>   
    </div>
    <div style="clear: both"></div>
  
   </div><!-- End of main -->
  <div id="bottom">
  
  </div><!-- End of bottom -->


 </div><!-- End of right -->
 <div style="clear:both"></div>

</div><!-- End of inner -->
</div><!-- End of char -->

<style>
div,body, html  { margin: 0px; padding: 0px; }
#inner { border: 1px solid #aaa; height: 200px; width: 400px; padding: 2px;  }
#left { width: 30px; height: 100%; float: left; border-right: 1px solid #aaa; opacity: 1;}
#right { height: 100%;  }
#main { background: azure; width: 100%; height: 90%;  }
#bottom {  width: 100%; height: 10%; border-top: 1px solid #aaa; margin: 1 0 0px;   }

.bar { float: left; width: 20%; height: 100%; position: relative; }
.center { width: 30%; height: 80%; background: blue; position: absolute; bottom: 0px; left: 30%;}
#one .center { height: 40%; }
#two .center { height: 60%; }
#three .center { height: 70%; }
#four .center { height: 30%; }
</style>

<script>

/**

 * A plugin for horizontal histogram of jQuery

 * 

 * @author  : irfanudin ridho

 * @email   : irfan.ub@gmail.com

 * @date    : February 16, 2010

 * @version : alpha

 */

(function($){

    $.fn.histogram = function(){

       // the code goes here

    };

});

</script>